学如逆水行舟,不进则退。
在现今的软件开发领域,Vue.js凭借其高效、灵活和易于上手的特性,成为了前端开发的热门选择。对于需要快速搭建企业级后台管理系统的开发者而言,使用现成的Vue后台管理系统模板无疑是一个明智之举。
本文我为大家分享几款开源、免费开源、开箱即用的开源免费的 Vue3 开源管理后台,它们可以帮助你在项目中快速起步!专注于业务逻辑的开发。
01. vue-element-admin
Github 地址:https://github.com/PanJiaChen/vue-element-admin
文档 地址:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/
vue-element-admin是一个已高度完成的系统原型,它基于vue框架和elementUI组件库。它使用最新的前端技术栈,内置i18n国际化解决方案、动态路由、权限验证。它可以帮助我们快速搭建企业级中后台系统原型。
// 开发
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 启动服务
npm run dev
# 前端访问地址 http://localhost:80
// 发布
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod
02. RuoYi-Vue-Plus
gitee 地址:https://gitee.com/dromara/RuoYi-Vue-Plus
文档 地址:https://plus-doc.dromara.org/#/
RuoYi-Vue-Plus是一个重写RuoYi-Vue的后台管理系统,针对分布式集群与多租户场景进行了全方位升级。该系统不兼容原RuoYi框架,旨在提供更强大、更灵活的功能,以满足现代企业的复杂需求。真正面向企业级的应用框架 组件化 模块化 轻耦合 高扩展.
// 开发
# 克隆项目
git clone https://gitee.com/JavaLionLi/plus-ui.git
# 安装依赖
npm install --registry=https://registry.npmmirror.com
# 启动服务
npm run dev
# 前端访问地址 http://localhost:80
// 发布
# 构建测试环境
npm run build:dev
# 构建生产环境
npm run build:prod
03. Ant Design Vue Pro
github 地址:https://github.com/vueComponent/ant-design-vue-pro
文档 地址:https://pro.antdv.com/
Ant Design Pro 是一个企业级中后台前端/设计解决方案,我们秉承 Ant Design 的设计价值观,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。
// 开发
# 克隆项目
git clone https://github.com/vueComponent/ant-design-vue-pro.git
# 进入项目目录
cd ant-design-vue-pro
# 安装依赖
npm install
# 启动服务
npm run dev
# 前端访问地址 http://localhost:80
// 发布
$ yarn build
or
$ npm run build
04.TDesign Vue Next
github 地址:https://github.com/Tencent/tdesign-vue-next-starter
文档 地址:https://tdesign.tencent.com/starter/
TDesign Vue-Next For Mobile 旨在满足 H5 场景下的前端页面开发需求,同时,产品保持了与 TDesign 小程序端 高度一致的设计语言 和 API,统一的 API 不仅在开发上能让开发者在多端开发中更加适应,也可以通过 API 自动生成单元测试用例。
// 开发
# 克隆项目
git clone https://github.com/Tencent/tdesign-vue-next.git
# 进入项目目录
cd tdesign-vue-next
# 安装依赖
npm install
# 启动服务
npm run dev
# 前端访问地址 http://localhost:80
// 发布
# 构建测试环境
npm run build:test
# 构建生产环境
npm run build
05. iview-admin
github 地址:https://github.com/iview/iview-admin
文档 地址:https://www.kancloud.cn/renbo/cwagpssoption/1613964
iView Admin 是一套基于 Vue.js 构建的强大后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。iView admin 遵守 iView 设计和开发约定,风格统一,设计考究,并且更多功能在不停开发中。通过与 iView UI 组件库的配合,为开发者提供了一套高效、灵活且功能丰富的后台管理界面。
iView Admin 基于 Vue.js 构建,利用了 Vue.js 的组件化特性和响应式数据绑定机制,使得界面更加灵活且易于维护。通过与 iView UI 组件库的配合使用,进一步丰富了界面的功能和样式。此外,iView Admin 还利用了现代前端开发中的一些最佳实践,如动态路由、国际化等,使得后台管理界面更加现代化和国际化。
// 开发
# 克隆项目
git clone https://github.com/iview/iview-admin.git
# 进入项目目录
cd iview-admin
# 安装依赖
npm install
# 启动服务
npm run dev
# 前端访问地址 http://localhost:80
// 发布
# 构建生产环境
npm run build
06. vue3-element-admin
github 地址:https://github.com/iview/iview-admin
文档 地址:https://www.kancloud.cn/renbo/cwagpssoption/1613964
vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案, vue3-element-admin是一个基于Vue 3、Vite 5、TypeScript、Element-Plus以及Pinia等主流技术栈构建的免费开源中后台管理前端模板。它不仅继承了vue-element-admin的成熟设计理念,还针对Vue 3的特性进行了全面升级和优化。此外,项目还配套了Java后端源码和在线接口文档,为开发者提供了完整的前后端分离解决方案。
// 开发
# 克隆项目
git clone https://gitee.com/youlaiorg/vue3-element-admin.git
# 进入项目目录
cd vue3-element-admin
# 安装依赖
npm install
# 启动服务
npm run dev
# 前端访问地址 http://localhost:80
// 发布
# 构建生产环境
npm run build
07. el-admin
github 地址:https://github.com/elunez/eladmin
文档 地址:https://eladmin.vip/
演示 地址: https://eladmin.vip/demo/#/login?redirect=%2Fdashboard
el-admin 是一个基于 Spring Boot 2.1.0 、 Spring boot Jpa、 Spring Security、redis、Vue 的前后端分离的权限管理系统,项目采用分模块开发方式, 权限控制采用 RBAC(Role-Based Access Control,基于角色的访问控制),前端菜单支持动态路由
// 推荐 node 版本:12-16
# 克隆项目
git clone https://github.com/elunez/eladmin-web.git
# 配置镜像加速
https://www.ydyno.com/archives/1219.html
# 安装依赖
npm install
# 启动服务 localhost:8013
npm run dev
# 构建生产环境
npm run build:prod
作为开发人员,利用一些优秀的开源项目搭建您的项目,会在开发中减少很多不必要的坑,也会节省很多时间,加速开发,优秀的框架,给我们封装好了很多好的组件和一些其他功能,易于上手,是我们开发高效、灵活。