多种vue前端框架介绍

news2025/1/16 7:09:41

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

在现今的软件开发领域,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.coloradmin.cn/o/2277426.html

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

相关文章

qml AngleDirection详解

1、概述 AngleDirection 是 QML(Qt Meta Language)中用于定义粒子发射方向的一个类,它属于 Qt Quick Particles 模块。AngleDirection 通过设置角度范围来控制粒子从发射器射出时的初始方向。这个类在创建具有特定发射模式的粒子效果时非常有…

VSCode使用纪要

1、常用快捷键 1)注释 ctrl? 单行注释, altshifta 块注释, 个人测试,ctrl? 好像也能块注释 2)开多个项目 可以先开一个新窗口,再新窗口打开另一个项目,这时就是同时打开多个项目了。 打开…

单独编译QT子模块

单独编译QT子模块 系统 win qt-everywhere-src-5.12.12 下载源码: https://download.qt.io/archive/qt/5.12/5.12.12/single/ 参考: https://doc.qt.io/qt-5/windows-building.html 安装依赖 https://doc.qt.io/qt-5/windows-requirements.html Per…

浙江安吉成新照明电器:Acrel-1000DP 分布式光伏监控系统应用探索

安科瑞吕梦怡 18706162527 摘 要:分布式光伏发电站是指将光伏发电组件安装在用户的建筑物屋顶、空地或其他适合的场地上,利用太阳能进行发电的一种可再生能源利用方式,与传统的大型集中式光伏电站相比,分布式光伏发电具有更灵活…

DAMA GDPA 备考笔记(二)

1. 考点分布 2. 第二章 数据处理伦理知识点总结 伦理是建立在是非观念上的行为准则。伦理准则通常侧重于公平、尊重、责任、诚信、质量、可靠性、透明度和信任等方面。数据伦理是一项社会责任问题不是法律问题。 度量指标:培训员工人数、合规/不合规事件、企业高管…

Unity中实现倒计时结束后干一些事情

问题描述:如果我们想实现在一个倒计时结束后可以执行某个方法,比如挑战成功或者挑战失败,或者其他什么的比如生成boss之类的功能,而且你又不想每次都把代码复制一遍,那么就可以用下面这种方法。 结构 实现步骤 创建一…

【Elasticsearch】filterQuery过滤查询

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…

带头双向循环链表(数据结构初阶)

文章目录 双向链表链表的分类概念与结构实现双向链表定义链表结构链表打印判空申请结点初始化头插尾插头删尾删查找指定位置插入和删除销毁链表 顺序表和链表的分析结语 欢迎大家来到我的博客,给生活来点impetus!! 这一节我们学习双向链表&a…

在eNSp上telnet一下吧

在上篇博客:DNS 我们提到了telnet和设备带外管理、带内管理,它确实是非常有趣的一个知识点哦,接下来我们一起来学习学习吧~ Telnet(远程登陆协议) Telnet基于TCP 23号端口,典型的C/S架构模式,是…

Spring MVC复杂数据绑定-绑定集合

【图书介绍】《SpringSpring MVCMyBatis从零开始学(视频教学版)(第3版)》_【新华文轩】springspring mvcmybatis从零开始学(视频教学版) 第3版 正版-CSDN博客 《SpringSpring MVCMyBatis从零开始学(视频教学版)(第3版…

基于禁忌搜索算法的TSP问题最优路径搜索matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于禁忌搜索算法的TSP问题最优路径搜索,旅行商问题(TSP)是一个经典的组合优化问题。其起源可以追溯到 19 世纪初,…

静态综合路由实验

实验拓扑 实验要求 1.除R5的环回地址外,整个其他所有网段基于192.168.1.0/24进行合理的IP地址划分 2.R1-R4每个路由器存在两个环回接口,用于模拟pc网段;地址也在192.168.1.0/24这个网络范围内 3.R1-R4上不能直接编写到达5.5.5.0/24的静态路由…

前端组件开发:组件开发 / 定义配置 / 配置驱动开发 / 爬虫配置 / 组件V2.0 / form表单 / table表单

一、最早的灵感 最早的灵感来自sprider / 网络爬虫 / 爬虫配置,在爬虫爬取网站文章时候,会输入给爬虫一个配置文件,里边的内容是一个json对象。里边包含了所有想要抓取的页面的信息。爬虫通过这个配置就可以抓取目标网站的数据。其实本文要引…

[Deep Learning] Anaconda+CUDA+CuDNN+Pytorch(GPU)环境配置-2025

文章目录 [Deep Learning] AnacondaCUDACuDNNPytorch(GPU)环境配置-20250. 引子1. 安装Anaconda1.1 安装包下载:1.2 启用安装包安装1.3 配置(系统)环境变量1.4 验证Anaconda是否安装完毕1.5 Anaconda换源 2. 安装CUDACuDNN2.1 判断本机的CUDA版本2.2 下载适合自己CU…

直播预告丨Arxiv Insight:用 AI 重新定义论文检索

1月16日晚上20:00-20:50,Zilliz直播间,深圳大学计算机视觉所硕士牛增豪先生将带来《Arxiv Insight:用 AI 重新定义论文检索》分享,届时他将讲述从零到一构建 Arxiv Insight产品的过程,思考以及未来计划。欢迎大家锁定Z…

STM32 FreeRTOS 的任务挂起与恢复以及查看任务状态

目录 任务的挂起与恢复的API函数 任务挂起函数 任务恢复函数 任务恢复函数(中断中恢复) 函数说明 注意事项 查看任务状态 任务的挂起与恢复的API函数 vTaskSuspend():挂起任务, 类似暂停,可恢复 vTaskResume()&#xff1a…

4. 使用springboot做一个音乐播放器软件项目【数据库表的创建】

上一章文章 我们做了音乐播放器 这个项目一些公共封装的一些工具类。参考网址: https://blog.csdn.net/Drug_/article/details/145093705 那么这篇文章 我们开始创建数据表。来存储我们项目中所需要存储的数据。 对于 我们这个项目 版本一 需要开发的核心功能 在 第…

leetcode刷题记录(五十四)——560. 和为 K 的子数组

(一)问题描述 560. 和为 K 的子数组 - 力扣(LeetCode)560. 和为 K 的子数组 - 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。子数组是数组中元素的连续非空序列。 示例 1&am…

软考,质量管理。

项目质量管理,PMBOOK 质量是满足需求的能力的特性的总结 需求的满足程度 质量通常是指产品的质量,广义上的质量还包括工作质量。产品质量是指产品的使用价值及其属性;而工作质量则是产品质量的保证,它反映了与产品质量直接有关的…

Re78 读论文:GPT-4 Technical Report

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文全名:GPT-4 Technical Report 官方博客:GPT-4 | OpenAI appendix懒得看了。 文章目录 1. 模型训练过程心得2. scaling law3. 实验结果减少风险 1. 模型训练过程心得 模型结构还…