CLI 创建 uni-app 项目

安装环境

1. 安装 Node.js

下载 LTS 版本（建议 22.x 或官方当前 LTS）：

nodejs.org

安装完成后打开 CMD：

node -v
npm -v

2. 安装 pnpm

npm install -g pnpm

检查

pnpm -v

3. 安装微信开发者工具

下载

developers.weixin.qq.com/miniprogram…

安装即可。

创建 uni-app 项目

进入想放项目的目录，例如

cd D:\project

执行官方创建命令：

pnpm create uni

如果使用 npm：

npm create uni@latest

输入项目名称，然后选择模板

T  Uni-creator - 快速创建 uni-app 项目
|
o  请输入项目名称:
|  demo
|
o  请选择 uni-app 模板：
|  wot ▼
|
o  请选择 wot 模板
|  wot-starter-v2
|
o  🎉 恭喜！您的项目已准备就绪。
|
o  Getting Started -+
|                   |
|  $ cd dem         |
|  $ pnpm install   |
|  $ pnpm dev       |
|                   |
+-------------------+

模板	推荐指数	适合人群	说明
vitesse-uni-app	⭐⭐⭐⭐☆	有 Vue3 经验	集成 Pinia、Vue Router、ESLint、UnoCSS 等，功能很全，但对新手稍复杂。
wot	⭐⭐⭐⭐⭐	做企业后台、小程序	基于 Wot Design UI，组件质量高，维护活跃，比较推荐。
uView Pro	⭐⭐⭐⭐☆	国内项目	uView 曾经很火，组件丰富，但 Pro 版生态没有以前那么普及。
unisave	⭐⭐☆☆☆	特定场景	使用者较少，不建议新手。
tmui3.2	⭐⭐⭐☆☆	喜欢 Material 风格	组件很多，但学习成本稍高，社区相对小一些。

模板	推荐	说明
wot-starter	⭐⭐⭐	第一代模板，基于 vitesse-uni-app，配置较多，适合熟悉其生态的开发者。
wot-starter-v2	⭐⭐⭐⭐⭐ 推荐	第二代模板，结构更简洁，基于 Vue3 + Vite + TypeScript，适合新项目和新手。
wot-starter-retail	⭐⭐⭐	电商模板，已经集成首页、商品列表、购物车等零售场景，不适合普通项目。

用 IDEA 打开

启动微信小程序

pnpm install
pnpm dev:mp-weixin

终端会看到类似：

说明已经编译成功。

打开微信开发者工具

点击导入

选择目录，不要选择项目根目录。 而是选择：

dist
└── dev
    └── mp-weixin

注册小程序

安装常用插件

pnpm add axios dayjs lodash-es qs mitt crypto-js js-cookie

插件	作用	使用场景	是否推荐
axios	HTTP 请求库	调用 Spring Boot、Node.js 等后端接口	⭐⭐⭐⭐⭐ 必备
dayjs	日期时间处理	格式化日期、计算时间差、时间戳转换	⭐⭐⭐⭐⭐ 推荐
lodash-es	工具函数库	深拷贝、去重、防抖、节流、数组对象操作	⭐⭐⭐⭐⭐ 推荐
qs	URL 参数序列化	将对象转换为 application/x-www-form-urlencoded 格式	⭐⭐⭐⭐ 按需
mitt	事件总线	非父子组件之间通信	⭐⭐⭐⭐ 按需
crypto-js	加密算法	MD5、SHA1、SHA256、AES 等前端加密/摘要	⭐⭐⭐⭐ 推荐（尤其安全相关）
js-cookie	Cookie 管理	H5/Web 登录状态、Token 存储	⭐⭐⭐ 按需（微信小程序一般不用）

当前项目查看已经安装的插件

pnpm list --depth=0