当前 GitHub 上排名前十的热门 Vue 项目

1. ElemeFE/element

tag：vue javascript components

star：15.8k

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

简介

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

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

示例

基础布局：使用单一分栏创建基础的栅格布局。

2. bailicangdu/vue2-elm

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 -- 完成

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

帐户信息 -- 完成

服务中心 -- 完成

红包 -- 完成

上传头像 -- 完成

项目截图

商铺列表页

餐馆食品列表与购物车

确认订单页

3. airyland/vux

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/

使用案列

4. iview/iview

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/

示例

Grid 栅格

Layout 布局

Color 色彩

Page 分页

DatePicker 日期选择器

5. ElemeFE/mint-ui

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。

官网：http://mint-ui.github.io/#!/en

示例

6. vue-bulma/vue-admin

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
• 基于优秀的第三方库

官网：https://admin.vuebulma.com

示例

7. museui/muse-ui

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，开发更加快速

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

示例

主题

颜色

8.vuematerial/vue-material

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

示例

9. PanJiaChen/vue-element-admin

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

示例

10.ghosh/uiGradients

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.

官网：http://uigradients.com/

示例