一、前言
之前我们通过nodejs并利用vuecli来创建vue项目，非常方便的就实现了前后端一体化的操作。不过在项目开发的时候为了提高开发效率我们需要依赖于一些插件帮助我们提高开发效率，那么今天我们就来介绍一些优秀的vue插件并且学会如何制作属于自己的插件。
二、单文件组件
在我们之前讲到的 nodejs轻松创建第一个vue应用中篇，这篇文章的时候，我们创建了一个vue的原生应用，效果如图所示：
那么现在我们需要把默认的页面换成其它的vue组件来显示，首先我们创建一个几个js文件，如图：
然后创建一个vue组件并设置组件的属性，如图：
然后我们将组件添加到入口组件中，如图：
此时的test组件就能被应用到该项目的页面中了，我们来启动一下这个应用，如图：
此时就实现了页面内容的更新。其实这里是相当于把我们的vue做成了一个单文件组件，之前我们在学习vue的时候，一直都是依赖于html文件存在的，不过如果你是想要在nodejs上运行的话，还可以使用单文件组件，当然，单文件组件是我们极力提倡的写法。
三、UI组件
我们都知道，前端发展到现在，对于用户的体验和视觉感受都非常重视，因此就出现了很多的UI组件库，比如Elementui、vant、iview、Vuetify、 Mint UI、ant-design-vue等，下面我们将以pc端和移动端为主，分别介绍两款不同的UI组件库给大家认识并且简单的使用一下，来领略下UI组件的魅力吧。
1.PC端UI组件
1).ElementUi
由饿了么前端团队开源的UI框架，可以说是目前为止最好的桌面端UI组件库了，不仅界面美观，而且极易上手，下面我们来安装一下，首先在项目目录下打开cmd，然后输入命令：
<pre spellcheck="false" lang="cmd" cid="n24" mdtype="fences">npm i element-ui -S</pre>
静静的等着下载好这个组件库就好了。然后我们将组件引入vue组件中，并对组件的结构进行重构，如图：
这样就可以将一些花哨的元素添加进去了。
2).Ant Design Vue
旨在于开发后台管理系统界面，如下：
<pre spellcheck="false" lang="cmd" cid="n31" mdtype="fences">npm install iview --save</pre>
安装好了之后还是引入它，然后使用，如图：
可以看到，我们可以同时使用多个组件库。
3).iview
主要用于后端界面的开发，如下：
<pre spellcheck="false" lang="cmd" cid="n37" mdtype="fences">npm install iview --save</pre>
除此之外，iview weapp也是一款不错的ui框架，不过它主要用于微信小程序开发。
2.移动端组件
1).vuetify
最先将它是因为他不仅支持移动端而且还支持pc端，做到了多端兼容，而且无需写css就能实现非常美观的界面。首先下载，如下：
<pre spellcheck="false" lang="cmd" cid="n43" mdtype="fences">npm install --save vuetify</pre>
2).vant
下载安装，如下：
<pre spellcheck="false" lang="cmd" cid="n47" mdtype="fences">npm i vant -S</pre>
3).Mint UI
也是饿了么前端团队开发的基于移动端的组件库，首先来下载安装，如图：
<pre spellcheck="false" lang="" cid="n51" mdtype="fences">npm i mint-ui --save</pre>
四、插件
可以看到，我们所使用的每个组件库要想使用，都必须下载，然后在主入口js文件main.js中导入并使用Vue.use这个方法来将该组件库加入到项目中去，已达到全局通用的效果。下面开始我们的插件编写之旅，首先创建一个放置插件的文件夹，然后建立如下文件，如图：
以上创建的便是一个插件目录和文件，然后我们来写单文件vue页面，如下：
然后我们以模块化的形式导出单页面文件，如图：
紧接着我们注册刚才写好的插件，如图：
最后我们将其应用在app.vue文件中，如图：
此时咱们写的插件就能应用到页面中了，如图：
五、总结
本文主要带大家了解了下关于组件库的使用和插件的制作，其实我们可以看出，插件就是组件库，就是一个个组件形成的仓库，并没有什么独特之处，认真做一遍你就能了解，想要获取本文源码关注公众号“简易编程网”后台回复 “插件"即可。