除了使用HBuilderX工具可视化搭建项目外,DCloud官方还提供了一个脚手架用于命令行搭建项目。
uni-app项目支持 uni cli和 HBuilderX cli两种脚手架工具:
uni cli:面向非HBuilderX的用户(如习惯使用vscode/webstorm的开发者),提供创建项目、编译发行等能力;在App平台,仅支持生成离线打包的wgt资源包,不支持云端打包生成apk/ipa;若需云端打包,依然需要安装HBuilderX,使用HBuilderX cli。
HBuilderX cli:面向HBuilderX用户的自动化工具,提供uni-app项目的持续集成能力;支持通过HBuilderX cli进行web打包、小程序打包、App云端打包、部署uniCloud等;但注意HBuilderX暂不支持linux平台。另外注意HBuilderX cli不基于npm,它是HBuilderX安装目录下的cli.exe。
提供有完整的cli 脚手架,可以通过 vue-cli 创建、运行、发行 uni-app 项目。
一、环境安装
全局安装vue-cli
npm i @vue/cli@4 -g
建议使用vue-cli 4.x版本,vue-cli 5.x与webpack存在冲突,会导致运行报错
二、创建项目
1、安装预设模板
使用vue-cli安装预设模板。
vue create -p dcloudio/uni-preset-vue projectName
dcloud提供了多个预设版本
//对应HBuilderX最新alpha版
vue create -p dcloudio/uni-preset-vue#alpha projectName
//使用Vue3/Vite js版本
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
//使用Vue3/Vite ts版本
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
此时,会提示选择项目模板(使用Vue3/Vite版不会提示,目前只支持创建默认模板),初次体验建议选择 hello uni-app 项目模板。
2、注意
Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
模板项目存放于 Github,由于国内网络环境问题,可能下载失败。
2、安装依赖
打开 在src文件找到mainfest.json文件将AppId填入
进入项目路径运行
npm install
3、运行项目
npm run dev:mp-weixin
4、发行项目
npm run build:mp-weixin
运行成功后会再项目中生成一个dist目录,里边存在build/mp-weixin项目,就是打包编译后微信小程序代码。可以直接在微信开发者工具中运行。
5、注意:
vue2发布到App平台时,平台参数为app-plus;vue3发布到App平台时,平台参数为app;
uni cli在App平台,仅支持生成离线打包的wgt资源包,不支持云端打包生成apk/ipa;若需云端打包,依然需要安装HBuilderX,使用HBuilderX cli。