# 创建运行
创建uni-app官网链接
1、全局安装vue-cli（若全局有vue-cli则不用安装）
npm install -g @vue/cli
2、使用正式版（对应HBuilderX最新正式版），my-project为自定义项目名
vue create -p dcloudio/uni-preset-vue my-project
此时，会提示选择项目模板，可以选择“看图模板” 项目模板，里面可以看分包配置（subPackages）
3、运行、发布uni-app，比如我们要运行发布的是微信小程序，
则“npm run dev:mp-weixin”，“npm run build:mp-weixin
npm run dev:%PLATFORM%
npm run build:%PLATFORM%
npm run dev:mp-weixin 编译之后，项目下会生成dist文件夹，用微信开发者工具打开dist/dev/mp-weixin（运行成功后，会有提示）
密钥用my-project/src/manifest.json 中里的appid( 微信小程序的AppID，登录 https://mp.weixin.qq.com 申请)，如果暂时没有用测试密钥也行(但是测试密钥无法发布上传，只能用于暂时开发)。OK，启动完成
# 目录结构
默认包含如下目录及文件：
┌─uniCloud 云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见[uniCloud](https://uniapp.dcloud.io/uniCloud/quickstart?id=%e7%9b%ae%e5%bd%95%e7%bb%93%e6%9e%84)）
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid App端存放本地html文件的目录，[详见](https://uniapp.dcloud.io/component/web-view)
├─platforms 存放各平台专用页面的目录，[详见](https://uniapp.dcloud.io/platform?id=%E6%95%B4%E4%BD%93%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91)
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules 存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents 存放小程序组件的目录，[详见](https://uniapp.dcloud.io/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 [应用生命周期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，[详见](https://uniapp.dcloud.io/collocation/manifest)
└─pages.json 配置页面路由、导航条、选项卡等页面类信息，[详见](https://uniapp.dcloud.io/collocation/pages)
# 尺寸单位： px、rpx
-
px 即屏幕像素
-
rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx计算配置 。
# 配置
1、pages.json
配置页面路由、导航条、选项卡等页面类信息。
它类似微信小程序中app.json的页面管理部分。 注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。
2、manifest.json
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
微信小程序特有配置，eg:
1） appid 微信小程序的AppID，登录 https://mp.weixin.qq.com 申请
2）optimization 对微信小程序的优化配置，eg:
"optimization":{"subPackages":true} //是否开启分包优化
通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。
所有编译运行指令都在package.json里的scripts对象中。
4、main.js
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。
5、App.vue
应用配置，用来配置App全局样式以及监听 应用生命周期
6、uni.scss
方便整体控制应用的风格。
网友评论