設(shè)計師的效果能不能實現(xiàn)视粮，得看我能不能找到插件
通常，我們不會去接觸vue底層的東西橙凳，又或者我們突發(fā)奇想需要自己創(chuàng)造一套框架蕾殴〉盒ィ可回頭看看我們使用最多的钓觉，其實還是插件。
插件坚踩，你也可以理解為就是一套方法的集合荡灾，當我們需要調(diào)用它的時候，引入一下就行了瞬铸。
舉個例子批幌，比如說，swiper和elementui嗓节。
一般來說荧缘，我們每個項目都會安裝一大堆的插件。用于處理各種交互效果和邏輯拦宣，但是胜宇，網(wǎng)上能搜到了插件不一定能解決我們所有的問題耀怜。也就是說，我們剩下30%左右的邏輯部分是需要自己處理的桐愉，比如說财破，轉(zhuǎn)化時間，處理字符串等等从诲。
這些東西網(wǎng)上是沒有現(xiàn)成插件的左痢，需要我們自己來寫。此時系洛，如果你每一個組件里面都去定義方法就顯得太low了俊性。
我們需要自己寫一個插件，事半功倍描扯！
稍微復(fù)習一下
一般來說定页，我們自己的js通常會寫成下面的兩種形式：
第一種，聲明多個方法绽诚。這個做法也叫函數(shù)聲明典徊，這樣做的好處是，聲明到全局恩够，你只要引用了它卒落，在頁面任意地方都可以使用。但是同樣的缺點也很明顯蜂桶，容易引起全局污染儡毕，浪費瀏覽器資源。而且當我方法多的時候扑媚，調(diào)用起來很不方便腰湾。
function ljzfc(){
var arr = Array.from(arguments);
return arr.join("");
}
function fgzf (text,fh) {
return text.split(fh)
}
第二種，這是我們最長使用的聲明方式疆股，函數(shù)表達式费坊。目的就是加載了這個js以后，當我需要使用的時候押桃，直接調(diào)用str.xxx()葵萎，就可以返回我需要的內(nèi)容了。并且唱凯，方法封裝在變量內(nèi)部羡忘，不會引起全局污染，也符合模塊化的規(guī)則磕昼。
var str = {
ljzfc:function(){
var arr = Array.from(arguments);
return arr.join("");
},
fgzf:function(text,fh){
return text.split(fh)
}
}
ok卷雕，ok。我們接下來票从，就要把我們自己的方法定義到vue上去使用漫雕。
初步嘗試
我首先把js放到了項目文件夾中滨嘱，然后在main.js中引入。
//加載自己的js ----------------------------------------
import myjs from './js/require1.js';
//使用例子
console.log(myjs.str.ljzfc("你","好","嗎")); //連接字符串
調(diào)用起來是完全沒有問題的浸间。
但是太雨，又好像哪里不太對？是的魁蒜，這樣我們僅僅是引入了一個js囊扳，并沒有把它形成一個js的插件。
我們來看看一個標準的js插件的調(diào)用形式：
this.$message('暫無更多教程兜看！');
為什么他這個可以直接從this上面調(diào)用锥咸？？细移？
個人理解他的方法應(yīng)該是被定義到全局的vue對象上面了搏予，這里的this應(yīng)該指的就是vue本身！
如果你看過龍哥前面的教程弧轧，你應(yīng)該知道雪侥，當我們引入的插件，是一個對象的時候劣针，應(yīng)該使用：
Vue.use()
use方法校镐，可以把一個符合vue標準的對象加載到vue本體上亿扁。
書寫規(guī)范
首先給我們的main.js下面增加一行捺典。
//加載自己的js ----------------------------------------
import MyPlugin from './js/require1.js';
Vue.use(MyPlugin)
然后打開我們自己的js文件，按照下面的方式書寫：
// 第一步:聲明一個空對象,這個對象就是我們的插件模塊.
var MyPlugin = {};
// 第二步:必須聲明這個模塊的install方法,vue就是通過這個方法把插件內(nèi)部的資源定義到自身上的.
MyPlugin.install = function (Vue, options) {
// 定義到prototype上,以$開頭,防止重復(fù)定義和污染
Vue.prototype.$dangyunlong = str;
}
// 我們自己的方法定義在這里
var str = {
ljzfc:function(){
var arr = Array.from(arguments);
return arr.join("");
},
fgzf:function(text,fh){
return text.split(fh)
},
}
// 最后把我們的插件暴露出去給全局使用
export default MyPlugin;
最后在頁面中調(diào)用的時候：
console.log("插件打印開始---------------------------");
console.log(this.$dangyunlong.ljzfc("你","好","嗎"));
到此我們的插件已經(jīng)跟vue融為一體从祝！其實插件本身還支持更多參數(shù)和寫法襟己，請各位同學自行研究吧娃兽！
