Vue3 CLI Scaffold

一个功能强大的 Vue3 脚手架工具，支持多种模板，可以快速创建 Vue3 项目。

功能特性

• 🚀 三个可选模板
  • TypeScript + Vite + Vue3 + Pinia + VueRouter + Axios
  • JavaScript + Vite + Vue3 + Pinia + VueRouter + Axios
  • Monorepo (Turbo + pnpm + TypeScript + Vue3 + 共享库)
• 📦 支持 npm 发布
• ⚡️ 基于 Vite，快速启动
• 🎨 开箱即用的项目结构
• 🔧 封装了常用的工具函数和 HTTP 请求
• 📦 Monorepo 模板包含共享的 UI 组件库、工具库和类型定义

安装

npm install -g vue3-cli-scaffold

使用

创建新项目

vue3-cli my-project

或者不指定项目名称，在交互中输入：

vue3-cli

选择模板

运行命令后，会提示选择模板：

1. TypeScript + Vite + Vue3 + Pinia + VueRouter + Axios

   • 完整的 TypeScript 支持
   • 包含路由、状态管理、HTTP 请求
   • 封装了常用的工具函数

2. JavaScript + Vite + Vue3 + Pinia + VueRouter + Axios

   • JavaScript 版本
   • 包含路由、状态管理、HTTP 请求
   • 封装了常用的工具函数

3. Monorepo (Turbo + pnpm + TypeScript + Vue3 + 共享库)

   • 适合大型项目或多应用场景
   • 包含共享的 UI 组件库
   • 包含共享的工具函数库
   • 包含共享的 TypeScript 类型定义
   • 使用 Turbo 进行构建优化

项目信息

创建过程中会询问：

• 项目名称
• 项目描述
• 作者名称

启动项目

对于 TypeScript 或 JavaScript 模板：

cd my-project
npm install
npm run dev

对于 Monorepo 模板：

cd my-project
pnpm install
pnpm dev

开发

本地开发

# 克隆项目
git clone <your-repo-url>
cd vue3-cli-scaffold

# 安装依赖
npm install

# 本地测试
node bin/cli.js my-test-project

发布到 npm

1. 确保 package.json 中的 name 字段是唯一的
2. 登录 npm 账号
3. 发布

# 登录 npm
npm login

# 发布
npm publish

模板结构

TypeScript 模板

my-project/
├── src/
│   ├── main.ts
│   ├── App.vue
│   ├── style.css
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   ├── utils/
│   │   ├── request.ts       # Axios 封装
│   │   └── common.ts        # 常用工具函数
│   └── views/
│       ├── Home.vue
│       └── About.vue
├── .env.development         # 开发环境配置
├── .env.production          # 生产环境配置
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tsconfig.node.json

JavaScript 模板

my-project/
├── src/
│   ├── main.js
│   ├── App.vue
│   ├── style.css
│   ├── router/
│   │   └── index.js
│   ├── stores/
│   │   └── counter.js
│   ├── utils/
│   │   ├── request.js       # Axios 封装
│   │   └── common.js        # 常用工具函数
│   └── views/
│       ├── Home.vue
│       └── About.vue
├── .env.development         # 开发环境配置
├── .env.production          # 生产环境配置
├── index.html
├── package.json
└── vite.config.js

Monorepo 模板

my-project/
├── apps/
│   └── web/                 # Web 应用
│       ├── src/
│       │   ├── main.ts
│       │   ├── App.vue
│       │   ├── router/
│       │   └── views/
│       ├── index.html
│       ├── package.json
│       └── vite.config.ts
├── packages/
│   ├── ui/                  # UI 组件库
│   │   ├── src/
│   │   │   ├── components/
│   │   │   │   ├── Button.vue
│   │   │   │   ├── Card.vue
│   │   │   │   ├── Modal.vue
│   │   │   │   └── Input.vue
│   │   │   └── index.ts
│   │   ├── package.json
│   │   └── vite.config.ts
│   ├── utils/               # 工具函数库
│   │   ├── src/
│   │   │   ├── request.ts   # Axios 封装
│   │   │   ├── common.ts    # 常用工具函数
│   │   │   └── storage.ts   # 存储封装
│   │   ├── package.json
│   │   └── vite.config.ts
│   └── types/               # TypeScript 类型定义
│       ├── src/
│       │   ├── user.ts
│       │   ├── api.ts
│       │   └── common.ts
│       ├── package.json
│       └── tsconfig.json
├── pnpm-workspace.yaml
├── turbo.json
└── package.json

功能说明

Axios 封装

所有模板都包含完整的 Axios 封装，提供：

• 请求/响应拦截器
• 自动添加 Token
• 统一错误处理
• 网络错误处理
• 完整的 TypeScript 类型支持（TS 模板）

常用工具函数

提供以下常用工具函数：

• debounce - 防抖函数
• throttle - 节流函数
• deepClone - 深度克隆
• formatDate - 日期格式化
• formatFileSize - 文件大小格式化
• generateId - 生成唯一 ID
• isMobile - 检测移动设备
• getUrlParam / setUrlParam - URL 参数处理
• copyToClipboard - 复制到剪贴板
• downloadFile - 文件下载
• storage - 本地存储封装

Monorepo 共享库

Monorepo 模板包含三个共享包：

1. @project-name/ui - UI 组件库

   • Button 按钮
   • Card 卡片
   • Modal 模态框
   • Input 输入框

2. @project-name/utils - 工具函数库

   • HTTP 请求封装
   • 常用工具函数
   • 存储封装

3. @project-name/types - TypeScript 类型定义

   • 用户相关类型
   • API 相关类型
   • 通用类型定义

技术栈

• Node.js >= 14.0.0
• Commander - 命令行工具
• Inquirer - 交互式命令行
• Chalk - 终端颜色
• Ora - 加载动画
• Handlebars - 模板引擎

License

MIT