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/ruoyi-ui-next
Lxy ef88ed0103
fix: 重构
2 weeks ago
..
.vscode feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
public feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
src fix: 重构 2 weeks ago
.env.development feat: setup core architecture (router, pinia, axios, permission) 3 weeks ago
.env.production feat: setup core architecture (router, pinia, axios, permission) 3 weeks ago
.eslintrc.cjs feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
.gitignore feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
.prettierrc feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
README.md feat(ruoyi-ui-next): complete testing and optimization 3 weeks ago
index.html feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
package-lock.json feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
package.json feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
tsconfig.app.json feat: migrate business modules to Vue3 3 weeks ago
tsconfig.json feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
tsconfig.node.json feat: initialize Vue3 + Vite + TypeScript project 3 weeks ago
vite.config.ts feat: migrate business modules to Vue3 3 weeks ago

README.md

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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

访问 http://localhost:5173

构建

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