使用Vue命令行开发UniApp项目

前言

• Uni-App是套很成熟的跨平台前端开发框架。当下需要移动端的App、小程序、H5应用都是基于Uni-App生态构建出来。官方提供的IDE——HBuilderX也是前端开发者十分喜爱的开发利器。能够免除安装Node.JS全家桶，这便其是一大卖点！
• 然而，在运维人员的视角来看HBuilderX的打包方式就不受欢迎了。运营人员追求的是脚本话、自动化、过程可追溯可记录。
• 使用Uni-App开发项目，如何平衡开发和运营的不同的需求点呢？其实还是有办法的，官方有给出了解决方案。那便是使用vue-cli模板来创建项目，那么这种项目便既可使用HBuilderX做开发调试，又可使用脚本进行打包发布。完美解决了“既要..又要..”的矛盾。

官方文档

先给个传送门

https://uniapp.dcloud.net.cn/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app

个人实践

下面记录一下我个人的实践过程。如果嫌官方的文档过于冗长，也可以参考下面内容。

开发环境

为了完美兼容Vue3，开发环境按照以下标准进行配置。

• node.js 16+
• vue-cli 5.0+
• HBuildX 3.6.7+

查看一下vue-cli的版本

vue -V

如果没有安装或者版本不符合要求的话

npm install -g @vue/cli

创建项目

• 使用Vue2模板创建项目

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

• 使用Vue3/Vite模板创建javascript项目

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

• 使用Vue3/Vite模板创建typescript项目

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

• 如果上面命令行不好使也可以直接去下载项目模板

https://gitee.com/dcloud/uni-preset-vue

初始化项目

项目创建后，先要做初始化。如果大家熟悉vue开发这一步，应该是轻车熟路了。

npm install

初始化之后，根据项目需要把各种依赖库都用npm装上，例如：

npm install vuex --save
npm install less --save
npm install sass --save

开发调试

• 初始化完成后，我们就可以打开HBuilderX把项目导入，愉快滴进行开发调试了。
• 如果想用其他工具譬如VS Code做开发，也是没问题的。传统的vue.js项目的方法一样能够顺利跑起来。

npm run dev:h5

打包发布

打包发布一样可以用命令搞定，至于冒号后面的是发布的目标平台。详情可参考后面表格。

npm run build:h5

值	平台
app-plus	app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-lark	飞书小程序
mp-qq	qq 小程序
mp-360	360 小程序
mp-kuaishou	快手小程序
mp-jd	京东小程序
mp-xhs	小红书小程序
quickapp-webview	快应用(webview)
quickapp-webview-union	快应用联盟
quickapp-webview-huawei	快应用华为