Vue经典开源项目汇总

1,574 阅读17分钟

Vue.js(读音 /vjuː/, 类似于 view)是一套用于构建用户界面的渐进式框架,主要用于快速的构建前端界面,与其它大型的前端框架不同,Vue 被设计为可以自底向上逐层应用。

相比 Angular.js 来说,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,是初创项目的前端首选框架。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

正式因为 Vue.js 具有易用、灵活、高性能和渐进式等特点, 才使得 Vue.js 成为当前三大流行的 JavaScript 框架之一。

工欲善其事,必先利其器。Vue 的快速发展和崛起也得益于其快速发展的社区环境。为了实现快速的迭代,Vue 社区涌现出了一大批的开源项目,借助这些开源项目,我们可以实现快速的迭代升级。

UI 组件

element ★34,784 - 饿了么出品的基于 Vue2 的 web UI 工具套件
storybook ★33,503 - 响应式 UI 开发及测试环境
Vux ★15,061 - 基于 Vue 和 WeUI 的组件库
mint-ui ★13,381 - Vue 2 的移动 UI 元素
iview ★19,629 - 基于 Vuejs 的开源 UI 组件库
Keen-UI ★3,615 - 轻量级的 UI 组件合集
vue-material ★7,542 - 实现 Material 效果的 UI 库
muse-ui ★7,077 - 三端样式一致的响应式 UI 库
vuetify ★16,345 - 为移动而生的 Vue JS 2 组件框架
vonic ★3,009 - 快速构建移动端单页应用
eme ★1,772 - 优雅的 Markdown 编辑器
vue-multiselect ★3,877 - Vue.js 选择框解决方案
vue-table ★1,691 - 简化数据表格
VueCircleMenu ★1,075 - 漂亮的 vue 圆环菜单
vue-chat ★1,255 - vuejs 和 vuex 及 webpack 的聊天示例
radon-ui ★885 - 快速开发产品的 Vue 组件库
vue-waterfall ★1,447 - Vue.js 的瀑布布局组件
vue-carbon ★909 - 基于 vue 开发 MD 风格的移动端组件库
vue-beauty ★1,871 - 由 vue 和 ant design 创建的优美 UI 组件
vue-blu ★1,449 - 帮助你轻松创建 web 应用
vueAdmin ★4,836 - 基于 vuejs2 和 element 的简单的管理员模板
vue-syntax-highlight ★1,202 - Sublime Text 语法高亮
vue-infinite-scroll ★1,886 - VueJS 的无限滚动指令
Vue.Draggable ★6,459 - 实现拖放和视图模型数组同步
vue-awesome-swiper ★5,817 - vue.js 触摸滑动组件
vue-calendar ★1,081 - 日期选择插件
bootstrap-vue ★7,757 - 应用于 Vuejs2 的 Twitter 的 Bootstrap 4 组件
vue-swipe ★866 - VueJS 触摸滑块
vue-amap ★1,869 - 基于 Vue 2 和高德地图的地图组件
vue-chartjs ★2,661 - vue 中的 Chartjs 的封装
vue-datepicker ★681 - 日历和日期选择组件
vue-google-maps ★493 - 带有双向数据绑定 Google 地图组件
vue-progressbar ★936 - vue 轻量级进度条
vue-picture-input ★717 - 移动友好的图片文件输入组件
vue-infinite-loading ★1,524 - VueJS 的无限滚动插件
vue-upload-component ★1,395 - Vuejs 文件上传组件
vue-datetime-picker ★316 - 日期时间选择控件
vue-scroller ★1,453 - Vonic UI 的功能性组件
vue2-calendar ★403 - 支持 lunar 和日期事件的日期选择器
vue-video-player ★1,734 - VueJS 视频及直播播放器
vue-fullcalendar ★963 - 基于 vue.js 的全日历组件
rubik ★276 - 基于 Vuejs2 的开源 UI 组件库
VueStar ★637 - 带星星动画的 vue 点赞按钮
vue-mugen-scroll ★457 - 无限滚动组件
mint-loadmore ★316 - VueJS 的双向下拉刷新组件
vue-tables-2 ★1,064 - 显示数据的 bootstrap 样式网格
vue-virtual-scroller ★1,672 - 带任意数目数据的顺畅的滚动
DataVisualization ★985 - 数据可视化
vue-quill-editor ★3,533 - 基于 Quill 适用于 Vue2 的富文本编辑器
Vueditor ★506 - 所见即所得的编辑器
vue-html5-editor ★761 - html5 所见即所得编辑器
vue-msgbox ★231 - vuejs 的消息框
vue-slider ★646 - vue 滑动组件
vue-core-image-upload ★1,128 - 轻量级的 vue 上传插件
vue-slide ★212 - vue 轻量级滑动组件
vue-lazyload-img ★229 - 移动优化的 vue 图片懒加载插件
vue-drag-and-drop-list ★305 - 创建排序列表的 Vue 指令
vue-progressive-image ★510 - Vue 的渐进图像加载插件
vuwe ★215 - 基于微信 WeUI 所开发的专用于 Vue2 的组件库
vue-dropzone ★1,159 - 用于文件上传的 Vue 组件
vue-charts ★357 - 轻松渲染一个图表
vue-swiper ★269 - 易于使用的滑块组件
vue-images ★195 - 显示一组图片的 lightbox 组件
vue-carousel-3d ★449 - VueJS 的 3D 轮播组件
vue-typer ★428 - 模拟用户输入选择和删除文本的 Vue 组件
vue-impression ★199 - 移动 Vuejs2 UI 元素
vue-datatable ★120 - 使用 Vuejs 创建的 DataTableView
vue-instant ★313 - 轻松创建自动提示的自定义搜索控件
vue-dragging ★455 - 使元素可以拖拽
vue-slider-component ★1,176 - 在 vue1 和 vue2 中使用滑块
vue2-loading-bar ★225 - 最简单的仿 Youtube 加载条视图
vue-datepicker ★107 - 漂亮的 Vue 日期选择器组件
vue-video ★244 - Vue.js 的 HTML5 视频播放器
vue-image-crop-upload ★1,124 - vue 图片剪裁上传组件
vue-tooltip ★867 - 带绑定信息提示的提示工具
vue-highcharts ★339 - HighCharts 组件
vue-touch-ripple ★320 - vuejs 的触摸 ripple 组件
vue-datasource ★389 - 创建 VueJS 动态表格
vue2-timepicker ★246 - 下拉时间选择器
vue-date-picker ★86 - VueJS 日期选择器组件
vue-scrollbar ★104 - 最简单的滚动区域组件
vue-quill ★99 - vue 组件构建 quill 编辑器
vue-google-signin-button ★180 - 导入谷歌登录按钮
vue-svgicon ★517 - 创建 svg 图标组件的工具
vue-baidu-map ★1,090 - 基于 Vue 2 的百度地图组件库
vue-social-sharing ★571 - 社交分享组件
vue2-editor ★1,304 - HTML 编辑器
vue-easy-slider ★230 - Vue 2.x 的滑块组件
datepicker ★111 - 基于 flatpickr 的时间选择组件
vue-chart ★47 - 强大的高速的 vue 图表解析
vue-music-master ★65 - vue 手机端网页音乐播放器
handsontable ★44 - 网页表格组件
vue-simplemde ★553 - VueJS 的 Markdown 编辑器组件
vue-popup-mixin ★70 - 用于管理弹出框的遮盖层
cubeex ★85 - 包含一套完整的移动 UI
vue-fullcalendar ★405 - vue FullCalendar 封装
vue-morris ★148 - Vuejs 组件封装 Morrisjs 库
we-vue ★356 - Vue2 及 weui1 开发的组件
vue-radial-progress ★206 - Vue.js 放射性进度条组件
vue-slick ★349 - 实现流畅轮播框的 vue 组件
vue-pull-to-refresh ★106 - Vue2 的上拉下拉
vue-side-nav ★50 - 响应式的侧边导航
mint-indicator ★71 - VueJS 移动加载指示器插件
vue-touch-keyboard ★153 - VueJS 虚拟键盘组件
vue-chartkick ★444 - VueJS 一行代码实现优美图表
vue-ztree ★127- 用 vue 写的树层级组件
vue-m-carousel ★50 - vue 移动端轮播组件
vue-datepicker-simple ★59 - 基于 vue 的日期选择器
vue-tabs ★123 - 多 tab 页轻型框架
vue-city ★98- 城市选择器

脚手架

vuex ★18,763 - 专为 Vue.js 应用程序开发的状态管理模式
vuelidate ★3,336 - 简单轻量级的基于模块的 Vue.js 验证
qingcheng ★864 - qingcheng 主题
vue-desktop ★542 - 创建管理面板网站的 UI 库
vue-meta ★2,215 - 管理 app 的 meta 信息
vue-axios ★1,350 - 将 axios 整合到 VueJS 的封装
vue-svg-icon ★473 - vue2 的可变彩色 svg 图标方案
avoriaz ★776 - VueJS 测试实用工具库
vue-bootstrap-modal ★149 - vue 的 Bootstrap 样式组件
vuep ★557 - 用实时编辑和预览来渲染 Vue 组件
vue-online ★115 - reactive 的在线和离线组件
vue-lazy-render ★201 - 用于 Vue 组件的延迟渲染
vue-password-strength-meter ★299 - 交互式密码强度计
element-admin ★294 - 支持 vuecli 的 Element UI 的后台模板
vue-electron ★186 - 将选择的 API 封装到 Vue 对象中的插件
cleave ★95 - 基于 cleave.js 的 Cleave 组件
vue-events ★181 - 简化事件的 VueJS 插件
vue-shortkey ★440 - 应用于 Vue.js 的 Vue-ShortKey 插件
vue-cordova ★276 - Cordova 的 VueJS 插件
vue-router-transition ★105 - 页面过渡插件
vue-gesture ★134 - VueJS 的手势事件插件
http-vue-loader ★456 - 从 html 及 js 环境加载 vue 文件
vue-qart ★259 - 用于 qartjs 的 Vue2 指令
vue-websocket ★391 - VueJS 的 Websocket 插件
vue-local-storage ★416 - 具有类型支持的 Vuejs 本地储存插件
vue-bus ★220 - VueJS 的事件总线
vue-reactive-storage ★63 - vue 插件的 Reactive 层
vue-notifications ★400 - 非阻塞通知库
vue-lazy-component ★32 - 懒加载组件或者元素的 Vue 指令
vue-observe-visibility ★442 - 当元素在页面上可见或隐藏时检测
vuex-i18n ★557 - 定位插件
Vue.resize ★186 - 检测 HTML 调整大小事件的 vue 指令
vuex-shared-mutations ★311 - 分享某种 Vuex mutations

开发框架

electron-vue ★8,534 - Electron 及 VueJS 快速启动样板
vue-2.0-boilerplate ★771 - Vue2 单页应用样板 ​
vue-spa-template ★623 - 前后端分离后的单页应用开发
Framework7-Vue ★646 - VueJS 与 Framework7 结合
vue-bulma ★373 - 轻量级高性能 MVVM Admin UI 框架
vue-webgulp ★140 - 仿 VueJS Vue loader 示例

服务器插件

nuxt.js ★17,821 - 用于服务器渲染 Vue app 的最小化框架
express-vue ★976 - 简单的使用服务器端渲染 vue.js
vue-ssr ★151 - 非常简单的 VueJS 服务器端渲染模板
vue-easy-renderer ★56 - Nodejs 服务端渲染

辅助工具

DejaVue ★764 - Vuejs 可视化及压力测试
vue-play ★932 - 展示 Vue 组件的最小化框架
vscode-VueHelper ★330 - 目前 vscode 最好的 vue 代码提示插件
vue-generate-component ★149 - 轻松生成 Vue js 组件的 CLI 工具
vue-multipage-cli ★77 - 简单的多页 CLI

示例

koel ★9,902 - 基于网络的个人音频流媒体服务
vue2-happyfri ★6,351 - vue2 + vuex 整合项目
pagekit ★5,035 - 轻量级的 CMS 建站系统
vuedo ★1,925 - 博客平台
jackblog-vue ★1,689 - 个人博客系统
vue-cnode ★1,094 - 重写 vue 版 cnode 社区
CMS-of-Blog ★670 - 博客内容管理器
rss-reader ★883 - 简单的 rss 阅读器
vue-ghpages-blog ★401 - 依赖 GitHub Pages 无需本地生成的静态博客
vue-blog ★768 - 使用 Vue2.0 和 Vuex 的 vue-blog
Vue-cnodejs ★3,035 - 基于 vue 重写 Cnodejs.org 的 webapp
NeteaseCloudWebApp ★2,117 - 高仿网易云音乐的 webapp
vue-zhihu-daily ★1,246 - 知乎日报 with Vuejs
vue-wechat ★1,436 - vue.js 开发微信 app 界面
vue2-demo ★1,650 - 从零构建 vue2 + vue-router + vuex 开发环境
eleme ★1,532 - 高仿饿了么 app 商家详情
vue-demo ★1,099 - vue 简易留言板
bilibili-vue ★1,436 - 全栈式开发 bilibili 首页
spa-starter-kit ★916 - 单页应用启动套件
VueDemo_Sell_Eleme ★1,235 - Vue2 高仿饿了么外卖平台
vue-music ★1,251 - Vue 音乐搜索播放
douban ★1,989 - 基于 vue 全家桶的精致豆瓣 DEMO
vue-Meizi ★1,193 - vue 最新实战项目
maizuo ★759 - vue/vuex/redux 仿卖座网
vue-WeChat ★1,328 - 基于 Vue2 高仿微信 App 的单页应用
vue-demo-kugou ★896 - vuejs 仿写酷狗音乐 webapp
vue2-manage ★5,403 - 基于 vue + element-ui 的后台管理系统
zhihudaily-vue ★629 - 知乎日报 web 版
vue-163-music ★747 - vue 仿网易云音乐客户端版
vue-axios-github ★1,954 - 登录拦截登出功能
vue-shopping ★550 - 蘑菇街移动端
vue2.0-taopiaopiao ★912 - vue2.0 与 express 构建淘票票页面
xyy-vue ★1,187 - 大学生交流平台

vue2.x-douban ★714 - Vue2 实现简易豆瓣电影 webApp
vue2-MiniQQ ★625 - 基于 Vue2 实现的仿手机 QQ 单页面应用
mi-by-vue ★387 - VueJS 仿小米官网
daily-zhihu ★500 - 基于 Vue2 的知乎日报单页应用
node-vue-server-webpack ★285 - Node.js+Vue.js+webpack 快速开发框架
beauty ★245 - 豆瓣美女 clone
vue-adminLte-vue-router ★243 - vue 和 adminLte 整合应用
vue-fis3 ★217 - 流行开源工具集成 demo
notepad ★216 - 本地存储的记事本
vue-demo-maizuo ★210 - 使用 Vue2 全家桶仿制卖座电影
Pixel-Web ★198 - 一个 Vue 微博客户端
netease_yanxuan ★386 - vue 版网易严选
tmdb-app ★194 - TMDbVueJS 应用
vue-express-mongodb ★189 - 简单的前后端分离案例
vue-zhihudaily ★187 - 知乎日报 Web 版本
Vdo ★179 - VueJS 与 MD 重构豆瓣
vue-blog ★171 - 单用户博客
Wuji ★168 - 吾记网页版
hello-vue-django ★160 - 使用带有 Django 的 vuejs 的样板项目
Zhihu-Daily-Vue.js ★157 - Vuejs 单页网页应用
tencent-sports ★154 - Vue 全家桶仿腾讯体育
gouyan-movie-vue ★151 - 基于 vue 的在线电影影讯网站
x-blog ★145 - 开源的个人 blog 项目
vue-musicApp ★132 - 使用 vue 全家桶制作的音乐播放器
vue-cnode ★131 - vue 单页应用 demo
webpack-vue-vueRouter ★130 - webpack 及 vue 开发的简单项目实例
vue-koa-demo ★128 - 使用 Vue2 和 Koa1 的全栈 demo
vueBlog ★127 - 前后端分离博客
websocket_chat ★127 - 基于 vue 和 websocket 的多人在线聊天室
houtai ★125 - 基于 vue 和 Element 的后台管理系统
vue-toutiao ★121 - vuejs 高仿今日头条移动端
vue-cnode ★121 - 开源的 CNode 社区
vue-mini-shop ★121 - VueJS 在线商店
photoShare ★120 - 基于图片分享的社交平台
iview2-management-system ★119 - 后台管理系统解决方案简单示例
doubanMovie ★119 - 豆瓣电影展示
vue-zhihu-daily ★111 - 基于 Vue 全家桶开发的知乎日报
Vue-News ★107 - 基于 vue 全家桶的仿知乎日报单页应用
douban-movie ★107 - 仿豆瓣电影 wap 端
generator-loopback-vue ★104 - 典型前后端分离项目模板
vue-quasar-admin-example ★99 - 将 Quasar 和 VueJS 应用于 SPA 项目
vue-zhihudaily-2.0 ★97 - 使用 Vue2.0+vue-router+vuex 创建的 zhihudaily
vue-todos ★95 - vue 最新实战项目教程
vue-music ★91 - 网易云音乐 Demo
vue-qqmusic ★90 - Vue 全家桶+Mint-Ui 打造高仿 QQMusic
vue2.x-Cnode ★88 - 基于 vue 全家桶的 Cnode 社区
vue-ruby-china ★86 - VueJS 框架搭建的 rubychina 平台
doubanMovie-SSR ★85 - Vue 豆瓣电影服务端渲染
vue-jd ★76 - 京东移动 web 商城
vue-nReader ★73 - 使用 vue2.0 + vue-router + vuex 的一个多页面小说阅读 webapp
VueBlog ★73 - 前后端分离的个人博客
Zhihu_Daily ★73 - 基于 Vue 和 Nodejs 的 Web 单页应用
vue-koa2-login ★67 - 使用 VueJS & NodeJS 实现的登录注册
webApp ★64 - Vue2 的移动端 webApp 音乐播放器
vue-trip ★64 - vue2 做的出行 webapp
seeMusic ★63 - 跨平台云音乐播放器
github-explorer ★63 - 寻找最有趣的 GitHub 库
vue-cli-multipage-bootstrap ★60 - 将 vue 官方在线示例整合到组件中
vue-XiaoMi-Shop ★59 - 高仿小米商城的项目
Vue-NetEaseCloudMusic ★59 - 模仿 IOS 版网易云音乐的手机网站
life-app-vue ★59 - 使用 vue2 完成多功能集合到小 webapp
doubanApp ★55 - 用 vue2 实现仿豆瓣 app
ios7-vue ★52 - 使用 vue2.0 vue-router vuex 模拟 ios7
canvas-vue ★50 - 一个 Vue+Cnavas 酷炫后台管理
vue-bushishiren ★49 - 不是诗人应用
vue-ssr-boilerplate ★48 - 精简版的 ofvue-hackernews-2
vuecommunity ★47 - vue.js 中文社区
vue-music163 ★47 - 音乐 VueJS 项目
Vue2-MV ★45 - 仿网易云音乐 MV 的 webapp
musiccloudWebapp ★44 - 用 vuejs 仿网易云音乐
cnode-vue ★40 - 基于 vue 和 vue-router 构建的 cnodejs web 网站 SPA
Framework7-VueJS ★38 - 使用移动框架的示例
m-eleme ★37 - 基于 Vue 全家桶仿饿了么移动端 webapp
sls-vuex2-demo ★37 - vuex2 商城购物车 demo
eagles ★36 - 各种组件封装
Todos_Vuejs ★35 - vuejs2 搭建的极简的 todolist
vue-cnode ★35 - 用 Vue 做的 CNode 官网
HyaReader ★35 - 移动友好的阅读器
Vue-Admin ★33 - 基于 Vue2 的 Admin 系统
vue2-hybridapp-haoshiqi ★32 - 实现单页面 webapp 以及 hybridapp
zhihu-daily ★32 - 轻松查看知乎日报内容
gank ★32 - gankio 资源的阅读应用
vue-h5plus ★31 - 前卫的 vue 及 html5plus 跨平台 demo
vue-cnode-mobile ★29 - 搭建 cnode 社区
vue-weather ★26 - 基于 vue.js 2.0 的百度天气应用
vue-user-center ★26 - vuejs 直播类应用 web 端个人中心
zhihu-daily-vue ★22 - 知乎日报
vue-cnode ★22 - 使用 cNode 社区提供的接口
vue-starter ★22 - VueJs 项目的简单启动页
node-vue-fabaocn ★21 - 基于 node 和 vue 实现的移动官网
vue-memo ★20 - 用 vue 写的记事本应用
v-notes ★20 - 简单美观的记事本
vue-flexible-app ★19 - vue 开发的一个简易 app
simply-calculator-vuejs ★19 - 用 VueJS 实现简易计算器
vue-dropload ★19 - 用以测试下拉加载与简单路由
Vuejs-SalePlatform ★19 - vuejs 搭建的售卖平台 demo
vue-shopping-mall ★16 - 基于 Vue.js 2.x 系列 + vue2-router + axios + iview 商城
qqmusic ★13 - QQ 音乐 vue
vue-weather ★12 - VueJS 天气 demo