UNI-APP学习系列

uni-app项目运行和项目结构目录讲解

---

---

前言

UNI-APP学习系列之uni-app项目运行和项目结构目录讲解

---

• 运行项目
  • 使用 pnpm 包管理工具

      # 查看是否安装pnpm
       pnpm -v
       # 无则安装
      npm install -g pnpm
      ```
    

  • 下载依赖

      pnpm i
    

  • 运行

    pnpm dev:h5
    

    可以通过修改package.json文件的方式来简化运行命令
• 项目结构
  
  具体每个文件作用如下所示

  node_modules  ——放置项目的依赖文件
  
  src           ——放置开发的代码文件
  
  pages         ——放置页面文件
  
  static        ——放置静态文件
  
  App.vue       ——页面入口文件
  
  env.d.ts      ——.vue文件的类型说明文件
  
  main.ts       ——程序的入口文件，加载各种公共组件
  
  manifest.json ——5+App拓展文件，打包app时要使用
  
  pages.json    ——全局配置文件，配置页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等等
  
  uni.scss      ——uniapp的默认css样式
  
  .gitignore    ——git忽略文件
  
  index.html    ——项目总的入口文件
  
  package.json  ——项目依赖的描述文件
  
  pnpm-lock.yaml  ——锁定项目的依赖包版本
  
  tsconfig.json   ——TS的语法识别和执行配置文件
  
  vite.config.ts  ——编译工具vite的配置文件
  

---

总结

以上就是今天要讲的内容，本文介绍了uni-app项目运行和项目结构目录讲解，篇幅较短但是内容很重要需要认真学习理解，后续我会基于VSCode继续进行开发讲解UNI-APP框架，喜欢的请点击关注，UNI-APP框架使用教程将会持续更新下去。