Taro：多端统一开发框架安装与微信小程序编译指南

Taro 是京东开源的开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/QQ 小程序、H5、React Native 等应用。一套代码多端运行，避免针对不同端重复编写。

一、项目官方信息

二、官方图片

Taro 使用案例展示：

三、环境要求

• Node.js 16+（LTS 推荐）。
• npm/yarn/pnpm 包管理器。
• 微信开发者工具（用于预览与真机调试）。

四、完整部署/接入步骤

1. 安装 CLI

npm install -g @tarojs/cli

验证版本：

taro -v

2. 初始化项目

taro init myApp

按交互提示选择框架（React/Vue）、TypeScript、CSS 预处理器、包管理器等。

3. 安装依赖

cd myApp
npm install

4. 编译到微信小程序

开发模式：

npm run dev:weapp

生产构建：

npm run build:weapp

构建产物默认输出到 dist/ 目录。

5. 用微信开发者工具打开

打开微信开发者工具，选择「导入项目」，目录指向 myApp/dist，填入 AppID 即可预览。

五、使用方法

目录结构

myApp/
├── src/
│   ├── app.config.ts      # 全局配置
│   ├── app.ts             # 入口
│   ├── app.css            # 全局样式
│   ├── index/             # 页面
│   └── components/        # 组件
└── project.config.json

编写页面

src/index/index.config.ts：

export default {
  navigationBarTitleText: '首页'
}

常用命令

npm run dev:weapp     # 微信小程序开发
npm run build:weapp   # 微信小程序生产
npm run dev:h5        # H5 开发
npm run dev:rn        # React Native 开发

配套 UI 库

• taro-ui：官方多端 UI 库；
• NutUI：京东风格 Vue3 组件库；
• taroify：Vant 的 Taro 版本；
• @antmjs/vantui：基于有赞 VantWeapp 的 UI 库。

版本迁移

Taro 1/2 迁移到 Taro 3 见《Taro 版本升级权威指南》。

六、常见问题 FAQ

1. taro: command not found？ 全局安装后 npm bin 目录未在 PATH，重新 npm install -g @tarojs/cli 或用 npx。

2. 编译产物在哪？ 默认在项目根目录的 dist/ 文件夹，微信开发者工具导入这个目录。

3. 如何切换 React/Vue？ npm run dev:weapp 前在 config/index.js 的 framework 字段指定，或在 taro init 时选择。

4. 微信开发者工具报错找不到 appid？ 在项目设置里填入自己的小程序 AppID；测试号可在微信公众平台申请。

5. 如何升级 Taro？ 参考官方《Taro 版本升级权威指南》，先升级 CLI 再升级项目依赖。

6. UI 库选哪个？ React 栈推荐 taro-ui/taroify；Vue 栈推荐 NutUI。

七、跳转链接

• GitHub 仓库：https://github.com/NervJS/taro
• 官方文档：https://docs.taro.zone
• 5 分钟上手：https://docs.taro.zone/docs/guide
• awesome-taro：https://github.com/NervJS/awesome-taro
• taro-ui：https://github.com/NervJS/taro-ui