V3-Admin-Vite:是一个免费开源的中后台管理系统基础解决方案,基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite

688 阅读3分钟

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

V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案,基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流框架构建。它提供了一套简洁、高效、易于使用的后台管理界面,可以帮助开发者快速搭建各种管理应用。

功能特性

  • Vue3: 使用最新的 Vue3 组合式 API,提供更灵活、更高效的开发体验。
  • Element Plus: 基于 Vue3 的 Element UI 版本,提供丰富的 UI 组件,方便构建美观、易用的界面。
  • Pinia: Vue3 的状态管理库,替代 Vuex,提供更简洁、更易用的状态管理方案。
  • Vite: 基于现代浏览器的构建工具,提供更快的构建速度和更好的开发体验。
  • Vue Router: 路由管理库,支持动态路由和路由守卫,方便管理页面跳转和权限控制。
  • TypeScript: JavaScript 的超集,提供静态类型检查,提高代码的可维护性和可读性。
  • PNPM: 更快的包管理工具,节省磁盘空间,提高依赖安装速度。
  • Scss: CSS 预处理器,方便编写样式代码。
  • CSS 变量: 主要控制布局和颜色,方便定制主题。
  • ESlint: 代码风格检查工具,保证代码风格一致性。
  • Prettier: 代码格式化工具,自动格式化代码,提高代码可读性。
  • Axios: 基于 Promise 的 HTTP 客户端,方便进行网络请求。
  • UnoCSS: 高性能、灵活的原子 CSS 引擎,提供丰富的样式原子,方便构建样式。
  • 移动端兼容: 布局兼容移动端页面分辨率。

功能模块

  • 用户管理: 登录、登出功能。
  • 权限管理: 页面级权限(动态路由)、按钮级权限(指令权限、权限函数)、路由导航守卫。
  • 多环境: 开发、测试、生产环境。
  • 多主题: 普通模式、暗黑模式、深蓝模式。
  • 多布局: 侧边栏布局、顶部布局、侧边栏顶部布局。
  • 错误页面: 403、404 页面。
  • 仪表盘: 根据不同用户显示不同的仪表盘页面。
  • 其他功能: SVG、动态侧边栏、动态面包屑导航、标签导航、全屏、自适应收缩侧边栏、Hook(Composables)。

开发指南

  1. 配置: 安装 .vscode 目录中推荐的插件,Node.js 版本 18.x 或 20+,PNPM 版本 8.x 或最新版本。
  2. 克隆: git clone https://github.com/un-pany/v3-admin-vite.git
  3. 进入项目目录: cd v3-admin-vite
  4. 安装依赖: pnpm i
  5. 启动服务: pnpm dev

预览

  • 开发环境: pnpm preview:stage
  • 生产环境: pnpm preview:prod

打包

  • 测试环境: pnpm build:stage
  • 生产环境: pnpm build:prod

代码检查

  • 代码格式化: pnpm lint
  • 单元测试: pnpm test

项目预览

同类项目

  • Vue Admin: 基于 Vue2 和 Element UI 的后台管理模板,功能丰富,但技术栈较旧。
  • Ant Design Pro: 基于 Ant Design 的后台管理模板,提供丰富的 UI 组件和功能,但需要学习 Ant Design 的设计语言。
  • Quasar Framework: 基于 Vue3 的跨平台框架,可以构建桌面、移动端和网页应用,但学习曲线较陡峭。
  • Tabler: 基于 Bootstrap 的后台管理模板。

总结

V3 Admin Vite 是一个功能强大、易于使用、可扩展的后台管理模板,可以帮助开发者快速搭建各种管理应用。它基于最新的技术栈,提供丰富的功能和组件,同时注重代码质量和可维护性。如果你正在寻找一个后台管理模板,V3 Admin Vite 是一个不错的选择。