1. 程式人生 > >vue外掛的開發流程

vue外掛的開發流程

趁有機會,簡單回顧下vue外掛開發的過程。學習本身就是個不斷重複滴過程嘛:

一、官網外掛的開發文件地址

二、簡單嘮一嘮

但是呢,如果看官網文件的話,有的小朋友可能就雲裡霧裡了,不想再進行下去了,其實vue對於外掛的定義就是,使用Vue.use方法,將引入的install方法裡面相關Vue操作的方法邏輯運行了,實現在全域性可以呼叫install方法裡面的註冊的元件,方法,屬性等等

三、什麼是Vue外掛

1. 您可以向Vue新增全域性級功能。

2. 這是保持Vue元件清晰和小巧的好方法。 您還可以與其他開發人員打包並共享您的程式碼。

3. 總而言之一句話,外掛只不過是一個公開安裝方法的物件。

四、如何寫一個自己的vue外掛

1. 首先,您應該匯出外掛物件,以便可以在專案的任何位置使用它。 

2. 然後公開帶有兩個引數的install方法:Vue建構函式和選項物件。 

3. 第二個引數 - 選項 - 是可選的,可以自定義您的外掛。 install( Vue, [options] )

4. 在plugin目錄下新建一個plugin.js檔案

// plugin.js

export default {
  // 引數一: Vue 建構函式
  // 引數二: Vue.use(MyPlugin,{name: '我是王二小'});傳遞過來的配置引數 {name: '我是王二小'}...
  install (Vue, options) {
    
  }
}

5. 在main.js中引入

import MyPlugin from './plugin/plugin.js'

Vue.use(MyPlugin,{name: '我是王二小'});

五、如何開發一些功能,可以全域性使用

安裝方法包含以下一項或多項:

1. 新增一些全域性方法或屬性。

2. 新增一個或多個全域性資產:指令/過濾器/轉換等。

3. 通過Vue.mixin()方法新增一些元件選項 ()          注:Mixins是一種靈活的方式來為Vue元件分配可重用的功能。 mixin物件可以包含任何元件選項。 當元件使用mixin時,mixin中的所有選項將“混合”到元件自己的選項中

4. 通過將它們附加到Vue.prototype來新增一些Vue例項方法 (不是很推薦)

5. 案例分析

// 引入自定義元件
import Component from '/src/components/Component.vue'

export default {
  install (Vue, options) {

     // 1. 新增全域性靜態方法或者屬性  Vue呼叫
     Vue.yourMethod = (value) => value

     //2. 全域性註冊元件
     Vue.component('component', Component)

     //3. 新增 `Vue.mixin()` 向全域性元件內部注入方法
     Vue.mixin({
         // 向元件內部混入生命週期內部邏輯(同名鉤子函式將混合為一個數組,因此都將被呼叫。另外,混入物件的鉤子將在元件自身鉤子之前呼叫)
         created() {
            console.log('Hello from created hook!')
         }
     }) 
     // Vue.prototype 原型新增屬性和方法 內部this可直接呼叫
     Vue.property.$myProperty = 'This is a Vue instance property.'
  }
}