mpro-cli

一个功能强大的 Vue3 前端开发脚手架工具，集成了现代化的开发工具和组件库。

🚀 功能特性

• 项目初始化: 快速创建 Vue3 项目结构
• 开发服务器: 基于 Vite 的热更新开发环境
• 项目构建: 生产环境打包优化
• 代码规范: ESLint 代码检查和格式化
• 测试支持: Vitest 测试框架集成
• CI/CD 配置: 支持 GitHub Actions、GitLab CI 和 Jenkins
• 代码生成: 快速生成页面和组件模板
• Less 支持: 开箱即用 Less，自动创建并在 main.js 引入 src/styles/variables.less
• 全局样式模板: 一键生成 src/global.less（内容来源 template/global.less）
• 表格组件集成: 集成 vxe-pc-ui + vxe-table，提供全局安装示例
• 路由交互式插入: page 与 vxeTable 命令在生成页面后可交互式选择是否自动新增路由

📦 安装

全局安装

npm install -g mpro-cli

使用 npx 直接运行

npx mpro-cli init my-project

🛠️ 使用方法

初始化项目

mpro init [project-name]

开发模式

cd my-project
mpro dev

构建项目

mpro build

运行测试

mpro test

代码规范检查

mpro lint

CI/CD 配置

mpro ci

创建页面

mpro page <page-name>

创建 vxe 表格页面

mpro vxeTable <page-name>

• 创建成功后同样会提示：是否新增路由？(Y/n)，根据选择自动插入或跳过。
• 在 main.js 中确保全局安装示例：

  import 'vxe-pc-ui/dist/style.css'
  import 'vxe-table/lib/style.css'
  import { VxeUIBase } from 'vxe-pc-ui'
  import { VxeUITable } from 'vxe-table'
  // 在创建 app 后：
  app.use(VxeUIBase).use(VxeUITable)

创建组件

mpro component <component-name>

生成全局样式 global.less

mpro makeCss

• 在 src 目录下创建 global.less，内容来自 template/global.less
• 如果 src/global.less 已存在将跳过并提示
• 可在 src/main.js 中按需引入：import '@/global.less'

可选：自动在 src/main.js 插入 import

mpro makeCss --import
# 或简写
mpro makeCss -i

• 会在 src/main.js 的所有 import 语句之后插入 import '@/global.less'
• 若已存在对 global.less 的引入（相对或别名路径），将自动跳过避免重复

🏗️ 技术栈

核心框架

• Vue 3: 渐进式 JavaScript 框架
• Vite: 下一代前端构建工具

路由和状态管理

• Vue Router 4: Vue.js 官方路由管理器
• Pinia: Vue.js 状态管理库

UI 组件库

• Ant Design Vue: 企业级 UI 设计语言和组件库
• VXE PC UI + VXE Table: 高性能表格与扩展 UI 能力

数据可视化

• ECharts: 强大的数据可视化库
• Vue-ECharts: ECharts 的 Vue.js 封装组件

📚 依赖库详解

CLI 工具依赖

commander (^11.0.0)

作用: Node.js 命令行接口解决方案 用途: 解析命令行参数，构建 CLI 命令结构 示例:

const { Command } = require('commander');
const program = new Command();
program.command('init').description('初始化项目');

chalk (^4.1.2)

作用: 终端字符串样式库 用途: 为终端输出添加颜色和样式，提升用户体验 示例:

console.log(chalk.blue('🚀 开始初始化项目...'));
console.log(chalk.green('✅ 项目初始化成功！'));

inquirer (^8.2.6)

作用: 交互式命令行用户界面集合 用途: 创建交互式提示，获取用户输入 示例:

const answers = await inquirer.prompt([
  {
    type: 'input',
    name: 'projectName',
    message: '请输入项目名称:',
    default: 'my-vue-project'
  }
]);

fs-extra (^11.1.1)

作用: 增强的文件系统模块 用途: 提供比原生 fs 更多的文件操作方法，如 ensureDir、remove 等 示例:

await fs.ensureDir(targetDir);
await fs.remove(targetDir);
await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });

ora (^5.4.1)

作用: 优雅的终端加载动画 用途: 显示加载动画，提升用户体验 示例:

const spinner = ora('正在创建项目目录...').start();
// 执行操作...
spinner.succeed('项目目录创建成功');

execa (^5.1.1)

作用: 进程执行引擎 用途: 执行 shell 命令，如 npm install、npm run dev 等 示例:

const { default: execa } = await import('execa');
await execa('npm', ['install'], { stdio: 'inherit' });

项目依赖

Vue 3 (^3.3.11)

作用: 渐进式 JavaScript 框架 用途: 构建用户界面的核心框架

Vue Router 4 (^4.2.5)

作用: Vue.js 官方路由管理器 用途: 实现单页应用的路由功能

Pinia (^2.1.7)

作用: Vue.js 状态管理库 用途: 管理应用状态，替代 Vuex

Ant Design Vue (^4.0.7)

作用: 企业级 UI 设计语言和组件库 用途: 提供丰富的 UI 组件，快速构建美观的界面

ECharts (^5.4.3) & Vue-ECharts (^6.6.1)

作用: 数据可视化解决方案 用途: 创建各种图表和数据可视化效果

VXE Table (^4.17.13) & VXE PC UI (^4.10.21)

作用: 高性能表格组件与配套 UI 扩展 用途: 处理复杂数据表格需求，并提供基础 UI 能力 示例:

import 'vxe-pc-ui/dist/style.css'
import 'vxe-table/lib/style.css'
import { VxeUIBase } from 'vxe-pc-ui'
import { VxeUITable } from 'vxe-table'
app.use(VxeUIBase).use(VxeUITable)

Less (^4.2.0)

作用: 样式预处理器 用途: 支持变量、嵌套等高级样式能力；脚手架自动创建 src/styles/variables.less 并在 main.js 引入

🎯 开发步骤总结

1. 项目结构设计

• 创建项目根目录结构
• 设计 bin/mpro 主入口文件
• 规划命令模块结构

2. CLI 框架搭建

• 使用 commander 构建命令行接口
• 集成 chalk 实现彩色输出
• 添加 inquirer 实现交互式提示

3. 核心功能实现

• init 命令: 项目初始化，创建项目结构和配置文件
• dev 命令: 启动 Vite 开发服务器
• build 命令: 执行项目构建
• test 命令: 运行测试套件
• lint 命令: 执行代码规范检查

4. 高级功能开发

• ci 命令: 生成 CI/CD 配置文件
• page 命令: 自动生成页面模板，并支持交互式新增路由
• vxeTable 命令: 生成表格页面模板，并支持交互式新增路由
• component 命令: 自动生成组件模板

5. 错误处理和用户体验优化

• 添加文件存在性检查
• 实现加载动画和进度提示
• 提供详细的错误信息和解决方案

6. 发布准备

• 完善 package.json 配置
• 添加必要的元数据和关键词
• 测试所有功能确保稳定性

7. 发布到 npm

• 登录 npm 账号
• 执行 npm publish 发布包

🔧 项目结构

mpro-cli/
├── bin/
│   └── mpro              # CLI 主入口文件
├── package.json          # 包配置文件
└── README.md            # 项目文档

📄 生成的项目结构

使用 mpro init 创建的项目包含：

my-project/
├── package.json          # 项目依赖配置
├── vite.config.js       # Vite 配置文件
├── index.html           # 入口 HTML 文件
├── .gitignore          # Git 忽略文件
└── src/
    ├── main.js          # 应用入口文件（自动引入 src/styles/variables.less）
    ├── App.vue          # 根组件
    ├── router/          # 路由配置
    │   └── index.js
    ├── views/           # 页面组件
    │   └── Home.vue
    ├── components/      # 公共组件
    ├── stores/          # 状态管理
    └── styles/
        └── variables.less

🚀 快速开始

1. 安装脚手架

npm install -g mpro-cli

2. 创建新项目

mpro init my-awesome-project

3. 进入项目目录

cd my-awesome-project

4. 启动开发服务器

mpro dev

5. 构建生产版本

mpro build

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

📝 更新日志

v1.0.0 (2024-01-01)

• ✨ 初始版本发布
• 🎯 支持项目初始化、开发、构建、测试等核心功能
• 🚀 集成 Ant Design Vue、ECharts、VXE Table 等组件库
• 🔧 支持 CI/CD 配置生成
• 📄 支持页面和组件模板生成

享受使用 mpro-cli 构建您的 Vue3 项目！ 🎉