README.md



Apple经销商ERP系统 - 前端项目


项目简介

这是Apple经销商ERP系统的前端项目，基于Vue 3 + TypeScript + Element Plus开发，采用RuoYi风格的设计。


技术栈


框架: Vue 3.3+

构建工具: Vite 4.0+

UI组件: Element Plus 2.3+

状态管理: Pinia 2.1+

路由: Vue Router 4.2+

HTTP客户端: Axios 1.4+

语言: TypeScript 5.0+

样式: SCSS

代码规范: ESLint + Prettier


项目结构

frontend/
├── src/
│   ├── api/                    # API接口
│   ├── assets/                # 静态资源
│   ├── components/            # 公共组件
│   ├── layouts/               # 布局页面
│   ├── router/                # 路由配置
│   ├── stores/                # 状态管理
│   ├── utils/                 # 工具函数
│   ├── views/                 # 页面组件
│   ├── types/                 # 类型定义
│   ├── App.vue                # 根组件
│   └── main.ts                # 入口文件
├── public/                    # 公共资源
└── 配置文件


快速开始


1. 安装依赖

cd frontend
npm install


2. 启动开发服务器

npm run dev


3. 构建生产版本

npm run build


功能特性


已实现功能


✅ 用户认证和权限管理
✅ RuoYi风格的布局设计
✅ 响应式侧边栏导航
✅ 面包屑导航
✅ 用户信息显示
✅ 权限控制组件
✅ 登录页面
✅ 首页仪表板
✅ 用户管理页面（示例）
✅ 错误页面（404）


待实现功能


⏳ 角色管理
⏳ 菜单管理
⏳ 字典管理
⏳ 日志管理
⏳ 系统设置


设计风格


RuoYi风格特点


扁平化设计: 简洁现代的界面风格

左侧导航: 经典的侧边栏导航布局

蓝色主题: 统一的蓝色配色方案

卡片式内容: 内容区域使用卡片布局

Element Plus组件: 基于Element Plus组件库

权限控制: 菜单和按钮级别的权限控制


开发规范


代码规范


使用TypeScript进行类型检查
遵循Vue 3 Composition API规范
组件命名使用PascalCase
文件名使用kebab-case
变量和函数名使用camelCase


组件规范


组件职责单一
合理使用Props和Emits
使用Composables提取逻辑
组件文档完整


样式规范


使用SCSS预处理器
遵循BEM命名规范
使用CSS变量管理主题
响应式设计优先


环境配置


开发环境

VITE_API_BASE_URL=http://localhost:8083
VITE_APP_TITLE=Apple经销商ERP系统
VITE_APP_VERSION=1.0.0


生产环境

VITE_API_BASE_URL=https://api.apple-erp.com
VITE_APP_TITLE=Apple经销商ERP系统
VITE_APP_VERSION=1.0.0


浏览器兼容性


Chrome 88+
Firefox 85+
Safari 14+
Edge 88+


许可证

MIT License