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，第一时间阅读最新文章，会优先两天发表新文章。关注后私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省很多钱！