万桩脚手架工具

万桩UI脚手架工具提供了丰富的功能，帮助开发者快速创建和管理项目。

安装

# 使用 pnpm 安装
pnpm add -g @wzcli/cli

# 使用 npm 安装
npm install -g @wzcli/cli

命令

创建项目

# 创建项目
wz create <project-name>

# 选项
# --force, -f: 强制覆盖已存在的目录

创建项目时会：

1. 检查目标目录是否存在
2. 如果目录存在，会提示是否覆盖
3. 显示交互式菜单选择项目模板（React/Vue）
4. 复制模板文件到目标目录
5. 更新 package.json
6. 安装项目依赖

生成组件

# 生成组件
wz component <component-name>

# 选项
# --type, -t: 指定组件类型 (react/vue)

生成组件时会：

1. 根据指定的组件类型选择模板
2. 生成组件相关的文件
3. 更新组件索引文件

生成 API

# 生成 API
wz api <swagger-url>

# 选项
# --output, -o: 指定输出目录

生成 API 时会：

1. 从 Swagger 文档获取 API 定义
2. 生成 TypeScript 类型定义
3. 生成 API 请求函数
4. 保存到指定目录

更新依赖

# 更新项目依赖
wz update

更新依赖时会：

1. 执行 pnpm update 命令
2. 更新所有依赖到最新版本

项目模板

React 项目模板

my-project/
├── src/
│   ├── components/    # 组件目录
│   ├── pages/        # 页面目录
│   ├── utils/        # 工具函数
│   └── api/          # API 接口
├── docs/             # 文档目录
├── .eslintrc.js      # ESLint 配置
├── .prettierrc       # Prettier 配置
├── tsconfig.json     # TypeScript 配置
├── vite.config.ts    # Vite 配置
└── package.json      # 项目配置

Vue 项目模板

my-project/
├── src/
│   ├── components/    # 组件目录
│   ├── pages/        # 页面目录
│   ├── utils/        # 工具函数
│   └── api/          # API 接口
├── docs/             # 文档目录
├── .eslintrc.js      # ESLint 配置
├── .prettierrc       # Prettier 配置
├── tsconfig.json     # TypeScript 配置
├── vite.config.ts    # Vite 配置
└── package.json      # 项目配置

开发流程

1. 创建项目

# 创建项目
wz create my-project

# 选择项目模板
? 请选择项目模板: (Use arrow keys)
❯ React
  Vue

# 进入项目目录
cd my-project

# 安装依赖
pnpm install

2. 开发组件

# 生成组件
wz component Button

# 选择组件类型
? 请选择组件类型: (Use arrow keys)
❯ React
  Vue

# 启动开发服务器
pnpm dev

3. 生成 API

# 生成 API
wz api https://api.example.com/swagger.json

# 指定输出目录
? 请输入输出目录 (src/api)

4. 构建项目

# 构建项目
pnpm build

常见问题

1. 如何更新脚手架工具？

# 使用 pnpm 更新
pnpm update -g @wzcli/cli

# 使用 npm 更新
npm update -g @wzcli/cli

2. 如何贡献代码？

1. Fork 本仓库
2. 创建特性分支
3. 提交更改
4. 创建 Pull Request

错误处理

如果遇到错误，脚手架会：

1. 显示错误信息
2. 提供错误原因
3. 给出解决建议

常见的错误包括：

• 网络连接问题
• 权限问题
• 模板文件缺失
• 依赖安装失败