@rainbow-fe/rainbow-cli

Rainbow 脚手架命令行工具 —— 快速创建 PC / PDA 端 Vue3 + TypeScript 项目。

本文档面向后端开发同学，帮助你从零搭建前端开发环境，并使用 Rainbow CLI 快速创建前端项目。

一、环境准备

1. 安装 Node.js（v16.20.2）

项目基于 Node.js v16.20.2，推荐使用 nvm 管理 Node 版本。

macOS / Linux：

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 重新打开终端后，安装指定版本
nvm install 16.20.2
nvm use 16.20.2
nvm alias default 16.20.2   # 设为默认版本

# 验证
node -v   # 应输出 v16.20.2

Windows：

推荐使用 nvm-windows 管理 Node 版本：

1. 前往 nvm-windows releases 下载最新的 nvm-setup.exe 并安装
2. 以管理员身份打开命令提示符（CMD）或 PowerShell，执行：

nvm install 16.20.2
nvm use 16.20.2

:: 验证
node -v   :: 应输出 v16.20.2
npm -v    :: 应输出版本号

💡 如果不想用 nvm-windows，也可以直接前往 https://nodejs.org/dist/v16.20.2/ 下载 Windows Installer (.msi) 双击安装。

⚠️ Windows 用户建议使用 PowerShell 或 Git Bash 作为终端（CMD 对部分命令支持不佳）。

2. 安装 pnpm（v8.14.2）

项目使用 pnpm 作为包管理器（比 npm 更快、更节省磁盘空间）。

macOS / Linux：

npm install -g [email protected]
pnpm -v   # 应输出 8.14.2

Windows（以管理员身份运行 CMD 或 PowerShell）：

npm install -g [email protected]
pnpm -v   :: 应输出 8.14.2

⚠️ Windows 下如果遇到 pnpm : 无法加载文件 的错误，请先执行以下命令解除脚本执行限制（仅 PowerShell 需要）：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

3. 配置 npm registry（可选）

如果公司使用私有 registry，需要先配置：

npm config set registry <公司私有 registry 地址>
pnpm config set registry <公司私有 registry 地址>

二、安装 Rainbow CLI

npm install -g @rainbow-fe/rainbow-cli

安装完成后验证：

rainbow --version

三、使用方式

交互式创建（推荐）

直接运行 rainbow，按提示输入项目名称并选择终端类型：

rainbow

交互流程：

1. 输入项目名称（仅支持小写字母、数字、中划线）
2. 选择终端类型：PC 端 或 PDA 端

命令行参数创建

也可以通过命令行参数直接指定项目名称和类型，跳过交互：

# 创建 PC 端项目
rainbow my-project -t pc

# 创建 PDA 端项目
rainbow my-project -t pda

# 仅指定项目名（默认 PC 端）
rainbow my-project

参数说明

| 参数 | 说明 | 是否必填 | |------|------|----------| | [project-name] | 项目名称，仅支持小写字母、数字、中划线 | 否（省略则进入交互模式） | | -t, --type <type> | 项目类型：pc 或 pda | 否（默认 pc） | | -V, --version | 查看当前版本号 | - | | -h, --help | 查看帮助信息 | - |

四、创建完成后

CLI 会自动完成以下操作：

1. 在当前目录下创建以项目名命名的文件夹
2. 复制对应类型的模板文件
3. 替换模板中的占位符（项目名称、类型等）

创建成功后，进入项目目录手动安装依赖并启动开发服务：

cd my-project
pnpm install   # 安装项目依赖
pnpm dev       # 启动本地开发服务

⚠️ CLI 不会自动安装项目依赖，需要你手动执行 pnpm install。

五、注意事项

• 目标目录不能已存在，否则会报错。如需重新创建，请先删除同名目录。
• 若 pnpm install 失败，请检查 Node.js 版本是否正确（v16.20.2），以及 registry 配置是否正确。
• 模板包由 @rainbow-fe/rainbow-template-pc 和 @rainbow-fe/rainbow-template-pda 提供，更新模板后需重新安装 CLI 以获取最新模板：

npm install -g @rainbow-fe/rainbow-cli@latest

Windows 常见问题：

| 问题 | 解决方案 | |------|----------| | nvm 命令找不到 | 检查是否将 nvm 路径加入了系统环境变量 PATH，重启终端后重试 | | pnpm 命令无法执行 | PowerShell 中执行 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser | | rainbow 命令找不到 | 检查 npm 全局路径是否加入 PATH：运行 npm config get prefix 确认路径 | | 权限不足 / EPERM 错误 | 以管理员身份运行终端后重新执行命令 |

六、常用命令速查

| 命令 | 说明 | |------|------| | pnpm dev | 启动本地开发服务 | | pnpm build | 构建生产环境代码 | | pnpm lint | 代码检查 |

七、示例

# 创建一个名为 my-shop 的 PC 端项目
rainbow my-shop -t pc

# 创建一个名为 warehouse-app 的 PDA 端项目
rainbow warehouse-app -t pda

# 交互式创建
rainbow
# ? 请输入项目名称（小写字母、数字、中划线）: my-app
# ? 请选择终端类型: PC 端