Vue（二十七）當前GitHub上排名前十的熱門Vue項目（轉載）

原文地址：https://my.oschina.net/liuyuantao/blog/1510726

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/

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/