多种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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68516.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用SIPP发起媒体流性能测试详解

使用SIPP发起媒体流性能测试详解 一、SIPP工具简介二、测试前的准备三、编写测试脚本四、运行测试五、分析测试结果六、总结SIPP(SIP Performance Protocol)是一个开源工具,专门用于SIP(Session Initiation Protocol)协议的性能测试和基准测试。SIP是一种用于控制多媒体通…

macOS 安装JDK17

文章目录 前言介绍新特性下载安装1.下载完成后打开downloads 双击进行安装2.配置环境变量3.测试快速切换JDK 小结 前言 近期找开源软件,发现很多都已经使用JDK17springboot3 了,之前的JDK8已经被替换下场,所以今天就在本机安装了JDK17&#…

重温STM32之环境安装

缩写 CMSIS:common microcontroller software interface standard 1,keil mdk安装 链接 Keil Product Downloads 安装好后,开始安装平台软件支持包(keil 5后不在默认支持所有的平台软件开发包,需要自行下载&#…

vue3+ts+uniapp 微信小程序(第一篇)—— 微信小程序定位授权,位置信息权限授权

文章目录 简介一、先看效果1.1 授权定位前,先弹出隐私协议弹框1.2 上述弹框点击同意,得到如下弹框1.3 点击三个点,然后点设置 1.4 在1.2步骤下,无论同意或者拒绝 二、manifest.json 文件配置三、微信公众平台配置3.1 登录进入微信…

迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-编写内核 LED HDF 驱动程序

接下来编译 LED 驱动,该驱动用于在基于华为设备框架(HDF)的系统中控制 LED 灯的开关,完整代码如下所示: 更多内容可以关注:迅为RK3568开发板篇OpenHarmony

kafka集群安装Raft 协议

​使用消息中间件,可以实现系统与系统之间的异步通信和无缝对接,也可用在模块之间的的异步通信,有效避免了同步阻塞IO。作为一个高吞吐量、可扩展、高可靠性的分布式消息系统,Kafka 能够胜任从简单的消息队列到复杂的流处理平台的…

华为AI培训-NLP实验

中文分词、命名实体识别、语义词性标注、语句逻辑推理、文本摘要、机器翻译、文本情感分析、内容创作 1 实验介绍 1.1 实验背景 中文分词、命名实体识别、语义词性标注、语句逻辑推理是自然语言处理领域中的重要任务。中文分词是将连续的汉字序列切分成有意义的词语序列…

Flask学习入门笔记

Flask学习入门笔记 前言1. 安装Flask2. 创建一个简单的Flask应用3. 路由与视图函数3.1 基本路由3.2 动态路由3.3 HTTP方法 4. 请求与响应4.1 获取请求数据4.2 返回响应 5. 模板渲染5.1 基本模板渲染5.2 模板继承 6. 静态文件6.1 静态文件的目录结构6.2 在模板中引用静态文件6.2…

citrix netscaler13.1 重写负载均衡响应头(基础版)

在 Citrix NetScaler 13.1 中,Rewrite Actions 用于对负载均衡响应进行修改,包括替换、删除和插入 HTTP 响应头。这些操作可以通过自定义策略来完成,帮助你根据需求调整请求内容。以下是三种常见的操作: 1. Replace (替换响应头)…

【Web】2025西湖论剑·中国杭州网络安全安全技能大赛题解(全)

目录 Rank-l Rank-U sqli or not Rank-l username存在报错回显,发现可以打SSTI 本地起一个服务,折半查找fuzz黑名单,不断扔给fenjing去迭代改payload from flask import Flask, request, render_template_stringapp Flask(__name__)app…

WEB渗透技术研究与安全防御

目录 作品简介I IntroductionII 1 网络面临的主要威胁1 1.1 技术安全1 2 分析Web渗透技术2 2.1 Web渗透技术的概念2 2.2 Web漏洞产生的原因2 2.3 注入测试3 2.3.1 注入测试的攻击流程3 2.3.2 进行一次完整的Sql注入测试4 2.3.3 Cookie注入攻击11 3 安全防御方案设计…

软考高级5个资格、中级常考4个资格简介及难易程度排序

一、软考高级5个资格 01、网络规划设计师 资格简介:网络规划设计师要求考生具备全面的网络规划、设计、部署和管理能力;该资格考试适合那些在网络规划和设计方面具有较好理论基础和较丰富从业经验的人员参加。 02、系统分析师 资格简介:系统分…

Centos 宝塔安装

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 安装成功界面 宝塔说明文档 https://www.bt.cn/admin/servers#wcu 或者可以注册宝塔账号 1 快速部署 安装docker 之后 2 需要在usr/bin下下载do…

Java锁 从乐观锁和悲观锁开始讲 面试复盘

目录 面试复盘 Java 中的锁 大全 悲观锁 专业解释 自我理解 乐观锁 专业解释 自我理解 悲观锁的调用 乐观锁的调用 synchronized和 ReentrantLock的区别 相同点 区别 详细对比 总结 面试复盘 Java 中的锁 大全 悲观锁 专业解释 适合写操作多的场景 先加锁可以…

使用nginx搭建通用的图片代理服务器,支持http/https/重定向式图片地址

从http切换至https 许多不同ip的图片地址需要统一进行代理 部分图片地址是重定向地址 nginx配置 主站地址:https://192.168.123.100/ 主站nginx配置 server {listen 443 ssl;server_name localhost;#ssl证书ssl_certificate ../ssl/ca.crt; #私钥文件ssl_ce…

latin1_swedish_ci(latin1 不支持存储中文、日文、韩文等多字节字符)

文章目录 1、SHOW TABLE STATUS WHERE Name batch_version;2、latin1_swedish_ci使用场景注意事项修改字符集和排序规则修改表的字符集和排序规则修改列的字符集和排序规则修改数据库的默认字符集和排序规则 3、ALTER TABLE batch_version CONVERT TO CHARACTER SET utf8mb4 C…

复健第二天之[MoeCTF 2022]baby_file

打开题目在线环境可以看到: 感觉要用伪协议去求,但是我们并不知道flag的位置,这里我选择用dirsearch去扫一下: 最像的应该就是flag.php了 于是就构建payload: **?filephp://filter/convert.base64-encode/resource…

机器学习之SVD奇异值分解实现图片降维

SVD奇异值分解实现图片降维 目录 SVD奇异值分解实现图片降维1 SVD奇异值分解1.1 概念1.2 基本步骤1.2.1 矩阵分解1.2.2 选择奇异值1.2.3 重建矩阵1.2.4 降维结果 1.3 优缺点1.3.1 优点1.3.2 缺点 2 函数2.1 函数导入2.2 函数参数2.3 返回值2.4 通过 k 个奇异值降维 3 实际测试3…

PyTorch使用教程(6)一文讲清楚torch.nn和torch.nn.functional的区别

torch.nn 和 torch.nn.functional 在 PyTorch 中都是用于构建神经网络的重要组件,但它们在设计理念、使用方式和功能上存在一些显著的区别。以下是关于这两个模块的详细区别: 1. 继承方式与结构 torch.nn torch.nn 中的模块大多数是通过继承 torch.nn…

移动端布局 ---- 学习分享

响应式布局实现方法 主流的实现方案有两种: 通过rem \ vw/vh \ 等单位,实现在不同设备上显示相同比例进而实现适配. 响应式布局,通过媒体查询media 实现一套HTML配合多套CSS实现适配. 在学习移动端适配之前,还需要学习移动端适配原理: 移动端适配原理(Viewport) 了解VSCo…