uni-app之cli 编译打包

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

环境安装

全局安装vue-cli

npm install vue-cli -g

创建uni-app

• 使用正式版（对应HBuilderX最新正式版）

  vue create -p dcloudio/uni-preset-vue my-pro
  

• 使用alpha版（对应HBuilderX最新alpha版）

  vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
  

此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板

创建项目时，会提示是否安装npm的淘宝镜像，
选择模板后，会自动安装项目依赖，并提示你以npm run serve 运行

运行发布

在项目根目录下package.json 可以看到

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

的取值如下

注意

• cli创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行npm update。
• 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
• cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

将已有的项目改造

将之前的代码复制到src目录下

将之前项目的npm 依赖转移到当前package中，H5初始页面
放在public中

• 安装scss编译器

   npm install node-sass sass-loader --save-dev
  

上传微信小程序代码

• 安装miniprogram-cli

  npm install miniprogram-ci --save-dev
  

• 在微信小程序后台开发设置 代码上传 中配置ip白名单 和下载上传密钥
• 使用方式分两种

1. 在项目中引用，编写package.json 脚本

   const ci = require('miniprogram-ci')
   let { wxVersion: version, wxDesc: description } = require('./package.json')
   
   if (!version) version = 'v1.0.0'
   if (!description) description = new Date() + '上传'
   
   const project = new ci.Project({
     appid: '',
     type: 'miniProgram',
     projectPath: process.cwd() + '/dist/build/mp-weixin',
     privateKeyPath: process.cwd() + '/key/private..key',
     ignores: ['node_modules/**/*'],
   })
   ci.upload({
     project,
     version,
     desc,
     setting: {
       minify: true,
     },
   }).then(res => {
     console.log(res)
     console.log('上传成功')
   }).catch(error => {
     if (error.errCode == -1) {
       console.log('上传成功')
     }
     console.log(error)
     console.log('上传失败')
     process.exit(-1)
   })
   

   "upload-wx": "npm run build:mp-weixin && node upload.wx.js"
   

2. 使用命令行

   miniprogram-ci \
     upload \
     --pp ./demo-proj/ \
     --pkp ./private.YOUR_APPID.key \
     --appid YOUR_APPID \
     --uv PACKAGE_VERSION \
     -r 1 \
     --enable-es6 true \
   

更多请看https://developers.weixin.qq.com/miniprogram/dev/devtools/ci.html