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