优质开源项目100个

目录

使用 Vue 的好处

开源项目100个

该框架非常小。约为18–21KB；

Vue 支持用基于组件的方法来构建 Web 应用；

详细的文档。这对于初学者来说很容易上手；

易于理解。由于其结构简单，你可以轻松地把 Vue.js 添加到自己的 Web 项目里。它凭借定义良好的体系结构来保存你的数据。生命周期方法和自定义方法是分开的；

轻松的集成。你可以通过 CDN 来轻松添加 Vue.js，不依赖 Node.js 和 npm 环境就可以用。完全可以把它当成替代 jQuery 的绝佳选择；

出色的工具。 通过 Vue CLI ，你可以使用内置的路由、状态存储、Lint、单元测试、CSS预处理器、Typescript、PWA 等来启动新项目。此外，Vue CLI 还提供了用于管理项目的UI。

tag：vue javascript components

star：15.8k

link：https://github.com/ElemeFE/element

简介

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。通过基础的 24 分栏，迅速简便地创建布局。

官网地址：http://element.eleme.io/

tag：vue

star：10.4k

link：https://github.com/bailicangdu/vue2-elm

简介

初学vue时曾在网上搜索vue的实战项目源码，无奈大部分都是简单的demo，对于深究vue没有太大的帮助，剩下的一些大部分都是像音乐播放器之类的展示型项目，交互没有预期那么复杂。但我们实际在工作中，经常会遇到有购物车的项目，这类项目因为涉及到money，所以对逻辑严谨度要求高，页面之间交互复杂，又会伴随着登录、注册、用户信息等等，常常会让我们很头疼。既然还没人用vue写过这样的项目，那不如我来写，开源出来对能看到的人也会有帮助。

此项目大大小小共 45 个页面，涉及注册、登录、商品展示、购物车、下单等等，是一个完整的流程。因为利用业余时间来做，年前就开始写，又跨个年，周期有点长，项目从零布局到完成共用了2个多月的时间，目前项目已经完成，正在进行一些性能的优化，增加详细的注释。

技术栈

vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg

目标功能

定位功能 -- 完成

选择城市 -- 完成

搜索地址 -- 完成

展示所选地址附近商家列表 -- 完成

搜索美食，餐馆 -- 完成

根据距离、销量、评分、特色菜、配送方式等进行排序和筛选 -- 完成

餐馆食品列表页 -- 完成

购物车功能 -- 完成

店铺评价页面 -- 完成

单个食品详情页面 -- 完成

商家详情页 -- 完成

登录、注册 -- 完成

修改密码 -- 完成

个人中心 -- 完成

发送短信、语音验证 -- 完成

下单功能 -- 完成 

订单列表 -- 完成

订单详情 -- 完成

下载App -- 完成

添加、删除、修改收货地址 -- 完成

帐户信息 -- 完成

服务中心 -- 完成

红包 -- 完成

上传头像 -- 完成

tag：vux weui vue vue-components

star：8.9k

link：https://github.com/airyland/vux

简介

Vux（读音 [v'ju:z]，同views）是基于 WeUI 和 Vue(2.x) 开发的移动端 UI 组件库，主要服务于微信页面。

基于 webpack+vue-loader+vux 可以快速开发移动端页面，配合 vux-loader 方便你在 WeUI 的基础上定制需要的样式。

vux-loader 保证了组件按需使用，因此不用担心最终打包了整个 vux 的组件库代码。

vux 并不完全依赖于 WeUI，但是尽量保持整体UI样式接近 WeUI 的设计规范。最初目标是创建一个易用，实用，美观的移动端UI组件库，现在离理想状态还有不少距离，因此需要大家及时反馈问题及贡献代码。

即使你不使用 vux 的代码, 但能从源码得到一些参考那么也是件让人高兴的事情。

官网：https://vux.li/

tag：vue javascript components ui-design vue-componentsui-kit

star：8.3k

link：https://github.com/iview/iview

简介

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

特性：

高质量、功能丰富

友好的 API ，自由灵活地使用空间

细致、漂亮的 UI

事无巨细的文档

可自定义主题

官网：https://www.iviewui.com/

tag：vue mobile component vue-componentsui-kit

star：7.2k

link：https://github.com/ElemeFE/mint-ui

简介

基于 Vue.js 的移动端组件库。

 特性：

Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

官网：Mint UI

star：5.5k

link：https://github.com/vue-bulma/vue-admin

简介

一个基于 Vue 2.0 和 Bulma 0.3 的 后台管理框架。

特性：

基于 Vue 2.0 和 Bulma 0.3 技术

响应式和弹性布局

多种图表类型

丰富的组件或参见 vue-bulma

基于优秀的第三方库

官网：vuebulma.com - 

tag：muse-ui material vue vuejs2 vue2

star：4.3k

link：https://github.com/museui/muse-ui

简介

基于 Vue 2.0 和 Material Design 的 UI 组件库。

特性：

多功能组件，使用无忧

自定义主题文件，更易扩展

基于 Vue 2.0，开发更加快速

官网：Muse-UI

tag：vue-material javascript vue material material-design

star：3.9k

link：https://github.com/vuematerial/vue-material

简介

Vue Material is lightweight framework built exactly according to the Material Design specs.

It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to all modern Web Browsers through Vue 2.

Build powerful and well-designed web apps that can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.

官网：https://vuematerial.github.io

tag：vue-admin vue admin element vuex 

star：3.6k

link：https://github.com/PanJiaChen/vue-element-admin

简介

这半年来一直在用 vue 写管理后台，目前后台已经有百来个个页面，十几种权限，但维护成本依然很低，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用 vue + element + axios 由 webpack2 打包.由于是个人项目，所以数据请求都是用了 mockjs 模拟。注意：在次项目基础上改造开发时请移除mock文件。 写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:

手摸手，带你用 vue 撸后台 系列一(基础篇)

手摸手，带你用 vue 撸后台 系列二(登录权限篇)

手摸手，带你用 vue 撸后台 系列三 (实战篇)

手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)

手摸手，带你封装一个 vue component

功能

登录/注销

权限验证

侧边栏

面包屑

富文本编辑器

Markdown编辑器

JSON编辑器

列表拖拽

plitPane

Dropzone

Sticky

CountTo

echarts图表

401，404错误页面

错误日志

导出excel

table example

动态table example

拖拽table example

内联编辑table example

form example

多环境发布

dashboard

二次登录

动态侧边栏（支持多级路由）

mock数据

cache tabs example

screenfull

markdown2html

views-tab

tag：css design vue gradients

star：3k

link：https://github.com/ghosh/uiGradients

简介

This is an effort to give back to the community, by the community. Hopefully this will help you draw inspiration and serve as a resource for picking gradients for your own projects.

官网：uiGradients - Beautiful colored gradient

Vuexy Admin - https://github.com/puikinsh/vuexy

Vuetify - https://github.com/vuetifyjs/vuetify

Nuxt.js - https://github.com/nuxt/nuxt.js

VuePress - https://github.com/vuejs/vuepress

Quasar Framework - https://github.com/quasarframework/quasar

Vuesax - https://github.com/lusaxweb/vuesax

Vue.js 2.0 UI Toolkit for Web - https://github.com/element-plus/element-plus

Ant Design of Vue - https://github.com/vueComponent/ant-design-vue

Vue Material - https://github.com/vuematerial/vue-material

V-charts - https://github.com/ElemeFE/v-charts

Rocker Admin Dashboard - https://github.com/themeselection/rocker-admin

CoreUI for Vue.js - GitHub - coreui/coreui-free-vue-admin-template: Open source admin template based on Bootstrap 5 and Vue 3

Tailwind Starter Kit - https://github.com/creativetimofficial/tailwind-starter-kit

Vue Testing Library - https://github.com/testing-library/vue-testing-library

Vue MultiSelect Dropdown Component - https://github.com/shentao/vue-multiselect

vue-argon-dashboard - https://github.com/creativetimofficial/vue-argon-dashboard

Vue Datasource - https://github.com/coderdiaz/vue-datasource

vue-chartjs - https://github.com/apertureless/vue-chartjs

Vuejs Datepicker Plugin - https://github.com/charliekassel/vuejs-datepicker

Vue CLI 3 Plugin for Firebase - https://github.com/posva/vue-cli-plugin-firebase

Vue.js 2 CRUD Application - https://github.com/misterGF/CoPilot

Vue.js JWT Authentication with Vuex and Vue Router - https://github.com/davellanedam/vue-spa-jwt-auth

Vue.js + Firebase Realtime Database - https://github.com/firebase/firebaseui-web-vue

Vuetiful Project Boilerplate - https://github.com/vuetifyjs/vuetifyjs.com/tree/master/src

Vue.js & Bootstrap 4 Admin Dashboard - https://github.com/vue-bulma/vue-admin

Vue.js 2 & Bootstrap 4 UI Framework - https://github.com/bootstrap-vue/bootstrap-vue

Vue.js 2 Tooling for Chrome Developer Tools - https://github.com/vuejs/vue-devtools

Vue.js 2 Image File Upload Component - https://github.com/lian-yue/vue-upload-component

Vue.js 2 Tooltip Directive - https://github.com/Akryum/v-tooltip

Simple Vue.js Modal Window Component - https://github.com/euvl/vue-js-modal

Vue.js Toast Notification Plugin - https://github.com/shakee93/vue-toasted

Vue.js 2 Internationalization Plugin - https://github.com/kazupon/vue-i18n

Vue.js Drag & Drop Component based on Sortable.js - https://github.com/SortableJS/Vue.Draggable

Vue.js 2 Infinite Scroll Directive - https://github.com/ElemeFE/vue-infinite-scroll

Vue.js 2 Grid Component - https://github.com/vitogit/vue-grid

Vue.js 2 Video Player Component - https://github.com/surmon-china/vue-video-player

Vue.js 2 Editor Component - https://github.com/surmon-china/vue-quill-editor

Vue.js 2 QR Code Generator Component - https://github.com/xkeshi/vue-qrcode

Vue.js 2 Color Picker Component - https://github.com/xiaokaike/vue-color

Vue.js 2 Draggable & Resizable Component - https://github.com/mauricius/vue-drag-resize

Vue.js 2 Date Range Picker Component - https://github.com/daterangepicker/daterangepicker

Vue.js 2 Smooth Scroll Directive - https://github.com/Yuliang-Lee/vue-smoothscroll

Vue.js 2 Google Maps Component - https://github.com/xkjyeah/vue-google-maps

Vue.js 2 Slider Component - https://github.com/NightCatSama/vue-slider-component

Vue.js 2 Loading Spinner Component - https://github.com/BiYuqi/vue-spinner-component

Vue.js 2 Notification Plugin - https://github.com/euvl/vue-notification

Vue.js 2 Barcode Generator Component - https://github.com