携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情
前言
大家好呀，我是L同学。在本篇文章中，我们将学习UniAPP的相关知识点，包括什么是UniAPP、UniAPP 开发环境搭建、UniAPP 初始化相关配置等相关知识点。
UniAPP 介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台，方便开发者快速交付，不需要转换开发思维，不需要更改开发习惯。
为什么要选择 UniAPP呢？ UniAPP有如下优点：
- 开发者/案例数量更多
- 平台能力不受限
- 性能体验优秀
- 周边生态丰富
- 学习成本低
UniAPP 开发环境搭建
- 下载开发工具HBuilderX
进行UniAPP 开发，我们通常使用HBuilderX这个开发工具。HBuilderX 是通用的前端开发工具，但为uni-app做了特别强化。下载 App 开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。
- 创建 uni-app 项目
选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建。uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。
- 运行 uni-app
主要包括：浏览器运行、真机运行、小程序运行等。
- 发布 uni-app
主要包括：云端原生 APP 、离线原生 APP、H5、各种小程序。
UniAPP 初始化相关配置
工程目录结构
一般，我们会搭建这样的工程目录结构。
┌─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目录下。
应用配置 manifest.json
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等，我们也可以在这里为 Vue 为H5 设置跨域拦截处理器。
编译配置 vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。
全局配置 page.json
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。
全局样式 uni.scss
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个 uni.scss，使得每个 scss 文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。
