Vue 3 插件構建指南

插件是向 Vue 應用程序添加可重用功能的好方法。憑藉大量現有的用於組件、路由等的插件，Vue 生態系統爲許多常見用例提供了漂亮的解決方案。

常用的一些插件例如vue-router、vue custom-element和vue-touch等等。

但是，有時你找不到與項目完美匹配的插件，或者你想自己來構建插件與世界分享，那怎麼辦呢？

請看今天的教程——如何構建你自己的 Vue 3 插件。

我們可以用 Vue 插件做什麼？

簡單地說，Vue 插件允許我們提取任何類型的功能到獨立的代碼中，而這些代碼可在不同的項目中重複使用。

通常，它們用於向 Vue 應用程序添加全局級別的功能。根據 Vue 文檔，以下是插件的一些最常見用途。

添加全局組件
添加全局指令、轉換或其他資源
通過全局混入（如 vue-router）添加組件選項
l 添加附加屬性到 Vue 實例（通過app.config.globalProperties）

我們將在本教程深入探討這些情況，但是首先，讓我們繼續創建插件。

創建 Vue 3 插件

這裏我們將製作一個插件：允許我們向 Vue 應用程序添加 UI 元素和樣式。

對於這個插件，我們要創建一個名爲MyPlugin.js的文件，並在其中使用install方法創建export default。這個install方法有兩個參數：

app：來自 Vue 的createApp方法的應用程序
options：將插件添加到 Vue 實例時傳入的任何選項

MyFirstPlugin.js

export default {
    install: (app, options) => {
        /*  our code for the plugin goes here 
            app is the result of createApp()
            options is user options passed in        
        */
    }
}

然後，爲了將這個插件真正插入到 Vue app 中，我們前往main.js文件並使用app.use()。

main.js

import { createApp } from 'vue'
import App from './App.vue'
import MyFirstPlugin from './plugin'

const app = createApp(App)

app.use(MyFirstPlugin, /* can pass options as second param */)

app.mount('#app')

下面開始向插件添加功能。

從 Vue 插件添加全局組件

Vue 插件的一個優勢是，可以添加能在 Vue 項目的任何地方使用的全局組件，而無需顯式導入這些組件。

通過使用 app 參數（此參數允許我們訪問 Vue 實例），我們可以使用app.component語法聲明全局組件。

通過使用app.component，我們可以使用單個文件組件或直接在 Javascript 文件中聲明組件。今天我們將製作我們自己的 SFC。

假設我們要創建一個 header 組件——將其命名爲MyHeader.vue——包含文章帖子的信息。

MyHeader.vue

<template>
    <div>
        <h1 class="header-title">   
            <slot  />
        </h1>
        <h2 class="title-author">
            <slot  />
        </h2>
    </div>
</template>

爲了將其添加到插件中，我們可以轉到MyFirstPlugin.js並將其添加到install方法中。

import MyHeader from './components/MyHeader.vue'
export default {
    install: (app, options) => {
        /* declare global component */      
        app.component('my-header', MyHeader)
    }
}

現在，我們可以在 Vue app 的任意位置使用全局的MyHeader。

再讓我們在App.vue中檢查一下。不需要導入，就可以將它添加到模板中。

<template>
  <my-header>
    <template #title> 
      Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
    </template>
    <template #author> 
      Matt Maribojoc
    </template>
  </my-header>
</template>

最終的結果是這樣的！

很棒哦。

我們還可以在組件中添加樣式

如果我們向組件添加任何非作用域樣式，就可以設置 Vue app 的樣式，非常簡單。

例如，如果我們想更改整個項目的字體大小和背景顏色，則可以在MyHeader組件中進行。

<template>
    <div>
        <h1 class="header-title">   
            <slot  />
        </h1>
        <h2 class="title-author">
            <slot  />
        </h2>
    </div>
</template>

<style>
    html, body, * {
        font-size: 1.2em;
        background: #fafafa;
    }
</style>

再回過頭去看瀏覽器。

超酷！一切都根據樣式更新了，並且總是可以同其他 CSS 一樣在子組件中被覆蓋。

使用 Vue 插件添加全局指令

我最喜歡 Vue 的原因之一是能夠創建自己的指令。

指令是 Vue 允許開發人員直接編輯 DOM 的一種方式。其示例包括：v-if、v-show、v-bind等。如果你用過 Vue，你肯定不會對指令陌生。

藉助插件，我們可以使用app.directive輕鬆創建跨項目使用的指令。

假設我們要創建一個目標是改變文本大小的指令。

也就是說，接受一個確定元素字體大小的指令參數，然後更改該元素（通過el）的樣式以使用合適的尺寸。

MyFirstPlugin.js

export default {
    install: (app, options) => {
        app.component('my-header', MyHeader)
   
        app.directive("font-size", (el, binding, vnode) => {
            var size = 16;
            switch (binding.arg) {
              case "small":
                size = 12;
                break;
              case "large":
                size = 24;
                break;
              default:
                size = 18;
                break;
            }
            el.style.fontSize = size + "px";
          })
    }
}

然後，在App.vue中——或在任意組件中都可，因爲是全局可用的——我們可以像這樣使用指令。

App.vue

<template>
  <p v-font-size:small>Small</p>
  <p v-font-size:medium>Medium</p>
  <p v-font-size:large>Large</p>
  
  <my-header>
    <template #title> 
      Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
    </template>
    <template #author> 
      Matt Maribojoc
    </template>
  </my-header>
</template>

結果如下所示。

使用插件選項提供自定義

現在我們來討論install方法的第二個參數——options。爲插件添加選項能夠使其更靈活地面對不同的用例。

假設我們希望開發人員能夠控制small、medium和large參數的確切尺寸大小。

如果我們回到main.js，可以向添加插件到 Vue app 的app.use函數添加第二個參數。

接着創建對象來指定每種字體大小。

main.js - adding options

app.use(MyFirstPlugin, {
   fontSize: {
       small: 12,
       medium: 24,
       large: 36
   }
})

然後，回到插件中，我們可以使用options對象來提取傳遞給插件的內容，而不是硬編碼字體的大小。

MyFirstPlugin.js - using options

app.directive("font-size", (el, binding, vnode) => {
            var size = 16;
            switch (binding.arg) {
              case "small":
                size = options.fontSize.small;
                break;
              case "large":
                size = options.fontSize.large;
                break;
              default:
                size = options.fontSize.medium;
                break;
            }
            el.style.fontSize = size + "px";
})

現在，如果我們回頭看，可以看到我們在應用程序中成功地使用了指定的字體大小。

使用 Mixin 添加方法、數據和其他組件選項

插件向 Vue 應用程序添加可重用功能的一種常見方式，是使用 Vue mixins。Mixins 是一種向 Vue 組件添加組件選項的方法。

我們可以添加任何組件選項，如生命週期鉤子、數據和方法，如果組件使用此 mixins，這些選項將與該組件的選項合併。

瞭解這些選項是如何合併的很重要。例如，mixin 生命週期鉤子將在組件鉤子之前被調用，如果存在命名衝突，組件數據將優先於 mixin 數據。

我們可以使用app.mixin方法創建全局的 mixin。

假設我們要添加一個只會向控制檯輸出日誌語句的created鉤子，還想提供一個data屬性，該屬性提供一個外部 URL，使用這個 URL 可以更改整個 app 中鏈接的href屬性。

MyFirstPlugin.js

export default {
    install: (app, options) => {
        app.mixin({
            data() {
                return {
                    featuredLink: 'https://learnvue.co'
                }
            },
            created() {
                console.log("Printing from created.")
            },
        })
    }
}

在我們使用的組件中，這個created鉤子都會運行，並且我們可以訪問featuresLink屬性。我們有兩條打印輸出——一條是通過App.vue，一條是通過MyHeader.vue。

使用 Vue 插件的 provide 和 inject

讓特定組件訪問不同屬性和方法的一種強大方法是使用 Vue 中的provide和inject模式。

這允許插件提供屬性或方法，並允許組件注入值。

讓我們來看一個創建logout方法的示例。我們不需要這個方法對每個組件都可用，只要創建了這個方法就行。

我們在插件中聲明方法，並調用app.provide將其提供給應用程序的其餘部分。app.provide的語法是(key, value)

MyFirstPlugin.js

import { provide } from 'vue'

export default {
    install: (app, options) => {
        const logout = () => {
            console.log('Logout is being called')
        }

        app.provide('logout', logout)
    }
}

然後，我們可以在任意組件內注入這個方法，接下來我們要創建一個調用logout方法的按鈕。

App.vue

<template>
  <button @click="logout"> Logout </button>
  <p v-font-size:small>Small</p>
  <p v-font-size:medium>Medium</p>
  <p v-font-size:large>Large</p>
  <a :href="featuredLink"> Featured Link </a>
  <my-header>
    <template #title> 
      Building Your Own Vue 3 Plugin - <i> A Full Guide </i>
    </template>
    <template #author> 
      Matt Maribojoc
    </template>
  </my-header>
</template>

<script setup>
import { inject } from 'vue'
const logout = inject('logout')
</script>

所以現在每當我們點擊按鈕時，插件的日誌語句就會打印到控制檯。

超讚的！

寫在最後的話

設計 Vue 3 插件的可能性是無窮無盡的，因爲我們有衆多出色的變換、路由等插件。今天我們介紹的是一些複雜工具的核心構建塊。

希望這篇教程能對大家有所幫助。祝編碼快樂！

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/wEOmjL9MH2J5Dv__qe4hmA

我們可以用 Vue 插件做什麼？

創建 Vue 3 插件

從 Vue 插件添加全局組件

我們還可以在組件中添加樣式

使用 Vue 插件添加全局指令

使用插件選項提供自定義

使用 Mixin 添加方法、數據和其他組件選項

使用 Vue 插件的 provide 和 inject

寫在最後的話

猜你喜歡