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

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

相关推荐
Mintopia24 分钟前
像素的进化史诗:计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学
Mintopia27 分钟前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js
归于尽41 分钟前
async/await 从入门到精通,解锁异步编程的优雅密码
前端·javascript
陈随易42 分钟前
Kimi k2不行?一个小技巧,大幅提高一次成型的概率
前端·后端·程序员
猩猩程序员1 小时前
Rust 动态类型与类型反射详解
前端
杨进军1 小时前
React 实现节点删除
前端·react.js·前端框架
晓13131 小时前
JavaScript加强篇——第六章 定时器(延时函数)与JS执行机制
开发语言·javascript·ecmascript
yanlele1 小时前
【实践篇】【01】我用做了一个插件, 点击复制, 获取当前文章为 Markdown 文档
前端·javascript·浏览器
爱编程的喵1 小时前
React useContext 深度解析:告别组件间通信的噩梦
前端·react.js