手把手教你在 Vue3 中自定義插件
最近在錄 TienChin 項目，項目涉及到了 Vue 中插件的定義，因此整了這么一篇文章，手把手教大家在 Vue3 中定義插件，這個技能掌握了，就可以看懂 TienChin 前端代碼了。
1. Vue 插件
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，例如在 vhr 中，我們將網絡請求方法進行封裝，然后掛到了 Vue.prototype 上就可以了，類似下面這樣：
import {postRequest} from "./utils/api";
Vue.prototype.postRequest = postRequest;
然后在使用的地方，就可以通過 this.postRequest 去使用了。
小伙伴們需要注意，這個在 Vue3 中有所變化，prototype 變為了 config.globalProperties，也就是在 Vue3 中再想要掛載全局方法，應該是 const app = createApp(App);app.config.globalProperties.useDict = useDict 這種形式了（具體我將在 TienChin 項目中和大家細聊）。
這也算是一種插件定義方式，但是這種一般適用于一些工具方法，無法定義一些比較復雜的插件，復雜的插件還是得通過 Vue 中提供的插件定義方式來定義。
2. 自定義插件
2.1 基本用法
首先我們新建一個目錄 plugins 專門用來放我們的插件，然后在這個目錄中新建一個 index.js 文件用來開發插件，內容如下：
export default {
install: (app, options) => {
console.log("我的第一個插件")
}
};
install 中的方法將會被自動執行。
接下來我們就可以在 main.js 中引入我們這個插件了：
const app = createApp(App);
import plugin from './plugins'
app.use(plugin);
app.use 就表示引入插件，引入插件之后，插件中的 install 方法就會被自動執行。
app.use 方法接收兩個參數，第一個參數就是我們導入的插件 js 對象，第二個參數是可選的，大家看到插件定義時候的 install 方法有兩個參數，第一個參數是 Vue 實例，這是自動傳入的，第二個參數 options 則是我們在 app.use 中，通過第二個參數傳入進來的。當然上面這個例子中松哥沒有傳遞第二個參數。
好了，如此配置之后，接下來啟動項目，控制臺就可以看到有日志打出了。
這樣的插件未免過于簡單，接下來我們就給這個插件加點料。
2.2 加入組件
首先我們定義一個新的組件，如下：
<template>
<div>
<h1><a href="http://www.javaboy.org">javaboy</a></h1>
</div>
</template>
<script>
export default {
name: "MyBanner"
}
</script>
然后我們現在就可以在插件中將這個組件注冊為一個全局組件了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個插件")
app.component('my-banner', MyBanner);
}
};
首先在插件中導入這個組件，然后通過 app 進行組件注冊，注冊完成后，我們就可以在項目任意位置使用 my-banner 組件了，如下：
<template>
<div>
<my-banner></my-banner>
</div>
</template>
最終顯示效果如下：
2.3 加入指令
我們甚至還可以在插件中注冊一個指令，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = 16;
break;
case "large":
size = 32;
break;
default:
size = 48;
break;
}
el.style.fontSize = size + "px";
});
}
};
現在，我們就可以在項目中隨時隨地去使用這個指令了，例如在我們剛剛自定義的 my-banner 中使用這個指令：
<template>
<div>
<h1><a href="http://www.javaboy.org" v-font-size:small>javaboy</a></h1>
</div>
</template>
<script>
export default {
name: "MyBanner"
}
</script>
我們甚至可以通過 options 將指令中字體的大小動態的傳進來，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
}
};
options 是插件注冊時候傳入的一個 JSON 參數，small、large 以及 default 分別對應的字體多大，要看插件注冊時傳入的值：
const app = createApp(App);
import plugin from './plugins'
app.use(plugin, {small: 16, large: 32, default: 48});
第二個參數，大家看，就是 options 參數的值。
現在大家想想我們平時用 ElementUI 的時候，Vue.use 方法，傳入 ElementUI，再傳入一些其他參數，看了上面這個例子，ElementUI 引入到底是怎么個引入法現在大家就明白了吧。
2.4 provide & inject
在插件中，也可以通過 provide 來提供一個方法，在需要使用該方法的地方，通過 inject 注入方法，然后就可以使用了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
const clickMe = () => {
console.log("==========clickMe=========")
}
app.provide('clickMe', clickMe);
}
};
在需要使用的地方，通過 inject 注入方法后就可以使用了，如下：
<template>
<div>
<h1><a href="http://www.javaboy.org" v-font-size:small>javaboy</a></h1>
</div>
</template>
<script>
import {inject} from "vue";
export default {
name: "MyBanner",
mounted() {
const clickMe = inject('clickMe');
clickMe();
}
}
</script>
3. 小結
整體上來說，通過這種方式來自定義插件，能夠實現的內容比較豐富。如果只是想掛一個全局方法來用，那么其實是沒有必要定義插件的。如果只是想掛載一個全局方法，在 Vue2 中可以按照如下方式使用：
Vue.prototype.postRequest = postRequest;
在 Vue3 中則可以通過如下方式：
app.config.globalProperties.useDict = useDict
