這一篇說實在的,現在的我還不能寫出有用的插件,所以這一篇筆記主要也是學習使用別人寫好的插件。
Vue.use('PluginName', {
//options
})
使用別人寫好的插件
插件 : VueAxios
import Vue from 'vue'
//必須先載入 axios 跟 VueAxios
//VueAxios 的目的是讓 axios 被 Vue 整合(加在 Vue 原型中),確保所有模組都可以使用 axios
import axios from 'axios'
import VueAxios from 'vue-axios'
//在使用 Vue.use() 來讓 Vue 可以使用該 VueAxios 插件
Vue.use(VueAxios, axios)
其實在使用別人寫好的插件時,都會附使用說明,就照著說明使用即可。
就目前而言,比較常用的 Vue 插件就是 Vue-router 跟 Vuex ,但因為這2個插件只要檢測到存在 Vue 這個變量後,就會自動調用 Vue.use()
,所以不需要額外寫 Vue.use()
,但必須注意如果是使用 CommonJS 模塊化,仍得使用 Vue.use()
。
可以將比較常用或可複用的方法寫在 Plugin 裡做整合,之後再透過 Vue.use()
一次性載入到專案中使用。
const MyPlugin = {
install(Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
//內容
console.log(Vue, options)
}
// 2. 全局 directive
Vue.directive('my-directive', {
//內容
bind(el,binding,vnode){
console.log(Vue, options)
}
})
// 3. 全局 mixin
Vue.mixin({
//內容
created(){
console.log(Vue, options)
}
})
// 4. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
//內容
console.log(Vue, options)
}
}
}
Demo:DAY20 | 跟 Vue.js 認識的30天 - Vue 插件(Plugin)
參考資料