@me-framework/create-me-antdv-next

create-me-antdv-next

基于 Vue 3 + TypeScript + Vite + Pinia + Vue Router + Axios + antdv-next 的项目脚手架（CLI）。

使用 npm create 一键生成一个可直接开发、构建的 Vue 应用项目。

特性

• 开箱即用：生成即含完整工程化配置，可直接开发、构建、发布
• 样式与规范：SCSS 全局样式 + ESLint + Prettier，风格统一
• 请求封装：内置 Axios 封装（src/utils/request.ts），含拦截器、token、统一错误提示
• 状态管理：Pinia + persistedstate，刷新数据不丢失
• 路由与代理：Hash 路由 + 标题守卫，开发环境 /api 自动代理到后端

快速开始

# 根目录/当前目录生成（用当前目录名作为项目名，目录需为空）
npx @me-framework/create-me-antdv-next .

# 自建目录：交互式输入项目名，或直接指定名称
npx @me-framework/create-me-antdv-next
npx @me-framework/create-me-antdv-next my-app

# 进入项目、安装依赖、启动开发
cd my-app
npm install
npm run dev

亦可使用 npm create 语法：npm create @me-framework/me-antdv-next@latest my-app

生成的项目包含完整源码和配置，可直接 npm run build 输出生产包。

生成的应用内的常用命令：

npm run dev       # 启动开发服务（默认端口 3000）
npm run build     # 类型检查 + 构建生产包
npm run preview   # 预览生产构建
npm run lint      # ESLint 检查并修复

开发服务 /api 前缀请求会代理到 env/ 中配置的 VITE_API_BASE_URL。

生成的应用技术栈

• 框架: Vue 3.5 + TypeScript
• 构建: Vite 8
• UI 库: antdv-next 1.5（全量引入，按需可自行改为按需加载）
• 图标: @antdv-next/icons
• 路由: vue-router 5（Hash 模式）
• 状态管理: Pinia 4（含 persistedstate 持久化）
• 请求: Axios（封装见 src/utils/request.ts，含拦截器与错误提示）
• 样式: SCSS
• 代码规范: ESLint + Prettier

脚手架源码目录结构

├── index.mjs            # CLI 入口
├── template/            # 应用模板（生成项目时复制过去）
│   ├── env/             # 环境变量配置
│   ├── src/             # 应用源码
│   │   ├── api/         # 接口封装
│   │   ├── router/      # 路由配置
│   │   ├── store/       # 状态管理 (Pinia)
│   │   ├── styles/      # 全局样式
│   │   ├── utils/       # 工具（含 axios 封装 request.ts）
│   │   ├── views/       # 页面视图
│   │   └── main.ts      # 入口文件
│   ├── index.html
│   ├── vite.config.ts
│   └── ...
├── scripts/
│   ├── publish.js       # 发布脚本（更新版本号 + 发布 + 打 tag）
│   └── quick-publish.js # 快速发布（仅更新版本号 + 发布）
└── package.json         # 脚手架（CLI）包配置

开发与发布

本仓库是脚手架本体的代码。克隆后：

# 本地调试 CLI（生成到指定目录）
node index.mjs my-app

# 发布新版本
node scripts/quick-publish.js patch   # 更新版本号并发布
node scripts/publish.js patch         # 更新版本号 + 发布 + 打 tag 并推送