by yugasun from https://yugasun.com/post/you-may-not-know-vuejs-10.html
本文可全文轉(zhuǎn)載住涉，但需要保留原作者和出處呵萨。
初識插件
雖然 Vue.js 已經(jīng)足夠強(qiáng)大了承桥，但是在實際開發(fā)中足淆，我們還是需要引入各種模塊來實現(xiàn)我們的功能需求尖滚，或者給全局的 Vue 對象添加一些全局功能，而 Vue 插件 就是來幫助我們完成這項工作的。
開發(fā)插件
Vuejs 插件范圍沒有限制薪铜，一般有以下幾種：
- 添加全局方法或者屬性，如：vue-custom-element
- 添加全局資源：指令恩溅、過濾器隔箍、過度等，如： vue-touch
- 通過全局 mixin 方法添加一些組件選項脚乡，如：vue-router
- 添加 Vue 實例方法蜒滩，通過把它們添加到
Vue.prototype上實現(xiàn)。 - 一個庫奶稠，提供自己的 API俯艰，同時提供上面提到的一個或多個功能，如：vue-router
Vuejs 插件應(yīng)當(dāng)有一個公開方法 install锌订，這個方法的第一個參數(shù)是 Vue 構(gòu)造器竹握，第二個參數(shù)是一個可選的配置對象，書寫方式如下：
MyPlugin.install = function(Vue, options) {
// 1. 添加全局方法或?qū)傩? Vue.myGlobalProp = 'yugasun';
Vue.myGlobalMethod = function() {
// 邏輯
};
// 2. 添加全局資源：
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 邏輯
}
});
// 3. 注入通用方法或?qū)傩越o組件
Vue.mixin({
data(){
return {
// 通用數(shù)據(jù),
};
},
created() {
// 邏輯
},
});
// 4. 添加實例方法
Vue.prototype.$myMethod = function(methodOptions) {
// 邏輯
};
};
使用插件
插件使用起來很簡單辆飘，只需要引入涩搓，然后通過調(diào)用 Vue.use() 方法就行了：
import Vue from 'vue';
import MyPlugin from './MyPlugin';
Vue.use(MyPlugin, {someOption: true});
開發(fā)組件
我們這里以 vue-axios-plugin 為例，它是一個對 axios 二次封裝的插件劈猪，便于在項目中直接通過 this.$http.get/post 來直接調(diào)用請求方法昧甘。
首先根據(jù)上面的模板，創(chuàng)建入口文件 vue-axios-plugin.js：
const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) => {
}
export default VueAxiosPlugin
然后給 Vue 添加實例方法：
import axios from 'axios'
const VueAxiosPlugin = {}
VueAxiosPlugin.install = (Vue, options) => {
const service = axios.create(options)
Vue.prototype.$axios = service
Vue.prototype.$http = {
get: (url, data, options) => {
let axiosOpt = {
...options,
...{
method: 'get',
url: url,
params: data
}
}
return service(axiosOpt);
},
post: (url, data, options) => {
let axiosOpt = {
...options,
...{
method: 'post',
url: url,
data: data
}
}
return service(axiosOpt);
}
}
}
export default VueAxiosPlugin
具體 axios 的使用方法战得，請閱讀官方文檔 axios
現(xiàn)在已經(jīng)完成插件的基本開發(fā)了充边，在項目中測試下，：
import VueAxiosPlugin from './vue-axios-plugin'
Vue.use(VueAxiosPlugin)
然后你就可以在你的組件中直接使用添加的全局方法了：
var app = new Vue({
el: '#app',
data: {
content: 'Sending...'
},
methods: {
getUserInfo() {
Promise.all([
this.$http.get('http://yapi.demo.qunar.com/mock/5802/user', { id: 1 }),
this.$http.post('http://yapi.demo.qunar.com/mock/5802/user', {
username: 'yugasun',
}, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
]).then((res) => {
console.log(res)
}).catch((e) => {
console.log(e)
})
}
},
created() {
this.getUserInfo()
}
})
發(fā)布組件
插件已經(jīng)寫好了，你可以復(fù)制該文件在不同的項目中復(fù)用了浇冰。如果覺得每次都復(fù)制文件比較麻煩贬媒，你可以通過閱讀上一篇 定制開發(fā)項目模板 文章，將該插件文件直接添加到項目模板中即可肘习。當(dāng)然如果你的插件足夠好际乘，也可以發(fā)布到 npm 社區(qū)，供全世界的程序員同胞使用漂佩。
每次項目緊急脖含，有個需求很難搞定時，我們就會想著從 github 上搜索我們需要的項目投蝉，既然我們從社區(qū)獲取了那么多养葵，當(dāng)然也要學(xué)會感恩，偶爾嘗試著去回報下瘩缆，不求代碼有多么高的質(zhì)量关拒，哪怕是單純地幫助修改一個說明文檔中的錯誤，那也是一份貢獻(xiàn)庸娱，也許你的這次修改可以幫助別人節(jié)省半天的時間着绊，任何項目都是在不斷迭代中成長的。
隨時歡迎進(jìn)入全球最大的同性交友網(wǎng)站 GayGithub熟尉，貢獻(xiàn)你的第一份源代碼~
