# 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 预处理器全局变量注入