uniapp 目录结构

uniapp 项目常用的目录结构和每个文件的作用。

uniapp 目录结构

html 复制代码

components                      // 组件目录
api                             // 封装接口目录
node_modules                    // 环境依赖
pages                           // 页面文件目录
    index                       // index 页面文件夹
        index.vue               // index 页面
static                          // 静态资源目录
uni_modules                     // uniapp 环境依赖
unpackage                       // 打包文件目录
common                          // 公共文件目录
App.vue                         // 根组件
index.html                      // 入口页面
main.js                         // 入口文件
manifest.json                   // 应用配置文件
pages.json                      // 页面配置文件
package.json                    // 插件管理文件
package-lock.json               // 插件版本锁定文件
uni.scss                        // 内置样式文件

components 文件夹：用于存放公共的组件，例如自定义的 tabBar 组件。
api 文件夹：用于存放封装好的 API 接口文件。
node_modules 文件夹：用于存放项目的各种依赖文件。大多数是通过 npm 安装的。
pages 文件夹：用于存放我们开发的 uniapp 页面，如 login、home 等页面。
static 文件夹：用于存放各种静态资源，img、css 等等。
uni_modules 文件夹：用于存放 uniapp 项目的各种依赖文件。
unpackage 文件夹：用于存放我们打包后的项目文件。
common 文件夹：公共文件夹，用于存放一些公共的 JS 文件。
App.vue 文件：根组件，是项目的主组件，所有的页面都要通过 App.vue 组件显示。
index.html 文件：项目入口页面，访问项目的时候会默认打开生成好的 index.html 文件。
main.js 文件：入口文件，主要用于初始化 uniapp 项目，也可以在此文件中引入一些组件库或者全局挂载一些变量。
manifest.json 文件：用于配置各种应用的名称、appid、logo、版本号等，配置打包后的信息。
pages.json 文件：用于配置页面路由、导航栏、选项卡等，配置页面的信息。
package.json 文件：插件的基本信息，包含项目开发时所需要的插件版本等。
package-lock.json 文件：用于记录当前项目实际安装的各个插件具体来源地址和版本号。
uni.scss 文件：uniapp 项目内置的全局样式变量。

原创作者：吴小糖

创作时间：2023.12.28