推荐Github上15个学习Vue3开源项目

53,627 阅读5分钟

✨ZHOUYI·ADMIN

基于 Vue3 + ElementPlus + JavaScript + Pinia +Vite.搭建

ZHOUYI·ADMIN 是一个现代化的管理后台模板,提供了一系列功能丰富的组件和工具,帮助开发者快速搭建和开发前后台管理应用。 对快速构建Vue3全栈项目有很大的帮助,解决每次新建项目基础配置的烦恼.

无论你是一个开发者寻找一个可靠的管理后台模板,还是一个学习者想要深入了解现代前端技术, ZHOUYI·ADMIN 都是一个非常有价值的项目。 因为它弥补了不习惯使用TypeScript开发的同学, 使用JavaScript版本就能更快上手熟悉 。

截图:

img_3.png

img_5.png

img_6.png

img_7.png

img_11.png

✨Vue3-Antd-Plus

Vue3-Antd-Plus提供了一个基于最新的技术栈(Vue3、Vite、Ant Design Vue、JavaScript、Pinia、Hooks和vue-router)的完整开发模板,界面清新美观大方、旨在帮助初学者更快地入门并加入团队开发。该模板包含了一系列功能模块

特性:​

  • 最新技术栈:使用 Vue3/vite4/Pinia/Hooks 等前端前沿技术开发
  • 大屏数据可视化界面
  • JavaScript: 对初学者非常友好
  • 主题:可配置的主题
  • 权限 内置完善的路由权限、按钮权限生成方案
  • 组件 二次封装了多个常用的组件

截图:(管理后台+web前台)

vue-vben-admin

在线体验:vben.vvbin.cn/

Github(15.2k):github.com/anncwb/vue-…

vue-vben-admin 基于ant-design-vue,typescript,vue3.0,vite实现的 vue3 风格的后台管理系统。

特性:​

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

截图:

38ac318c6d1b9b17af83c70f6e2633c.png

image.png

vue3-antd-admin

在线体验:buqiyuan.gitee.io/vue3-antd-a…

Github(2.7k):github.com/buqiyuan/vu…

vue3-antd-admin 基于vue-cli5.x/vite2.x + vue3.x + ant-design-vue3.x + typescript hooks 的基础后台管理系统模板 RBAC的权限系统, JSON Schema动态表单,动态表格,漂亮锁屏界面。

截图:

vue3-composition-admin

在线体验:admin-tmpl-test.rencaiyoujia.cn/

Github(2.2k):github.com/RainManGO/v…

vue3-composition-admin 是一个管理端模板解决方案,它是基于vue3,ts和element-plus,项目都是以composition api风格编写

截图:

vue-typescript-admin-template

在线体验:armour.github.io/vue-typescr…

Github(4.9k):github.com/Armour/vue-…

vue-typescript-admin-template 是一个后台前端解决方案,它基于 vue, typescript 和 element-ui实现。原始的 Javascript 版本的代码是由 PanJiaChen 开发维护的 vue-element-admin, 十分感谢大佬对开源社区做出的贡献 :)

截图:

vue-cli

在线体验:wscats.github.io/vue-cli/dis…

Github(396):github.com/Wscats/vue-…

vue-cli 基于 Vue3.0 Composition Api 快速构建实战项目

截图:

movie-trailer

在线体验:movie.ihaoze.cn/

Github(390):github.com/lhz960904/m…

movie-trailer 基于Vue全家桶开发的电影预告片webAPP,可以查看正在热映与即将上映的电影信息和短片。

截图:

newbee-mall-vue3-app

Github(4.4k):github.com/newbee-ltd/…

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

截图

vue3-jd-h5

在线演示:gankai.gitee.io/vue-jd-h5/#…

Github(4.4k):github.com/GitHubGanKa…

vue3-jd-h5是一个电商 H5 页面前端项目,基于Vue 3.0.0 + Vant 3.0.0 实现,主要包括首页、分类页面、我的页面、购物车等。

截图

ELADMIN

在线演示:eladmin.vip/

Github:github.com/elunez/elad…

ELADMIN (opens new window)一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue、Element-UI 的前后端分离的后台管理系统。

截图

Vue2-elm

在线演示:cangdu.org/elm/

Github:github.com/bailicangdu…

Vue饿了么基于 vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg 构建一个具有 45 个页面的大型单页面应用

截图

 vue-element-admin

在线演示:panjiachen.github.io/vue-element…

Github(79.9k):github.com/PanJiaChen/…

vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

截图

vue2-manage

在线演示:cangdu.org/manage/

Github(12.4k):github.com/bailicangdu…

vue2-manage 是此项目是 ue2 + vuex + vue-router + webpack + ES6/7 + less + element-ui 构建的后台管理系统,是后台项目node-elm 的管理系统,所有的数据都是从服务器实时获取的真实数据,具有真实的注册、登陆、管理数据、权限验证等功能。

截图

 koel

在线演示:demo.koel.dev/

Github(14.2k):github.com/koel/koel

Koel(也称为Koel,小写k)是一个简单的基于web的个人音频流服务,在客户端使用Vue编写,在服务器端使用Laravel编写。Koel以网络开发人员为目标,采用一些更现代的网络技术来完成其工作。

截图

 NeteaseCloudWebApp

在线演示:music.javaswing.cn/

Github(2.5k):github.com/javaSwing/N…

NeteaseCloudWebApp 这是一个用VUEJS写高仿网易云音乐的webapp,只实现了APP的核心功能,这个项目会长期进行更新。

技术栈:

  • 传说中的VUE全家桶(vue vue-router vuex)
  • axios
  • Muse-UI(一个基于Vue2.x的material design 风格UI框架)

截图

bilibili-vue

Github:github.com/lybenson/bi…

bilibili-vue基于vue3 + vuex + vite + stylus + nginx+koa2

截图