建站
咨詢
售后
建站咨詢
新聞中心
最近在錄 TienChin 項(xiàng)目，項(xiàng)目涉及到了 Vue 中插件的定義，因此整了這么一篇文章，手把手教大家在 Vue3 中定義插件，這個(gè)技能掌握了，就可以看懂 TienChin 前端代碼了。
“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)公司是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于網(wǎng)站建設(shè)、成都網(wǎng)站制作、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！
1. Vue 插件
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，例如在 vhr 中，我們將網(wǎng)絡(luò)請(qǐng)求方法進(jìn)行封裝，然后掛到了 Vue.prototype 上就可以了，類似下面這樣：
import {postRequest} from "./utils/api";
Vue.prototype.postRequest = postRequest;然后在使用的地方，就可以通過 this.postRequest 去使用了。
小伙伴們需要注意，這個(gè)在 Vue3 中有所變化，prototype 變?yōu)榱?config.globalProperties，也就是在 Vue3 中再想要掛載全局方法，應(yīng)該是 const app = createApp(App);app.config.globalProperties.useDict = useDict 這種形式了（具體我將在 TienChin 項(xiàng)目中和大家細(xì)聊）。
這也算是一種插件定義方式，但是這種一般適用于一些工具方法，無法定義一些比較復(fù)雜的插件，復(fù)雜的插件還是得通過 Vue 中提供的插件定義方式來定義。
2. 自定義插件
2.1 基本用法
首先我們新建一個(gè)目錄 plugins 專門用來放我們的插件，然后在這個(gè)目錄中新建一個(gè) index.js 文件用來開發(fā)插件，內(nèi)容如下：
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
}
};install 中的方法將會(huì)被自動(dòng)執(zhí)行。
接下來我們就可以在 main.js 中引入我們這個(gè)插件了：
const app = createApp(App);
import plugin from './plugins'
app.use(plugin);
app.use 就表示引入插件，引入插件之后，插件中的 install 方法就會(huì)被自動(dòng)執(zhí)行。
app.use 方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)就是我們導(dǎo)入的插件 js 對(duì)象，第二個(gè)參數(shù)是可選的，大家看到插件定義時(shí)候的 install 方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)是 Vue 實(shí)例，這是自動(dòng)傳入的，第二個(gè)參數(shù) options 則是我們?cè)?app.use 中，通過第二個(gè)參數(shù)傳入進(jìn)來的。當(dāng)然上面這個(gè)例子中松哥沒有傳遞第二個(gè)參數(shù)。
好了，如此配置之后，接下來啟動(dòng)項(xiàng)目，控制臺(tái)就可以看到有日志打出了。
這樣的插件未免過于簡單，接下來我們就給這個(gè)插件加點(diǎn)料。
2.2 加入組件
首先我們定義一個(gè)新的組件，如下：
然后我們現(xiàn)在就可以在插件中將這個(gè)組件注冊(cè)為一個(gè)全局組件了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
app.component('my-banner', MyBanner);
}
};
首先在插件中導(dǎo)入這個(gè)組件，然后通過 app 進(jìn)行組件注冊(cè)，注冊(cè)完成后，我們就可以在項(xiàng)目任意位置使用 my-banner 組件了，如下：
最終顯示效果如下：
2.3 加入指令
我們甚至還可以在插件中注冊(cè)一個(gè)指令，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
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";
});
}
};
現(xiàn)在，我們就可以在項(xiàng)目中隨時(shí)隨地去使用這個(gè)指令了，例如在我們剛剛自定義的 my-banner 中使用這個(gè)指令：
我們甚至可以通過 options 將指令中字體的大小動(dòng)態(tài)的傳進(jìn)來，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
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 是插件注冊(cè)時(shí)候傳入的一個(gè) JSON 參數(shù)，small、large 以及 default 分別對(duì)應(yīng)的字體多大，要看插件注冊(cè)時(shí)傳入的值：
const app = createApp(App);
import plugin from './plugins'
app.use(plugin, {small: 16, large: 32, default: 48});
第二個(gè)參數(shù)，大家看，就是 options 參數(shù)的值。
現(xiàn)在大家想想我們平時(shí)用 ElementUI 的時(shí)候，Vue.use 方法，傳入 ElementUI，再傳入一些其他參數(shù)，看了上面這個(gè)例子，ElementUI 引入到底是怎么個(gè)引入法現(xiàn)在大家就明白了吧。
2.4 provide & inject
在插件中，也可以通過 provide 來提供一個(gè)方法，在需要使用該方法的地方，通過 inject 注入方法，然后就可以使用了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一個(gè)插件")
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 注入方法后就可以使用了，如下：
3. 小結(jié)
整體上來說，通過這種方式來自定義插件，能夠?qū)崿F(xiàn)的內(nèi)容比較豐富。如果只是想掛一個(gè)全局方法來用，那么其實(shí)是沒有必要定義插件的。如果只是想掛載一個(gè)全局方法，在 Vue2 中可以按照如下方式使用：
Vue.prototype.postRequest = postRequest;
在 Vue3 中則可以通過如下方式：
app.config.globalProperties.useDict = useDict
網(wǎng)站欄目：手把手教你在Vue3中自定義插件
分享網(wǎng)址：http://m.5511xx.com/article/cdgejso.html
