cloudshop-cli

一个用于快速创建云店项目和模块的脚手架工具。

📦 安装

npm install -g cloudshop-cli

🚀 快速开始

创建项目

cloudshop-cli create

运行命令后，会出现交互式选项：

1. 选择模板类型

   • 后台管理项目 (admin)
   • H5项目 (h5)
   • 模块模板 (module)

2. 根据选择的模板类型，填写相应信息

📋 模板说明

1. 后台管理项目 (admin)

基于 React + TypeScript + Ant Design + Vite 的后台管理系统模板。

技术栈：

• React 18.3.1
• TypeScript 5.5.3
• Ant Design 5.19.1
• React Router 6.24.1
• Vite 5.3.1

项目结构：

project-name/
├── src/
│   ├── main.tsx          # 应用入口
│   ├── App.tsx           # 根组件
│   ├── routes/           # 路由配置
│   │   └── index.tsx
│   └── pages/            # 页面组件
│       └── home.tsx
├── index.html
├── vite.config.js
├── tsconfig.json
├── tsconfig.node.json
└── package.json

启动命令：

cd project-name
npm install
npm run dev      # 开发环境 (端口: 8080)
npm run build    # 生产构建
npm run preview  # 预览构建结果

2. H5项目 (h5)

基于 React + TypeScript + Vant + Vite 的移动端H5项目模板。

技术栈：

• React 18.3.1
• TypeScript 5.5.3
• React Vant 3.3.1
• React Router 6.24.1
• Vite 5.3.1

项目结构：

project-name/
├── src/
│   ├── main.tsx          # 应用入口
│   ├── app.tsx           # 根组件
│   ├── routes/           # 路由配置
│   │   └── index.ts
│   └── pages/            # 页面组件
│       └── home.tsx
├── index.html
├── vite.config.js
├── tsconfig.json
├── tsconfig.node.json
└── package.json

启动命令：

cd project-name
npm install
npm run dev      # 开发环境 (端口: 3000)
npm run build    # 生产构建
npm run preview  # 预览构建结果

3. 模块模板 (module)

快速生成后台管理系统的功能模块，包含列表、表单、详情页面。

可选模块：

• 列表页 (List.tsx) - 包含搜索、分页、增删改查功能
• 新增/编辑页 (Form.tsx) - 表单页面
• 详情页 (Detail.tsx) - 详情展示页面

生成的文件：

module-name/
├── List.tsx      # 列表页（如果选择）
├── Form.tsx      # 表单页（如果选择）
└── Detail.tsx    # 详情页（如果选择）

使用示例：

cloudshop-cli create
# 选择 "模块模板"
# 输入模块名称: UserManagement
# 选择需要的模块: [列表, 新增, 详情]

🛠️ 功能特性

• ✅ 交互式命令行界面
• ✅ 多种项目模板选择
• ✅ TypeScript 支持
• ✅ 现代化技术栈
• ✅ 开箱即用的配置
• ✅ 路径别名 (@) 配置
• ✅ 中文国际化支持

📝 开发说明

本地开发

# 克隆项目
git clone <repository-url>

# 安装依赖
cd cloudshop-cli
npm install

# 本地测试
npm link

# 运行命令
cloudshop-cli create

项目结构

cloudshop-cli/
├── bin/
│   └── cli.js                    # CLI 入口文件
├── templates/
│   ├── admin.js                  # 后台项目生成器
│   ├── h5.js                     # H5项目生成器
│   ├── module.js                 # 模块生成器
│   ├── package.json.ejs          # package.json 模板
│   ├── admin-templates/          # 后台项目模板文件
│   │   ├── app.ejs
│   │   ├── html.ejs
│   │   ├── main.ejs
│   │   ├── routes.ejs
│   │   ├── tsconfig.ejs
│   │   └── vite.ejs
│   ├── h5-templates/             # H5项目模板文件
│   │   ├── app.ejs
│   │   ├── html.ejs
│   │   ├── main.ejs
│   │   ├── routes.ejs
│   │   ├── tsconfig.ejs
│   │   └── vite.ejs
│   └── module-templates/         # 模块模板文件
│       ├── page-list.template.ejs
│       ├── page-form.template.ejs
│       └── page-detail.template.ejs
├── package.json
├── .npmignore
└── README.md

📦 依赖说明

核心依赖

| 依赖包 | 版本 | 用途 | |--------|------|------| | commander | ^14.0.3 | 命令行参数解析 | | inquirer | ^13.3.0 | 交互式命令行界面 | | ejs | ^4.0.1 | 模板引擎 | | chalk | ^5.6.2 | 终端文字着色 | | ora | ^9.3.0 | 终端加载动画 | | fs-extra | ^11.3.3 | 文件系统增强操作 | | execa | ^9.6.1 | 执行外部命令 |

🔧 配置说明

Vite 配置特性

• 路径别名：@ 指向 src 目录
• 开发服务器自动打开浏览器
• 生产构建关闭 sourcemap

TypeScript 配置

• 严格模式开启
• ESNext 模块系统
• JSX 支持 (React)

📄 License

MIT

👤 作者

yunlong.jiang

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 反馈

如有问题或建议，请提交 Issue。