You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
# RuoYi-Vue 前端（Vue3 版本）
|
|
|
|
|
|
|
|
|
|
|
|
基于 Vue3 + Vite + TypeScript + Element Plus 的现代化前端架构。
|
|
|
|
|
|
|
|
|
|
|
|
## 技术栈
|
|
|
|
|
|
|
|
|
|
|
|
- Vue 3.5+
|
|
|
|
|
|
- Vite 8+
|
|
|
|
|
|
- TypeScript 6+
|
|
|
|
|
|
- Element Plus 2.14+
|
|
|
|
|
|
- Pinia 3+
|
|
|
|
|
|
- Vue Router 4+
|
|
|
|
|
|
- ECharts 6+
|
|
|
|
|
|
- Axios 1.18+
|
|
|
|
|
|
|
|
|
|
|
|
## 开发
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm install
|
|
|
|
|
|
npm run dev
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
访问 http://localhost:5173
|
|
|
|
|
|
|
|
|
|
|
|
## 构建
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
npm run build
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
构建输出位于 `dist/` 目录。
|
|
|
|
|
|
|
|
|
|
|
|
## 特性
|
|
|
|
|
|
|
|
|
|
|
|
- Vue3 Composition API
|
|
|
|
|
|
- TypeScript 严格模式
|
|
|
|
|
|
- 深色主题（GitHub Dark 风格）
|
|
|
|
|
|
- 数据可视化（ECharts）
|
|
|
|
|
|
- 权限控制（指令 + 路由守卫）
|
|
|
|
|
|
- 响应式布局
|
|
|
|
|
|
- 动态路由加载
|
|
|
|
|
|
- 标签页导航
|
|
|
|
|
|
- 代码分割优化
|
|
|
|
|
|
|
|
|
|
|
|
## 项目结构
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
src/
|
|
|
|
|
|
├── api/ # API 接口
|
|
|
|
|
|
├── assets/ # 静态资源
|
|
|
|
|
|
├── components/ # 公共组件
|
|
|
|
|
|
│ ├── business/ # 业务组件
|
|
|
|
|
|
│ ├── layout/ # 布局组件
|
|
|
|
|
|
│ └── ui/ # UI 组件
|
|
|
|
|
|
├── composables/ # 组合式函数
|
|
|
|
|
|
├── directives/ # 自定义指令
|
|
|
|
|
|
├── layout/ # 主布局
|
|
|
|
|
|
├── router/ # 路由配置
|
|
|
|
|
|
├── stores/ # Pinia 状态管理
|
|
|
|
|
|
├── styles/ # 全局样式
|
|
|
|
|
|
├── types/ # TypeScript 类型定义
|
|
|
|
|
|
├── utils/ # 工具函数
|
|
|
|
|
|
└── views/ # 页面组件
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 构建优化
|
|
|
|
|
|
|
|
|
|
|
|
- Vendor chunk 分离（vue-vendor, element-plus, echarts）
|
|
|
|
|
|
- 路由懒加载
|
|
|
|
|
|
- 组件按需加载（AutoImport + Components）
|
|
|
|
|
|
- CSS 预处理器全局变量注入
|
