3-3 方案二：使用vue-cli创建uni-app项目
创建步骤
方式一：degit 下载模板（推荐）
# Vue 3 + Vite 版本
npx degit dcloudio/uni-preset-vue#vite-ts my-project
cd my-project
npm install
bash
方式二：git clone 下载
如果 degit 下载缓慢，可以使用 git clone：
git clone -b vite-ts https://github.com/dcloudio/uni-preset-vue.git my-project --depth 1
bash
下载完成后需要删除 .git 目录，重新初始化自己的 Git 仓库。
方式三：本地模板
将模板仓库解压到本地，使用相对路径创建：
vue create -p ./uni-preset-vue my-project
bash
项目目录结构
CLI 项目与 HBuilderX 项目的目录有所不同：
my-project/
├── src/ ← 源码目录（HBuilderX 中没有这层）
│ ├── pages/
│ ├── static/ ← CLI 项目的 static 在 src 下
│ ├── App.vue
│ ├── main.js
│ ├── manifest.json
│ ├── pages.json
│ └── uni.scss
├── public/
│ └── index.html ← 模板文件
├── dist/ ← 编译产物（运行后生成）
│ └── dev/
│ └── mp-weixin/ ← 微信小程序产物
├── package.json
└── vite.config.ts
text
常用脚本
package.json 中预设了常用脚本：
{
"scripts": {
"dev:h5": "uni",
"dev:mp-weixin": "uni -p mp-weixin",
"build:h5": "uni build",
"build:mp-weixin": "uni build -p mp-weixin"
}
}
json
| 命令 | 说明 |
|---|---|
npm run dev:mp-weixin | 开发模式运行微信小程序 |
npm run build:mp-weixin | 生产构建微信小程序 |
npm run dev:h5 | 开发模式运行 H5 |
运行到微信开发者工具
- 在终端执行
npm run dev:mp-weixin - 编译完成后，在
dist/dev/mp-weixin目录生成产物 - 打开微信开发者工具，选择"导入项目"
- 选择
dist/dev/mp-weixin目录 - 填入 AppID，不使用云服务，点击确定
关闭 sitemap 检查
在 src/manifest.json 中添加配置：
{
"mp-weixin": {
"setting": {
"checkSiteMap": false
}
}
}
json
VS Code 插件推荐
CLI 项目配合 VS Code 开发，推荐安装以下插件：
| 插件 | 功能 |
|---|---|
| uni-app-snippets | uni-app API 代码提示 |
| uni-app-sni | 平台条件编译注释（#ifdef H5、#ifdef MP-WEIXIN） |
| Vue - Official | Vue 语法支持和代码提示 |
| ESLint | 代码质量检查 |
| Prettier | 代码格式化 |
集成 SCSS
在 CLI 项目中启用 SCSS：
npm install sass sass-loader@10 -D
bash
sass-loader 建议使用 10.x 版本。安装后即可在 .vue 文件的 <style lang="scss"> 中使用 SCSS 语法，也可在 App.vue 中定义全局 SCSS 变量。
CLI 方式 vs HBuilderX 方式
| 维度 | HBuilderX 项目 | CLI 项目 |
|---|---|---|
| Node 环境 | 内置，无需配置 | 需要自行安装 Node.js |
| 编辑器 | 只能用 HBuilderX | VS Code 等任意编辑器 |
| 插件生态 | HBuilderX 插件市场 | npm + VS Code 插件 |
| 代码规范 | 内置格式化，能力有限 | ESLint + Prettier，完善 |
| CI/CD | 不友好 | 完全兼容 |
| 学习成本 | 低 | 中 |
建议：团队协作和长期维护推荐 CLI 方式，个人快速开发可使用 HBuilderX。CLI 创建的项目也可以拖入 HBuilderX 中编辑，兼得两者优势。
参考资源
- uni-app CLI 创建项目 - 官方文档
- uni-preset-vue 模板仓库 - GitHub
↑