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.
|
|
2 weeks ago | |
|---|---|---|
| .. | ||
| .vscode | 3 weeks ago | |
| public | 3 weeks ago | |
| src | 2 weeks ago | |
| .env.development | 3 weeks ago | |
| .env.production | 3 weeks ago | |
| .eslintrc.cjs | 3 weeks ago | |
| .gitignore | 3 weeks ago | |
| .prettierrc | 3 weeks ago | |
| README.md | 3 weeks ago | |
| index.html | 3 weeks ago | |
| package-lock.json | 3 weeks ago | |
| package.json | 3 weeks ago | |
| tsconfig.app.json | 3 weeks ago | |
| tsconfig.json | 3 weeks ago | |
| tsconfig.node.json | 3 weeks ago | |
| vite.config.ts | 3 weeks ago | |
README.md
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+
开发
npm install
npm run dev
构建
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 预处理器全局变量注入