uni-app 项目目录结构
1. 前言
日常开发过程中，都是需要在这个目录结构的基础上面完成项目搭建，所以，我们首先需要了解这个初始目录结构各个目录的含义。
在创建项目时，选择不同的模板生成的项目目录是不一样的，我们先介绍两个最常见的项目模板，uni-ui 项目模板、Hello uni-app 模板。了解这两个项目模板生成的项目目录，其他模板生成的目录也可以掌握。
我们本小节来了解一下项目目录以及这些文件夹的作用。
2. uni-ui 项目目录介绍
各文件的作用如下：
| 文件名称 | 作用 |
|---|---|
| components | 是一个用来存放组件的文件夹，从外部引用的组件，或者自己自定义的组件都是放在这个文件夹中 |
| pages | 是一个用来存放所有页面的文件夹，也是我们经常操作的一个目录 |
| static | 是一个存放静态资源的文件夹，例如图片等 |
| unpackage | 是打包目录，存放打包后的文件。有些新建项目目录中没有这个文件夹，在微信开发者工具等编译平台运行后，也会生成这个文件。 |
| App.vue | 是页面入口文件，所有页面都是在 App.vue 下进行切换的，可以调用应用的生命周期函数 |
| main.js | 是项目入口文件，主要用来初始化 vue 实例并使用需要的插件 |
| manifest.json | 是应用配置文件，用于指定应用的名称、图标、权限等 |
| pages.json | 是全局配置文件，可以配置页面文件路径、窗口样式、原生的导航栏、底部 tab 栏等 |
| uni.scss | 是 uni-app 的样式包。在其他文件中可以快速引用样式包里面的样式 |
3. Hello uni-app 项目目录介绍
各文件的作用如下：
| 文件名称 | 作用 |
|---|---|
| common | 是存放公共 js 和 css 的文件夹 |
| components | 是用来存放组件的文件夹 |
| hybrid | 是存放本地网页 .html 文件的文件夹 |
| pages | 是用来存放所有页面的文件夹 |
| platforms | 是存放各平台专用页面的文件夹，如果想把各平台的页面文件更彻底的分开，可以 platforms 目录中创建子目录，存放不同平台的页面文件 |
| static | 是存放静态资源的文件夹 |
| store | 是 vuex 状态管理文件夹，在 uni-app 项目内置了 vuex，使用时直接在 main.js 里面配置一下就可以了 |
| wxcomponents | 存放小程序组件的目录，详见 2.1 |
| unpackage | 打包目录 |
| App.vue | 页面入口文件 |
| main.js | 项目入口文件 |
| manifest.json | 应用配置文件 |
| package.json | 是项目的主配置文件，里面包含了 uni-app 项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息 |
| pages.json | 全局配置文件 |
| template.h5.html | 是 h5 端的网页模板文件 |
| uni.scss | uni-app 的样式包 |
4. 各平台小程序组件存放目录
4.1 使用方式
{
"path" : "index/index",
"style":{
"usingComponents":{
"custom":"/wxcomponents/custom/index"
"custom":"/swancomponents/custom/index"
"custom":"/mycomponents/custom/index"
}
}
}
在页面中使用实例:
<view>
<custom name="uni-app"></custom>
</view>