在Vue應用程序中,不僅可以使用Vue自己的內置功能,還可以使用來自社區或第三方提供的插件來增強應用程序。這些插件可以是幫助我們管理狀態的 Vuex ,可以是更好地管理表單的 Vee-Validate ,還可以是優秀的 UI 組件庫 Element-UI 等等。
在Vue中使用這些插件有幾種方法,其中最簡單的是通常用NPM的方法安裝并直接在應用程序中引用。
npm install 包名
并在Vue組件中導入該插件并使用即可。
import 包名 from '包名'
然而,有時候,我們希望以全局方式使用插件,這將使整個應用程序都可以使用插件。在Vue中實現這一點的方法是:在Vue實例化之前注冊插件。如下所示,我們在全局中注冊了 Vuex 插件:
import Vuex from 'vuex'
Vue.use(Vuex)
在使用此方法時,我們可以使用Vue插件API注冊我們自己的插件。使用Vue插件API創建一個插件,就像Vue.js內置的插件Vue.use()一樣。插件是將功能添加到Vue應用程序的方法。插件具有install方法,并將Vue作為參數傳遞。這個方法有一個要求必須在Vue實例化之前被調用。具體實現如下:
// modules 函數返回一個包含 name 和 greet 方法的對象
export default function myPlugin(Vue, options) {
// 通過全局方法 Vue.mixin() 來添加一些全局的特性
Vue.mixin({
created: function () {
console.log('myPlugin created')
}
})
// 添加一個實例方法
Vue.prototype.$myMethod = function (methodOptions) {
console.log('I come from $myMethod')
}
}
實際上,我們可以傳遞一個install方法到我們的Vue插件任何位置,如Vue.use。這個install函數將被Vue參數調用,并在Vue啟動時作為提供的插件來使用。下面是一個簡單的示例,展示了安裝函數:
var MyPlugin = {
install: function(Vue, options) {
Vue.mixin({
created: function() {
console.log('Hello!')
}
})
}
}
Vue.use(MyPlugin)
在以上代碼中,我們在使用Vue.use()時注冊我們的插件。我們已經定義了一個名為 MyPlugin 的對象,具有一個install方法,該方法會將一個mixin添加到創建的鉤子對象中。
總結來說,調用Vue插件有兩種方法,一種是全局(注冊于Vue實例化之前),另一種是局部(組件中導入,但只能在該組件中使用)通過這些方式,我們可以方便地使用第三方插件,增強我們的Vue應用程序,更加靈活便捷。