uniapp环境搭建以及基础配置详解
环境搭建
- 安装编辑器 HbuilderX(HbuilderX 是通用的前端开发工具，但为 uni-app 做了特别强化)。
- 下载 APP 开发板，可开箱即用。
- 安装微信开发者工具。
利用 HbuilderX 初始化项目
创建 uni-app 项目
选择 uni-app 类型，输入工程名，选择模板，点击创建，即可成功创建。
un-app 自带的模板有 Hello uni-app，是官方的组件和 API 示例。
还有一个重要的模板是 uni ui 项目模板，日常开发推荐使用该模板，已内置大量常用组件。
运行 uni-app
主要包括：浏览器运行、真机运行、小程序运行等。
发布 uni-app
主要包括：云端原生 APP、离线原生 APP、H5、各种小程序。
uni-app 初始化相关配置
工程目录结构
提示：
static下目录的 js 文件不会被 webpack 编译，里面如果有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
所以 less、scss 等资源同样不要放在 static 目录下，建议这些公共的资源放在 common 目录下。
应用配置 manifest.json
manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等，也可以为 Vue 为 H5 设置跨域拦截处理器。
编译配置 vue.config.js
vue.config.js是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。
全局配置 page.json
page.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。类似于微信小程序中app.json的页面管理部分。
| 属性 | 类型 | 必填 | 描述 |
| globalStyle | Object | 否 | 设置默认页面的窗口表现 |
| pages | Object Array | 是 | 设置页面路径及窗口表现 |
| easycom | Object | 否 | 组件自动引入规则 |
| tabBar | Object | 否 | 设置底部 tab 的表现 |
| condition | Object | 否 | 启动模式配置 |
| subPackages | Object Array | 否 | 分包加载配置 |
| preloadRule | Object | 否 | 分包预下载规则 |
全局样式 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 策略。
主组件 App.vue
App.vue是 uni-app 的主组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件。但 App.vue 本身不是页面，这里不能编写视图元素。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储 globalData 。
应用生命周期仅可在 App.vue 中监听，在页面监听无效。
入口文件 main.js
main.js 是 uni-app 的入口文件，主要作用是初始化 vue 实例、定义全局组件、使用需要的插件如 vuex 。
