V3 Admin Vite：Star5.6k,这种项目我找很久了,轻量、易用、易上手,新手学生党练手必备项目，基于Vue3、Vite、TypeScript、El

小华同学ai
1,712 阅读4分钟

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

V3 Admin Vite 是一款免费开源的后台管理系统基础解决方案，基于 Vue3、Vite、TypeScript、Element Plus 等流行技术构建。它提供了一套简洁、高效、易于使用的后台管理界面，可以帮助开发者快速构建功能强大的后台管理系统。

核心功能

  • 用户管理: 提供登录、登出功能演示，方便开发者集成用户管理功能。
  • 权限管理: 支持页面级权限（动态路由）、按钮级权限（指令权限、权限函数）、路由守卫，满足不同权限管理需求。
  • 多环境支持: 支持开发、测试、生产环境，方便开发者进行不同环境的配置和部署。
  • 多主题切换: 内置正常、暗黑、深蓝三种主题，满足不同用户的使用习惯。
  • 多布局模式: 支持左侧菜单、顶部菜单、混合布局三种模式，方便开发者根据需求进行选择。
  • 首页定制: 提供不同用户的首页仪表盘，方便开发者进行个性化定制。
  • 错误页面: 内置 403、404 错误页面，提升用户体验。
  • 移动端兼容: 布局兼容移动端屏幕分辨率，方便用户在移动设备上进行操作。
  • 其他功能: SVG 雪碧图、动态侧边栏、动态面包屑、标签导航、内容缩放和全屏、可复用函数等。

技术栈

  • Vue3: 使用最新的 Vue3 Composition API，提供更灵活、高效的代码编写方式。
  • Element Plus: 基于 Vue3 的 Element UI 版本，提供丰富的组件库，方便开发者快速构建界面。
  • Pinia: 下一代 Vuex，提供更简洁、易用的状态管理方案。
  • Vite: 基于现代浏览器的构建工具，提供更快的构建速度和更好的开发体验。
  • Vue Router: Vue 官方路由库，提供路由管理功能。
  • TypeScript: JavaScript 的超集，提供类型检查和更好的代码提示功能。
  • pnpm: 更快的包管理工具，节省磁盘空间。
  • Scss: CSS 预处理器，方便开发者编写样式代码。
  • CSS Variables: 使用 CSS 变量控制布局和颜色，方便进行主题定制。
  • ESlint: 代码风格检查工具，保证代码风格一致性。
  • Axios: 基于 Promise 的 HTTP 客户端，方便进行网络请求。
  • UnoCSS: 高性能、灵活的原子 CSS 引擎，提供更快的样式渲染速度。

代码规范

项目使用 Git Commit 规范，方便开发者进行代码管理和版本控制。

  • feat: 新功能
  • fix: Bug 修复
  • perf: 性能优化
  • refactor: 代码重构
  • docs: 文档和注释
  • types: 类型相关改动
  • test: 单元测试相关
  • ci: 持续集成，工作流
  • revert: 回滚改动
  • chore: 杂项（更新依赖、修改配置等）

使用方法

V3 Admin Vite 提供了清晰的使用指南，帮助开发者快速开始本地开发和构建：

推荐环境

  • 最新版本的 Visual Studio Code
  • 安装 .vscode/extensions.json 文件中推荐的插件
  • node 20.x 或 22+
  • pnpm 9+

本地开发

# 克隆项目
git clone https://github.com/un-pany/v3-admin-vite.git

# 进入项目目录
cd v3-admin-vite

# 安装依赖
pnpm i

# 启动开发服务器
pnpm dev

构建

# 为测试环境构建
pnpm build:staging

# 为生产环境构建
pnpm build

本地预览

# 执行构建命令生成 dist 目录后，运行预览命令
pnpm preview

代码检查

# 代码 linting 和格式化
pnpm lint

# 单元测试
pnpm test

项目预览

同类项目

在开源社区中，还有许多与 V3 Admin Vite 类似的项目，它们同样提供了强大的后台管理解决方案。以下是一些值得关注的项目：

  • Vue Admin Template: 基于 Vue2 和 Element UI 的后台管理模板，功能丰富，但技术栈较旧。
  • Ant Design Vue Pro: 基于 Ant Design Vue 的后台管理模板，界面美观，但学习曲线较陡峭。
  • Quasar Framework: 基于 Vue3 的跨平台框架，支持构建桌面、移动端和网页应用，但上手难度较高。
  1. AdminLTE：一个基于 Bootstrap 3.x 的开源后台模板，提供了丰富的 UI 组件和插件。
  2. Material Dashboard：一个基于 Material Design 的后台管理模板，以其美观的界面和流畅的动画效果著称。
  3. Argon Dashboard：一个基于 Angular 和 Bootstrap 4 的后台管理模板，以其高性能和响应式设计受到开发者的喜爱。

总结

V3 Admin Vite 是一款功能强大、易于使用、技术先进的后台管理系统基础解决方案，可以帮助开发者快速构建高质量的后台管理系统。它提供了丰富的功能、灵活的配置和友好的开发体验，是开发者构建后台管理系统的理想选择。

项目地址

https://github.com/un-pany/v3-admin-vite
avatar
文章
阅读
粉丝