（1）工程目录结构
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录（自建）
├─platforms 存放各平台专用页面的目录（自建）
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录（自建）
├─common 公共资源（自建）
├─api 请求封装（自建）
├─store 状态管理（自建）
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息
└─pages.json 配置页面路由、导航条、选项卡等页面类信息提示
static下目录的 js 文件不会被 webpack 编译，里面如果有 es6 的代码，不经过转换直接运行，在手机设备上会报错。所以less、scss等资源同样不要放在static目录下，建议这些公共的资源放在common目录下
（2）应用配置 manifest.json
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为 H5 设置跨域拦截处理器
（3）编译配置 vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。官方文档
（4）全局配置 page.json
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。
官方文档
属性 类型 必填 描述 globalStyle Object 否 设置默认页面的窗口表现 pages Object Array 是 设置页面路径及窗口表现 easycom Object 否 组件自动引入规则 tabBar Object 否 设置底部 tab 的表现 condition Object 否 启动模式配置 subPackages Object Array 否 分包加载配置 preloadRule Object 否 分包预下载规则
（5）全局样式 uni.scss
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。官方文档
uni-app 官方扩展插件（uni ui）及 插件市场 上很多三方插件均使用了这些样式变量，如果你是插件开发者，建议你使用 scss 预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App。
uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。
（6）主组件 App.vue
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素 template模板语法。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
应用生命周期仅可在App.vue中监听，在页面监听无效。
（7）入口文件 main.js
main.js是uni-app的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。
官方文档
（8）UniAPP 开发规范及资源路径
- 开发规范约定
- 页面文件向导 Vue单文件组件（SFC）规范
- 组件标签靠近小程序规范，详见 uni-app 组件规范
- 互连能力（JS API）靠近微信小程序规范，但需要将替换替换 wx 为 uni ，详见uni-app接口规范
- 数据绑定及事件处理同 Vue.js 规范，同时补充了 App 和页面的生命周期
- 为兼容多端运行，建议使用 flex 布局进行开
- 资源路径说明
template 内约会静态资源，如 image，video 等标签的 src 属性时，可以使用相对路径或绝对路径，形式如下：
<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
注意
- @ 初始的绝对路径以及相对路径会通过 base64 转换规则校验
- 约会的静态资源在非 h5 平台，均不转为 base64
- H5平台，小于4kb的资源会被转换成base64，其余不转
js 文件或 script 标签内，可以使用相对路径和绝对路径，形式如下：
// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'
css 文件或 style 标签内，可以使用相对路径和绝对路径，形式如下：
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
css 文件或 style 标签内引用的图片路径，可以使用相对路径也可以使用绝对路径，形式如下：
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
