x

【前端框架】Vue3 开源框架收集

Chinese, Simplified
SEO Title
【前端框架】Vue3 open source framework collection

awesome -vue -3

https://github.com/vuesomedev/awesome-vue-3

A curated list of awesome things related to Vue 3

 

vue3-antd-admin

基于 vue-cli / vite2.x + vue3.x + antd-design-vue2.x + typescript4.x 的后台管理系统模板

vscode 配置

安装项目根目录.vscode 推荐的插件，再安装 Volar，并禁用 Vetur，重启 vscode 即可。

使用了 Vue3.0 全家桶、ant-design-vue2.0 和 typescript4.0，实践 vue3.0 的新特性以及玩法，不得不说 vue3.0 的 Composition API 相比于 vue2.0 的 Options API 灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用 hooks 的形式去代替以前 mixins 等的写法。更多 hooks 可以参考vueuse

功能、组件的封装

  •  动态表格（扩展了伸缩列功能，以及使用 JSON schema 配置生成表格） // TODO 后续有待加强及完善
  •  动态表单（满足基本的需求） // TODO 后续有待加强及完善
  •  自定义弹窗（支持 8 个方向拖拽改变大小以及拖拽移动位置）// TODO: 继承 antd 原组件所有 props
  •  图片视频预览（目前只是简单显示）
  •  分割组件（目前只做了左右）
  •  图标组件封装(本地 svg 封装、阿里图标的在线和离线封装)
  •  其他...

页面功能

系统看板

  •  首页
  •  疫情地图
  •  系统日志
  •  前端性能监控

系统管理

  •  账号管理
  •  角色管理
  •  资源管理
  •  字典管理

 

vue3-admin

https://github.com/newbee-ltd/vue3-admin

🔥 🎉 Vue 3.0 + Vite 2.0 + Vue-Router 4.0 + Element-Plus + Echarts 5.0 + Axios 开发的后台管理系统

newbee-mall 项目是一套电商系统，基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

vue3-admin 版本线上预览地址：http://vue3-admin.newbee.ltd，测试账号密码：admin 123456

本仓库中的源码为新蜂商城前后端分离版本的后台管理系统（Vue 版本为 3.x），主要面向前端开发人员，后端 API 源码在另外一个仓库 newbee-mall-api。

前后端分离版本包括四个仓库：

/fes.js

Fes.js 是一个好用的前端应用解决方案。 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js，上手简单。经过多个项目中打磨，趋于稳定。

Fes.js 是什么？

Fes.js 是一个优秀的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。

它主要具备以下功能：

  • 🚀 快速 ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。

  • 🧨 简单 ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。

  • 💪 健壮 ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。

  • 📦 可扩展 ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。

  • 📡 面向未来 ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。

插件

插件 介绍
@fesjs/plugin-access 提供对页面资源的权限控制能力
@fesjs/plugin-enums 提供统一的枚举存取及丰富的函数来处理枚举
@fesjs/plugin-icon svg 文件自动注册为组件
@fesjs/plugin-jest 基于 Jest，提供单元测试、覆盖测试能力
@fesjs/plugin-layout 简单的配置即可拥有布局，包括导航以及侧边栏
@fesjs/plugin-locale 基于 Vue I18n，提供国际化能力
@fesjs/plugin-model 简易的数据管理方案
@fesjs/plugin-request 基于 Axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能
@fesjs/plugin-vuex 基于 Vuex, 提供状态管理能力
@fesjs/plugin-qiankun 基于 qiankun，提供微服务能力
@fesjs/plugin-sass 样式支持sass
@fesjs/plugin-monaco-editor 提供代码编辑器能力， 基于monaco-editor（VS Code使用的代码编辑器）

 

/vue-pure-admin

Vue3.0+TypeScript+Vite2.0+Element-Plus编写的一套后台管理系统

功能列表

流程图

权限管理

/PPTist

基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，实现在线PPT的编辑、演示。支持导出PPT文件

📚 功能列表

通用功能

  • 历史记录（撤销、重做）
  • 快捷键
  • 右键菜单

幻灯片页面编辑

  • 页面添加、删除
  • 页面顺序调整
  • 页面复制粘贴
  • 背景设置（纯色、渐变、图片）
  • 网格线
  • 画布缩放
  • 主题设置
  • 幻灯片备注
  • 幻灯片模板

幻灯片元素编辑

  • 元素添加、删除
  • 元素复制粘贴
  • 元素拖拽移动
  • 元素旋转
  • 元素缩放
  • 元素多选（框选、点选）
  • 多元素组合
  • 元素锁定
  • 元素吸附对齐（移动和缩放）
  • 元素层级调整
  • 元素对齐到画布
  • 元素对齐到其他元素
  • 多元素均匀分布
  • 拖拽添加图文
  • 粘贴外部图片
  • 元素坐标、尺寸和旋转角度设置
  • 元素设置超链接

文字

  • 富文本编辑（颜色、高亮、字体、字号、加粗、斜体、下划线、删除线、角标、行内代码、引用、对齐方式、项目符号、清除格式）
  • 行高
  • 字间距
  • 填充色
  • 边框
  • 阴影
  • 透明度

图片

  • 裁剪（自定义、按形状、按纵横比）
  • 滤镜
  • 翻转
  • 边框
  • 阴影
  • 替换图片
  • 重置图片
  • 设置为背景图

形状

  • 填充色
  • 边框
  • 阴影
  • 透明度
  • 翻转
  • 编辑文字

线条

  • 颜色
  • 宽度
  • 样式
  • 端点样式

图表（柱状图、折线图、饼图）

  • 数据编辑
  • 背景填充
  • 主题色
  • 坐标系与坐标文字颜色
  • 其他设置（柱状图转条形图、折线图转面积图、折线图转散点图、饼图转环形图、折线图开关平滑曲线）
  • 边框

表格

  • 行、列添加删除
  • 行列数设置
  • 主题设置（主题色、表头、汇总行、第一列、最后一列）
  • 合并单元格
  • 单元格样式（填充色、文字颜色、加粗、斜体、下划线、删除线、对齐方式）
  • 边框

幻灯片放映

  • 翻页动画
  • 元素入场动画
  • 全部幻灯片预览
  • 画笔、黑板工具
  • 自动放映

/newbee-mall-vue-app

🔥 🎉Vue2 全家桶 + Vant 搭建大型单页面商城项目。新蜂商城前后端分离版本-前端Vue项目源码

ewbee-mall 项目是一套电商系统，包括 newbee-mall 商城系统及 newbee-mall-admin 商城后台管理系统，基于 Spring Boot 2.X 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、首页轮播、商品推荐、商品搜索、商品展示、购物车、订单结算、订单流程、个人订单管理、会员中心、帮助中心等模块。 后台管理系统包含数据面板、轮播图管理、商品管理、订单管理、会员管理、分类管理、设置等模块。

本仓库中的源码为新蜂商城前后端分离版本的 Vue 项目（Vue 版本为 2.x），主要面向前端开发人员，后端 API 源码在另外一个仓库 newbee-mall-api。

新蜂商城 Vue 版本线上预览地址：http://vue-app.newbee.ltd，账号可自行注册，建议使用手机模式打开。

前后端分离版本包括四个仓库：

Vue2 版本与 Vue3 版本分成两个仓库，大家需要哪个版本就去对应的仓库即可。

/ssr

A most advanced ssr framework support React/Vue2/Vue3 on Earth that implemented serverless-side render specification.

ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。了解什么是服务端渲染请查看文档

此框架脱胎于 egg-react-ssr 项目和ssr v4.3版本（midway-faas + react ssr），在之前的基础上做了诸多演进，通过插件化的代码组织形式，支持任意服务端框架与任意前端框架的组合使用。开发者可以选择通过 Serverless 方式部署或是以传统 Node.js 的应用形式部署，并且我们专注于提升 Serverless 场景下服务端渲染应用的开发体验，打造了一站式的开发，发布应用服务的功能。最大程度提升开发者的开发体验，将应用的开发，部署成本降到最低。

在最新的 v5.0 版本中，同时支持 React 和 Vue2/Vue3 作为服务端渲染框架且构建工具我们同样支持了最流行的 Vite 来提升应用的启动速度和 HMR 速度，且提供一键以 Serverless 的形式发布上云的功能。我们可以非常有自信说它是地球上最先进的 ssr 框架。如果你希望获得开箱即用的体验且能够一键部署上云，请选择 ssr 框架。

/blog-vue-typescript

Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + element-plus 支持 markdown 渲染的博客前台展示

已经完成功能

  •  登录
  •  注册
  •  文章列表
  •  文章归档
  •  标签
  •  关于
  •  点赞与评论
  •  留言
  •  历程
  •  文章详情（支持代码语法高亮）
  •  文章详情目录
  •  移动端适配
  •  github 授权登录

⬆️ 返回顶部

前端主要技术

所有技术都是当前最新的。

  • vue： ^3.0.5
  • typescript : ^4.1.3
  • element-plus: ^1.0.2-beta.41
  • vue-router : ^4.0.6
  • vite: ^2.2.3
  • vuex: ^4.0.0
  • axios: ^0.21.1
  • highlight.js: ^10.7.2
  • marked：^2.0.3

/lin-cms-vue

🔆 Vue+ElementPlus构建的CMS开发框架

Lin CMS 简介

  • Lin-CMS 是林间有风团队经过大量项目实践所提炼出的一套内容管理系统框架。

  • Lin-CMS 可以有效的帮助开发者提高 CMS 的开发效率。

  • Lin-CMS 是一套前后端完整的解决方案，后端部署请移步：

/element3

A Vue.js 3.0 UI Toolkit for Web. Build with Javascript

/formily

背景

在 React 中，在受控模式下，表单的整树渲染问题非常明显。特别是对于数据联动的场景，很容易导致页面卡顿，为了解决这个问题，我们将每个表单字段的状态做了分布式管理，从而大大提升了表单操作性能。同时，我们深度整合了 JSON Schema 协议，可以帮助您快速解决后端驱动表单渲染的问题。

特性

  • 🖼 可设计，借助 Form Builder 可以快速搭建表单
  • 🚀 高性能，字段分布式渲染，大大减轻 React 渲染压力
  • 💡 支持 Ant Design/Fusion Next 组件体系
  • 🎨 JSX 标签化写法/JSON Schema 数据驱动方案无缝迁移过渡
  • 🏅 副作用逻辑独立管理，涵盖各种复杂联动校验逻辑
  • 🌯 支持各种表单复杂布局方案

/vue-storefront

The open-source frontend for any eCommerce. Built with a PWA and headless approach, using a modern JS stack. We have custom integrations with Magento, commercetools, Shopware and Shopify and total coverage is just a matter of time. The API approach also allows you to merge VSF with any third-party tool like CMS, payment gateways or analytics. Ne…

/vue-admin-beautiful-pro

vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design，vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护，同时支持电脑，手机，平板，切换分支查看不同的vue版本，element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

https://github.com/chuzhixin/vue-admin-beautiful-pro

/vue-vben-admin

A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast！

https://github.com/anncwb/vue-vben-admin/blob/main/README.zh-CN.md

简介

Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的vue3,vite2,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。

特性

  • 最新技术栈：使用 Vue3/vite2 等前端前沿技术开发
  • TypeScript: 应用程序级 JavaScript 的语言
  • 主题：可配置的主题
  • 国际化：内置完善的国际化方案
  • Mock 数据 内置 Mock 数据方案
  • 权限 内置完善的动态路由权限生成方案
  • 组件 二次封装了多个常用的组件

 

/vite-vue3-lowcode

Vue3.x + vite2.x + vant + element-plus H5移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具

https://github.com/buqiyuan/vite-vue3-lowcode

技术栈

功能清单

  •  动态添加页面
  •  拖拽式生成组件
  •  service worker + indexeddb 实现无服务端的前端交互
  •  数据源管理(支持导入 swagger JSON 生成数据模型及接口)
  •  提供预置函数
  •  更多组件的封装
  •  其他...

 

/vue3-antd-admin

基于vue-cli/vite + vue3.0 + ant-design-vue2.0 + typescript hooks 的基础后台管理系统模板 RBAC的权限系统, JSON Schema动态表单,动态表格,漂亮锁屏界面

功能、组件的封装

  •  动态表格（扩展了伸缩列功能，以及使用 JSON schema 配置生成表格） // TODO 后续有待加强及完善
  •  动态表单（满足基本的需求） // TODO 后续有待加强及完善
  •  自定义弹窗（支持 8 个方向拖拽改变大小以及拖拽移动位置）// TODO: 继承 antd 原组件所有 props
  •  图片视频预览（目前只是简单显示）
  •  分割组件（目前只做了左右）
  •  图标组件封装(本地 svg 封装、阿里图标的在线和离线封装)
  •  其他...

页面功能

系统看板

  •  首页
  •  疫情地图
  •  系统日志
  •  前端性能监控

系统管理

  •  账号管理
  •  角色管理
  •  资源管理
  •  字典管理

/vue-manage-system

基于Vue3 + Element Plus 的后台管理系统解决方案

前言

该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 Vue3，使用 vue-cli3 脚手架，引用 Element Plus 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。

功能

  •  Element Plus
  •  登录/注销
  •  Dashboard
  •  表格
  •  Tab 选项卡
  •  表单
  •  图表 📊
  •  富文本编辑器
  •  图片拖拽/裁剪上传
  •  权限测试
  •  404 / 403
  •  三级菜单
  •  自定义图标
  •  国际化

/gin-vue-admin

基于gin+vue搭建的（中）后台系统框架，集成jwt鉴权，权限管理，动态路由，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器，通用工作流等基础功能，五分钟一套CURD前后端代码，VUE3版本正在重构

https://github.com/flipped-aurora/gin-vue-admin

 

原文地址
https://github.com/flipped-aurora/gin-vue-admin
本文地址
https://architect.pub/qianduankuangjia-vue3-open-source-framework-collection

Tags

Article
知识星球
 
微信公众号
 
视频号
 
↑