前言
- 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
- 如果上面命令行不好使也可以直接去下载项目模板
初始化项目
项目创建后，先要做初始化。如果大家熟悉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 | 快应用华为 |
网友评论