多种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,一经查实,立即删除!

相关文章

opencv3.4 ffmpeg3.4 arm-linux 交叉编译

一些依赖安装: sudo apt-get install pkg-config libgtk2.0-dev libavcodec-dev libavformat-dev libswscale-dev 交叉编译工具链准备:gcc-linaro-6.3.1 1、下载 https://github.com/FFmpeg/FFmpeg 解压后新建目录:Fmpeg-n3.4.13/ffmpeg…

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

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

SDL2:Android APP编译使用 -- SDL2多媒体库使用音频实例

更多内容:XiaoJ的知识星球 SDL2:Android APP编译使用 3. SDL2:Android APP编译使用3.1 Android Studio环境准备:3.2 构建Android APP(1)方式一:快速构建APK工程(2)方式二…

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

AUTOSAR从入门到精通-无人驾驶网约车(Robotaxi)

目录 前言 几个高频面试题目 特斯拉的Robotaxi和萝卜快跑对比 ▍1. 技术基础与实现 ▍2. 定价 ▍3. 外观设计 算法原理 什么是Robotaxi? Robotaxi与自动驾驶的关系 定义自动驾驶及其分级(0级到5级) Robotaxi在自动驾驶技术中的应用和定位 1 Robotaxi的内涵与优势…

kafka集群安装Raft 协议

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

Java 接口安全指南

Java 接口安全指南 概述 在现代 Web 应用中,接口(API)是前后端交互的核心。然而,接口的安全性常常被忽视,导致数据泄露、未授权访问等安全问题。本文将详细介绍 Java 中如何保障接口安全,涵盖以下内容&am…

华为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…

【C】PAT 1011-1015

1011 AB和C 给定区间 [−231,231] 内的 3 个整数 A、B 和 C,请判断 AB 是否大于 C。 输入格式: 输入第 1 行给出正整数 T (≤10),是测试用例的个数。随后给出 T 组测试用例,每组占一行,顺序给出 A、B 和 C。整数间以…

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…

ubuntu下安装编译cmake,grpc与protobuf

文章目录 install cmakeinstall grpcinstall protobuf注 install cmake sudo apt-get install -y g make libssl-devcd third_party/cmake-3.17.2./configuresudo make && make installcmake --version install grpc $ sudo apt-get install -y build-essential auto…

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

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