当前位置: 首页 > article >正文

多种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.kler.cn/a/509742.html

相关文章:

  • Social LSTM:Human Trajectory Prediction in Crowded Spaces | 文献翻译
  • Vue前端框架概述
  • Formality:参考设计/实现设计以及顶层设计
  • 使用 Helm 安装 Redis 集群
  • PHP xml 常用函数整理
  • pytest-instafail:让测试失败信息即时反馈
  • 【项目推荐】CakeMu-RV:一个开放的 RISC-V 处理器模拟器学习项目
  • 服务器卡顿是否等同于遭受CC攻击?
  • Windows 下 Postgres 安装 TimescaleDB 插件
  • (RAG系列) FastGPT通过API调用工作流问答
  • ESP8266-01S的TCP/IP相关的AT指令
  • 《深入浅出HTTPS​​​​​​​​​​​​​​​​​》读书笔记(29):TLS/SSL协议
  • 新星杯-ESP32智能硬件开发--ESP32开发环境
  • R语言的并发编程
  • 【华为OD-E卷 - 字符串加密 100分(python、java、c++、js、c)】
  • python初学者需要注意的几个基础点
  • 弱口令漏洞+文件上传漏洞
  • 【深度学习】1.深度学习解决问题与应用领域
  • MuJoCo仿真中的两轮平衡小车项目【问题集合】
  • 安卓java端service如何在native进程进行访问-跨进程通讯高端知识
  • 数据结构(初阶)(一)----算法复杂度
  • 《leetcode-runner》【图解】【源码】如何手搓一个debug调试器——架构
  • Web自动化:Cypress 测试框架概述
  • 自己造轮子-基于Ceres的GNSS-INS松耦合组合导航算法
  • 为AI聊天工具添加一个知识系统 之51 从形态学简约到纯粹的思维再映射到AI操作系统 之2
  • liunx进程函数汇总(包含管道、共享内存、消息队列、信号)