mc-front-cli

一个用于快速创建前端项目的 CLI 工具，提供 CRM 模板和 MP 后台模板。

简介

mc-front-cli 是一个前端项目脚手架工具，帮助开发者快速初始化基于 Vue 3 + TypeScript 的前端项目。它提供了两种预设模板：

• CRM 模板: 适用于客户关系管理系统开发
• MP 后台模板: 适用于 mp 后台管理系统开发

特性

• 🚀 快速初始化: 一键创建项目，自动配置开发环境
• 📦 预配置模板: 包含完整的项目结构和最佳实践
• 🛠️ 现代化技术栈: Vue 3 + TypeScript + Vite
• 🎨 UI 框架集成: 默认集成 Element Plus
• 🔄 状态管理: 预配置 Pinia 状态管理
• 🛣️ 路由管理: 完整的路由配置和导航守卫
• 📝 代码规范: 集成 ESLint + Prettier + Commitlint
• 🎭 Mock 数据: 开发环境内置 Mock 服务
• 🤖 AI 规则: 包含团队开发规范和最佳实践

安装

全局安装

npm install -g mc-front-cli
# 或
yarn global add mc-front-cli
# 或
pnpm add -g mc-front-cli

使用 npx (推荐)

npx mc-front-cli
# 或
npm create mc@latest

使用方法

交互式创建项目

mc-front-cli
# 或
create-mc
# 或
pmc

按照提示输入项目名称并选择模板类型即可。

命令行参数

mc-front-cli [project-name] [options]

选项:
  -t, --template <type>   选择模板类型 (crm|mp)
  -i, --immediate         创建后立即安装依赖并启动
  -h, --help             显示帮助信息

示例

# 创建名为 my-project 的项目
mc-front-cli my-project

# 使用 CRM 模板创建项目
mc-front-cli my-crm-project --template crm

# 创建并立即启动
mc-front-cli my-project --immediate

模板详情

CRM 模板

适用于客户关系管理系统，包含：

• 完整的用户管理界面
• 数据表格和表单组件
• 权限管理系统
• 仪表板和分析图表

MP 后台模板

适用于小程序后台管理，包含：

• 小程序数据管理
• 用户行为分析
• 内容管理系统
• 配置管理界面

技术栈

• 前端框架: Vue 3.3+
• 编程语言: TypeScript
• 构建工具: Vite
• UI 框架: Element Plus
• 状态管理: Pinia
• 路由管理: Vue Router
• 代码规范: ESLint + Prettier
• Git 规范: Commitlint + Husky
• HTTP 客户端: Axios
• Mock 服务: 内置 Mock 配置

项目结构

创建的项目将包含以下目录结构：

my-project/
├── public/                 # 静态资源
├── src/
│   ├── apis/              # API 接口定义
│   ├── assets/            # 资源文件
│   ├── components/        # 公共组件
│   ├── composables/       # 组合式函数
│   ├── layouts/           # 布局组件
│   ├── router/            # 路由配置
│   ├── stores/            # Pinia 状态管理
│   ├── types/             # TypeScript 类型定义
│   ├── utils/             # 工具函数
│   └── views/             # 页面组件
├── .prettierrc            # Prettier 配置
├── eslint.config.ts       # ESLint 配置
├── tsconfig.json          # TypeScript 配置
├── vite.config.ts         # Vite 配置
└── package.json           # 项目依赖

开发规范

Prettier 配置

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

ESLint 规则

• 启用 TypeScript 严格模式
• Vue 3 推荐规则
• 自定义规则优化开发体验

Git 提交规范

遵循 Conventional Commits 规范，使用 Commitlint 进行校验。

开发指南

本地开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

添加 API 接口

在 src/apis/ 目录下创建对应的接口文件，参考现有示例。

添加页面路由

在 src/router/routes/modules/ 目录下创建路由模块文件。

使用 Mock 数据

开发环境下，Mock 服务会自动启动。在 mock/ 目录下添加 Mock 数据配置。

配置说明

AI Rules 配置

项目包含以下开发规范配置：

• 团队规范
• CSS 规范
• HTML 规范
• JavaScript 规范
• React/Vue 开发规范

环境变量

支持通过 .env 文件配置环境变量：

• .env.development - 开发环境
• .env.production - 生产环境

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

开发 CLI 本身

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

# 安装依赖
pnpm install

# 构建 CLI
pnpm build

# 测试 CLI
node index.js

许可证

MIT License

作者

phil

更新日志

v1.0.1

• 优化模板结构
• 添加 AI 规则配置
• 改进 CLI 交互体验

v1.0.0

• 初始版本发布
• 支持 CRM 和 MP 模板
• 集成现代化开发工具链