嗨,大家好,我是小华同学,关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法
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)。
开发指南
- 配置: 安装 .vscode 目录中推荐的插件,Node.js 版本 18.x 或 20+,PNPM 版本 8.x 或最新版本。
- 克隆:
git clone https://github.com/un-pany/v3-admin-vite.git - 进入项目目录:
cd v3-admin-vite - 安装依赖:
pnpm i - 启动服务:
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 是一个不错的选择。