『壹』 vue2.0項目上線後，進去後變成如圖所視，刷新沒用，必須關掉移動端在進去才有用，怎麼回事
一、前言
之前我們通過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，然後輸入命令：
npm i element-ui -S
靜靜的等著下載好這個組件庫就好了。然後我們將組件引入vue組件中，並對組件的結構進行重構，如圖：
這樣就可以將一些花哨的元素添加進去了。
2).Ant Design Vue
旨在於開發後台管理系統界面，如下：
npm install iview --save
安裝好了之後還是引入它，然後使用，如圖：
可以看到，我們可以同時使用多個組件庫。
3).iview
主要用於後端界面的開發，如下：
npm install iview --save
除此之外，iview weapp也是一款不錯的ui框架，不過它主要用於微信小程序開發。
2.移動端組件 1).vuetify
最先將它是因為他不僅支持移動端而且還支持pc端，做到了多端兼容，而且無需寫css就能實現非常美觀的界面。首先下載，如下：
npm install --save vuetify
2).vant
下載安裝，如下：
npm i vant -S
3).Mint UI
也是餓了么前端團隊開發的基於移動端的組件庫，首先來下載安裝，如圖：
npm i mint-ui --save
四、插件
可以看到，我們所使用的每個組件庫要想使用，都必須下載，然後在主入口js文件main.js中導入並使用Vue.use這個方法來將該組件庫加入到項目中去，已達到全局通用的效果。下面開始我們的插件編寫之旅，首先創建一個放置插件的文件夾，然後建立如下文件，如圖：
以上創建的便是一個插件目錄和文件，然後我們來寫單文件vue頁面，如下：
然後我們以模塊化的形式導出單頁面文件，如圖：
緊接著我們注冊剛才寫好的插件，如圖：
最後我們將其應用在app.vue文件中，如圖：
此時咱們寫的插件就能應用到頁面中了，如圖：
五、總結