Vue.js

外觀

本頁內容

外掛 ​

簡介 ​

外掛是自包含的程式碼，通常用於向Vue新增應用級別的功能。這是我們安裝外掛的方式

js
import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* optional options */
})

外掛定義為暴露一個install()方法的物件，或者簡單地是一個作為安裝函式本身的功能。安裝函式接收應用例項以及傳遞給app.use()的任何附加選項

js
const myPlugin = {
  install(app, options) {
    // configure the app
  }
}

外掛沒有嚴格定義的範圍，但常見場景中外掛有用的包括

  1. 使用app.component()和app.directive()註冊一個或多個全域性元件或自定義指令。

  2. 透過呼叫app.provide()使資源在整個應用中可注入。

  3. 透過將其附加到app.config.globalProperties新增一些全域性例項屬性或方法。

  4. 需要執行上述操作組合的庫（例如vue-router）。

編寫外掛 ​

為了更好地理解如何建立自己的Vue.js外掛，我們將建立一個非常簡化的外掛，用於顯示i18n（即國際化）字串。

讓我們首先設定外掛物件。建議在單獨的檔案中建立它並匯出，如下所示，以保持邏輯封裝和分離。

js
// plugins/i18n.js
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}

我們想要建立一個翻譯函式。這個函式將接收一個點分隔的key字串，我們將使用它來在使用者提供的選項中查詢翻譯的字串。這是在模板中的預期用法

template
<h1>{{ $translate('greetings.hello') }}</h1>

由於這個函式應該在所有模板中全域性可用，我們將透過將它們附加到我們的外掛中的app.config.globalProperties來實現這一點

js
// plugins/i18n.js
export default {
  install: (app, options) => {
    // inject a globally available $translate() method
    app.config.globalProperties.$translate = (key) => {
      // retrieve a nested property in `options`
      // using `key` as the path
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

我們的$translate函式將接受一個如greetings.hello的字串，在使用者提供的配置中查詢，並返回翻譯的值。

包含翻譯鍵的物件應在安裝期間透過傳遞到app.use()的附加引數傳遞給外掛

js
import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

現在，我們的初始表示式$translate('greetings.hello')將在執行時被替換為Bonjour!。

另請參閱：增強全域性屬性

提示

由於太多不同外掛注入的全域性屬性可能會迅速變得混亂，因此請儘量少用全域性屬性。

使用外掛提供/注入 ​

外掛還允許我們使用 inject 向外掛使用者提供函式或屬性。例如，我們可以允許應用程式訪問 options 引數以使用翻譯物件。

js
// plugins/i18n.js
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}

現在外掛使用者將能夠使用 i18n 鍵將外掛選項注入到他們的元件中

vue
<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>
js
export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}

NPM 的打包包 ​

如果您還想構建和釋出您的外掛供他人使用，請參閱 Vite 的庫模式部分。

在 GitHub 上編輯此頁面