管理系统 (Font ERP)

基于 Vue 3 + Vite 构建的现代化企业资源管理系统

技术栈详情

核心框架

• Vue 3.x.x - 渐进式 JavaScript 框架
• Vite 6.x.x - 下一代前端构建工具
• JavaScript - 主要开发语言

UI 框架和组件

• Naive UI - 项目统一使用的 UI 组件库
• Element Plus - 历史遗留 UI 组件库 需逐渐剔除
• Ant Design Vue 3.2.9 - 历史遗留 UI 组件库 需逐渐剔除
• vue3-print-nb - 打印功能
• @vue-office - Office 文档预览
• @kangc/v-md-editor - Markdown 编辑器
• wangeditor 4.7.15 - 富文本编辑器

路由和请求

• Vue Router 4 - 官方路由管理
• Axios - HTTP 请求库

工具库

• 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. 安装依赖

pnpm install

2. 启动开发服务器

# 开发环境 (.env.dev)
pnpm dev

# 生产环境 (.env.prod)
pnpm prod

# 主要环境 (.env.main)
pnpm main

3. 构建项目

# 测试环境构建
pnpm build-test

# 主要环境构建
pnpm build-main

# 生产环境构建
pnpm build-prod

环境变量配置

项目支持多环境配置：

• .env.dev - 开发环境配置
  • API 地址
  • 调试工具
  • 日志级别
• .env.test - 测试环境配置
  • 测试服务器地址
  • 测试账号配置
• .env.prod - 体制内生产环境配置
  • 生产 API 地址
  • 错误监控
  • 性能优化
• .env.main - 体制外生产环境配置
  • 特定功能开关
  • 自定义配置