多种vue前端框架介绍

学如逆水行舟,不进则退。

在现今的软件开发领域,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

作为开发人员,利用一些优秀的开源项目搭建您的项目,会在开发中减少很多不必要的坑,也会节省很多时间,加速开发,优秀的框架,给我们封装好了很多好的组件和一些其他功能,易于上手,是我们开发高效、灵活。

相关推荐
网络安全queen12 分钟前
Web 学习笔记 - 网络安全
前端·笔记·学习
Lojarro13 分钟前
【Vue】Vue组件--上
前端·javascript·vue.js
answerball21 分钟前
💥Babel:前端魔法师的炼金术,让你的代码“返老还童”!👴➡️👶
前端·javascript·react.js
此星光明27 分钟前
GEE初学者的福音:我的新书发布《生态地理遥感云计算》
javascript·python·云计算·生态·遥感·gee·地理
CodeClimb43 分钟前
【华为OD-E卷 - 整数编码 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
CodeClimb1 小时前
【华为OD-E卷 - IPv4地址转换成整数 100分(python、java、c++、js、c)】
java·javascript·c++·python·华为od
找了一圈尾巴2 小时前
Spring Boot Web技术栈(官网文档解读)
服务器·前端·spring boot
yqcoder2 小时前
electron 打包后的 exe 文件,运行后是空白窗口
前端·javascript·electron
Jiaberrr2 小时前
微信小程序:跨页面数据修改全攻略
前端·javascript·微信小程序·小程序