10+個很酷的Vue.js組件，模板和demo示例

衆所周知，Vue.js 組件是Vue建立自定義元素的重要功能之一，同時，模板可幫助你避免從頭開始建立網頁設計。總之，這些工具對於但願其開發過程更快，更高效的任何Web開發人員都是必不可少的。

此外，在過去的幾年中，Vue.js 變得很是流行，許多企業將其添加到他們的技術棧中。該框架的優勢是它具備內置的數據綁定和MVC模型（模型、視圖、控制器），與Angular.js和React.js相比，它使配置更加容易。另外，Vue.js的學習曲線很小，與 Angular.js 相比，Vue更易於學習，理解和使用。

知道了這一點，咱們收集了一份Vue.js組件、模板和實驗清單，若是你是一個初學者，能夠幫助你對這個框架的意義有一個概念，若是你是一個Vue.js開發者，也能夠爲你的下一個項目找到一些靈感。

---

BootstrapVue Argon Dashboard PRO

BootstrapVue Argon Dashboard PRO 是BootstrapVue和Vue.js的高級儀表板。這是一種全新產品，它基於咱們從頭開始從新構建的最新框架結構，這種結構旨在使產品更直觀，更具適應性，而且更易於定製。讓Argon以其酷炫的功能給你帶來驚喜，讓你的項目達到一個全新的水平。

Vue White Dashboard

Vue White Dashboard 是一個免費的開源Bootstrap 4和Vue.js Admin儀表板，其中包含大量的組件，這些組件能夠組合在一塊兒並看起來很是漂亮。Vue White儀表板具備16個以上的獨立組件，可以讓你自由選擇和組合。全部組件的顏色均可以不一樣，你可使用Sass文件輕鬆進行修改。

Vue QRcode Reader

Vue QRcode Reader是一組用於檢測和解碼QR(二維碼)碼的Vue.js組件。它使你無需離開瀏覽器便可檢測和解碼QR碼，全部組件都具備響應能力。除此以外，它接近零樣式，所以你可使它們適合你的佈局。使用方法簡單明瞭。

VueJS Expo

VueJS Expo是使用Vue.js框架收集的漂亮的網站，應用程序和實驗。若是你是Vue.js框架的粉絲，那麼這裏多是你得到靈感的地方。展現包括基於VueJS的主題，元素，儀表板等。

Vue Paper Dashboard PRO

Vue Paper Dashboard PRO 是一個基於Bootstrap和Vue構建的漂亮資源，它將幫助你在短期內開始開發儀表盤。Vue Paper Dashboard Pro是Original Paper Dashboard Pro的VueJS移植版本。使用儀表板很是簡單，可是須要具有Javascript，Vue和Vue-Router的基礎知識。

Koel

Koel是一種簡單的基於Web的我的音頻流服務，在客戶端用Vue編寫，在服務器端用Laravel編寫。針對Web開發人員，Koel採用了一些更現代的Web技術——CSS grid，音頻和拖放API等來完成其工做。

Vue Argon Dashboard

Vue Argon Dashboard是Bootstrap 4和Vue.js的儀表板。它是開源的，免費的，而且具備許多組件，能夠幫助你建立出色的網站。Vue Argon儀表板內置了100多個單獨的組件，所以你能夠選擇和組合，由於實現了全部元素，因此從原型化到全功能代碼將節省大量時間。該儀表板附帶了預先構建的示例，所以開發過程是無縫的，從咱們的頁面切換到真實的網站很是容易。

Pagekit

Pagekit是使用Symfony組件和VueJS構建的模塊化，輕量級CMS。不管是我的博客仍是你公司的網站，均可以使用Pagekit來爲網絡建立功能強大的內容，使其在每臺設備上都能完美運行。它具備乾淨直觀的界面，它也有一個很棒的內置市場。

Vue Material Dashboard PRO

Vue Material Dashboard PRO是一個出色的高級管理模板，創建在Vue Material和VueJS之上。它是經過考慮你在儀表板中實際須要的東西而建立的。Vue Material Dashboard PRO包含精選和優化的VueJS插件，一切都旨在相互配合。使用儀表板很是簡單，可是須要具有Javascript，VueJS和Vue Router的基礎知識。

Vue-Color

Vue-Color是一款來自Sketch、Photoshop、Chrome、Github、Twitter、Material Design等的酷炫的采色器。

Vue Material Kit

Vue Material Kit 是基於Vue Material和VueJS構建的使人驚歎的免費開源資源。它將幫助你當即開始開發UI工具包。Vue Material Kit是原始Material Kit的官方VueJS版本。使用UI Kit很是簡單，可是須要Javascript，VueJS和Vue Router的基礎知識。

Retrospectify

Retrospectify 是一個用 Vue 編寫的很棒的工具，用於以數字方式進行敏捷團隊回顧。當與遠程團隊進行回顧時，或者當您但願隨時間跟蹤回顧結果時，這將頗有用。它有三種類型的筆記，你能夠移動筆記或添加點到個別的筆記。

Code Notes

Code Notes 是使用Electron＆Vue.js構建的開發人員的簡單代碼段管理器。使用它，你能夠將多個片斷保存在一個便箋中，按名稱/語言/標籤進行搜索，還能夠管理Github要點。

但願這份清單對您的下一個開發項目有幫助 🙂

---

來源：dev.to/creativetim…，做者：Creative Tim，翻譯：公衆號《前端全棧開發者》

本文首發於公衆號 《前端全棧開發者》 ID：by-zhangbing-dev，第一時間閱讀最新文章，會優先兩天發表新文章。關注後私信回覆：大禮包，送某網精品視頻課程網盤資料，準能爲你節省很多錢！