Vue 插件
2024年10月2日...大约 1 分钟
什么是插件
插件是一种能为 Vue 添加全局功能的工具代码
一个插件可以是一个拥有 install() 方法的对象，也可以是一个安装函数
const myPlugin = {
// 安装函数会接收到安装它的应用实例和传递给 `app.use()` 的可选选项作为参数
install(app, options) {
// 配置此应用
}
}插件发挥作用的常见场景：
- 通过
app.component()和app.directive()注册全局组件或自定义指令 - 通过
app.provide()实现应用级的依赖注入 - 通过
app.config.globalProperties添加一些全局属性或方法 - 包含上述所有功能
插件的安装
单文件组件
// main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(myPlugin, {
// 可选的选项
})
app.mount('#app')HTML
<body>
<div id="app">
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
}).use(myPlugin, {
// 可选的选项
}).mount('#app')
</script>
</body>编写插件
单文件组件
// i18n.js
export default {
install(app, options) {
app.config.globalProperties.$translate = (key) => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, options)
}
app.provide('i18n', options)
}
}// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18nPlugin from './plugins/i18n.js'
const app = createApp(App)
app.use(i18nPlugin, {
greetings: {
hello: '你好',
}
})
app.mount('#app')<!-- App.vue -->
<template>
<p>{{ $translate('greetings.hello') }}</p>
<p>{{ i18n.greetings.hello }}</p>
</template>
<script setup>
import { inject } from 'vue'
const i18n = inject('i18n')
</script>HTML
// i18n.js
export default {
install(app, options) {
app.config.globalProperties.$translate = (key) => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, options)
}
app.provide('i18n', options)
}
}<body>
<div id="app">
<p>{{ $translate('greetings.hello') }}</p>
<p>{{ i18n.greetings.hello }}</p>
</div>
<script type="module">
import { createApp, inject } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import i18nPlugin from './i18n.js'
createApp({
setup() {
const i18n = inject('i18n')
return {
i18n
}
}
}).use(i18nPlugin, {
greetings: {
hello: '你好',
}
}).mount('#app')
</script>
</body> Powered by Waline v3.3.2