143 lines
4.4 KiB
Markdown
143 lines
4.4 KiB
Markdown
|
# 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)
|
||
|
|
```
|
||
|
|
|
||
|
|
## 快速开始
|
||
|
|
|
||
|
|
### 安装依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
# 或
|
||
|
|
pnpm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### 开发
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev # 启动开发服务器
|
||
|
|
```
|
||
|
|
|
||
|
|
### 构建
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build:dev # 开发环境构建
|
||
|
|
npm run build:test # 测试环境构建
|
||
|
|
npm run build:prod # 生产环境构建
|
||
|
|
```
|
||
|
|
|
||
|
|
### 预览构建产物
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run preview
|
||
|
|
```
|
||
|
|
|
||
|
|
### 本地调试(基于 express)
|
||
|
|
|
||
|
|
先构建产物,再用 express 托管:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build:dev && npm run local
|
||
|
|
```
|
||
|
|
|
||
|
|
### 代码检查与格式化
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run lint # ESLint 检查
|
||
|
|
npm run lint:fix # ESLint 自动修复
|
||
|
|
npm run format # Prettier 格式化
|
||
|
|
npm run type-check # TypeScript 类型检查
|
||
|
|
```
|
||
|
|
|
||
|
|
## Git 提交规范
|
||
|
|
|
||
|
|
本项目使用 [Conventional Commits](https://www.conventionalcommits.org/) 规范,由 commitlint 强制校验。
|
||
|
|
|
||
|
|
提交格式:
|
||
|
|
|
||
|
|
```
|
||
|
|
<type>(<scope>): <subject>
|
||
|
|
```
|
||
|
|
|
||
|
|
常用 type:
|
||
|
|
|
||
|
|
| type | 说明 |
|
||
|
|
| -------- | -------------------- |
|
||
|
|
| feat | 新功能 |
|
||
|
|
| fix | 修复 Bug |
|
||
|
|
| docs | 文档变更 |
|
||
|
|
| style | 代码格式(不影响功能) |
|
||
|
|
| refactor | 重构 |
|
||
|
|
| perf | 性能优化 |
|
||
|
|
| test | 测试 |
|
||
|
|
| build | 构建系统/依赖变更 |
|
||
|
|
| ci | CI 配置 |
|
||
|
|
| chore | 杂项 |
|
||
|
|
| revert | 回滚 |
|
||
|
|
|
||
|
|
示例:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
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 | 接口路径前缀 |
|