138 lines
3.7 KiB
Markdown
138 lines
3.7 KiB
Markdown
# 丰链管理系统 (Font ERP)
|
||
|
||
基于 Vue 3 + Vite 构建的现代化企业资源管理系统
|
||
|
||
## 技术栈详情
|
||
|
||
### 核心框架
|
||
- [Vue 3.x.x - 渐进式 JavaScript 框架](https://cn.vuejs.org/)
|
||
- [Vite 6.x.x - 下一代前端构建工具](https://cn.vitejs.dev/)
|
||
- JavaScript - 主要开发语言
|
||
### UI 框架和组件
|
||
- [ **Naive UI - 项目统一使用的 UI 组件库**](https://www.naiveui.com/zh-CN/os-theme)
|
||
- Element Plus - ***历史遗留 UI 组件库 需逐渐剔除***
|
||
- Ant Design Vue 3.2.9 - ***历史遗留 UI 组件库 需逐渐剔除***
|
||
- [vue3-print-nb - 打印功能](https://github.com/Power-kxLee/vue3-print-nb?tab=readme-ov-file#vue3-print-nb)
|
||
- [@vue-office - Office 文档预览](https://501351981.github.io/vue-office/examples/docs/)
|
||
- @kangc/v-md-editor - Markdown 编辑器
|
||
- [wangeditor 4.7.15 - 富文本编辑器](https://www.wangeditor.com/)
|
||
|
||
### 路由和请求
|
||
- [Vue Router 4 - 官方路由管理](https://router.vuejs.org/zh/)
|
||
- [Axios - HTTP 请求库](https://axios-http.com/)
|
||
|
||
### 工具库
|
||
- lodash-es - 工具函数库
|
||
- Day.js - 时间处理库
|
||
- BigNumber.js - 大数处理
|
||
- html2canvas - 页面截图
|
||
- jspdf - PDF 生成
|
||
- spark-md5 - MD5 计算
|
||
- clipboard - 剪贴板操作
|
||
|
||
### 样式和图标
|
||
- TailwindCSS - 原子化 CSS 框架
|
||
- Sass - CSS 预处理器
|
||
- @ant-design/icons-vue - Ant Design 图标
|
||
- @element-plus/icons-vue - Element Plus 图标
|
||
- @vicons/* - 多种图标集合
|
||
|
||
|
||
### 地图服务
|
||
- vue-baidu-map-3x - 百度地图 Vue 3 组件
|
||
|
||
### 开发工具
|
||
- unplugin-auto-import - 自动导入
|
||
- unplugin-vue-components - 组件自动导入
|
||
- vite-plugin-svg-icons - SVG 图标处理
|
||
- vite-plugin-compression - 构建压缩
|
||
- prettier - 代码格式化
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
├── api/ # API 接口规范和文档(历史遗留 接口定义请写在api-norm)
|
||
├── api-norm/ # API 接口规范和文档
|
||
├── assets/ # 静态资源（图片、字体等）
|
||
│ ├── css/ # 全局样式
|
||
│ └── images/ # 图片资源
|
||
├── components/ # 全局公共组件
|
||
├── config/ # 全局配置文件
|
||
├── hooks/ # Vue Composition API 钩子函数
|
||
├── icons/ # 图标资源和 iconfont
|
||
├── router/ # 路由配置和路由守卫
|
||
├── service/ # 业务服务层
|
||
├── store/ # Pinia 状态管理
|
||
├── styles/ # 样式文件
|
||
│ ├── index.css # 主样式入口
|
||
│ └── variables/ # 样式变量
|
||
├── types/ # 类型定义文件
|
||
├── utils/ # 工具函数
|
||
│ ├── directive/ # 自定义指令
|
||
│ ├── storage/ # 存储相关
|
||
│ └── request/ # 请求封装
|
||
├── views/ # 页面视图组件
|
||
├── vuex # 历史遗留 需逐渐剔除
|
||
├── App.vue # 根组件
|
||
└── main.js # 应用入口文件
|
||
```
|
||
|
||
## 环境要求
|
||
|
||
- Node.js >= 20
|
||
- pnpm 7.x 包管理器
|
||
- 现代浏览器（支持 ES6+）
|
||
|
||
## 开发环境设置
|
||
|
||
1. 安装依赖
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
2. 启动开发服务器
|
||
```bash
|
||
# 开发环境 (.env.dev)
|
||
pnpm dev
|
||
|
||
# 生产环境 (.env.prod)
|
||
pnpm prod
|
||
|
||
# 主要环境 (.env.main)
|
||
pnpm main
|
||
```
|
||
|
||
3. 构建项目
|
||
```bash
|
||
# 测试环境构建
|
||
pnpm build-test
|
||
|
||
# 主要环境构建
|
||
pnpm build-main
|
||
|
||
# 生产环境构建
|
||
pnpm build-prod
|
||
```
|
||
|
||
|
||
## 环境变量配置
|
||
|
||
项目支持多环境配置：
|
||
- `.env.dev` - 开发环境配置
|
||
- API 地址
|
||
- 调试工具
|
||
- 日志级别
|
||
- `.env.test` - 测试环境配置
|
||
- 测试服务器地址
|
||
- 测试账号配置
|
||
- `.env.prod` - 体制内生产环境配置
|
||
- 生产 API 地址
|
||
- 错误监控
|
||
- 性能优化
|
||
- `.env.main` - 体制外生产环境配置
|
||
- 特定功能开关
|
||
- 自定义配置
|
||
|
||
|