CPMS 运营平台 (cpms_web_admin_pc)

基于 Vue 3 + Vite 5 + TypeScript + Ant Design Vue 4 搭建的中后台管理项目骨架,采用 TSX 写法(不使用 .vue 单文件组件)。

技术栈

技术	版本	说明
Vue	^3.3.0	渐进式前端框架
Vite	^5.0.0	下一代构建工具
TypeScript	^5.3.0	类型系统
Vue Router	^4.2.0	官方路由
Ant Design Vue	^4.0.0	UI 组件库
Less	^4.6.4	CSS 预处理器
@vitejs/plugin-vue-jsx	^4.0.0	TSX/JSX 编译插件
CSS Modules	-	组件级样式隔离(*.module.less)
ESLint + Prettier	-	代码规范与格式化
Husky + Commitlint	-	Git 提交规范

目录结构

cpms_operation_platform/
├── public/                 # 静态资源(不参与编译)
│   └── favicon.svg
├── src/
│   ├── api/                # 接口请求层
│   ├── assets/             # 静态资源(参与编译)
│   │   └── styles/         # 全局样式
│   ├── components/         # 公共组件 (.tsx)
│   ├── layouts/            # 布局组件 (.tsx + .module.less)
│   ├── router/             # 路由配置
│   ├── types/              # 全局类型定义
│   ├── utils/              # 工具函数
│   ├── views/              # 页面视图 (.tsx + .module.less)
│   ├── App.tsx             # 根组件
│   ├── main.ts            # 应用入口
│   └── env.d.ts           # 环境变量类型声明
├── .env                    # 公共环境变量
├── .env.development        # 开发环境
├── .env.test               # 测试环境
├── .env.production         # 生产环境
├── .eslintrc.cjs           # ESLint 配置
├── .prettierrc             # Prettier 配置
├── commitlint.config.js    # 提交规范配置
├── index.html              # HTML 模板
├── package.json
├── tsconfig.json           # TypeScript 配置
├── vite.config.ts          # Vite 配置
└── start-debug.js          # 本地调试服务(express)

快速开始

安装依赖

npm install
# 或
pnpm install

开发

npm run dev      # 启动开发服务器

构建

npm run build:dev   # 开发环境构建
npm run build:test  # 测试环境构建
npm run build:prod  # 生产环境构建

预览构建产物

npm run preview

本地调试(基于 express)

先构建产物,再用 express 托管:

npm run build:dev && npm run local

代码检查与格式化

npm run lint        # ESLint 检查
npm run lint:fix    # ESLint 自动修复
npm run format      # Prettier 格式化
npm run type-check  # TypeScript 类型检查

Git 提交规范

本项目使用 Conventional Commits 规范,由 commitlint 强制校验。

提交格式:

<type>(<scope>): <subject>

常用 type:

type	说明
feat	新功能
fix	修复 Bug
docs	文档变更
style	代码格式(不影响功能)
refactor	重构
perf	性能优化
test	测试
build	构建系统/依赖变更
ci	CI 配置
chore	杂项
revert	回滚

示例:

git commit -m "feat(dashboard): 新增工作台数据统计卡片"

环境变量

通过 .env 系列文件管理环境配置,Vite 中以 VITE_ 开头的变量会暴露到 import.meta.env。

变量	说明
VITE_APP_TITLE	应用标题
VITE_BASE_URL	部署基础路径
VITE_PORT	开发服务器端口
VITE_API_BASE_URL	接口基础地址
VITE_API_PREFIX	接口路径前缀