vue3之插件

插件plugins是一种能为vue添加全局功能的代码,官网连接：https://cn.vuejs.org/guide/reusability/plugins.html

项目的src文件夹下新建plugins文件夹

新建i18n.js文件
插件是一个拥有install方法的对象

export default {install: (app, options)=>{app.config.globalProperties.$translate = (key) =>{return key.split('.').reduce((o, i) =>{if(o) return o[i];}, options)}}
}

也可以是安装函数本身

 const install = (app, options) =>{app.config.globalProperties.$translate = (key) =>{return key.split('.').reduce((o, i) =>{if(o) return o[i];}, options)}// 根据传入的选项进行其他设置if (options && options.message) {console.log('来自选项的message', options.message)}// 可以根据选项添加更多的自定义行为if (options && options.enableFeatureX) {// 启用某个功能console.log('Feature X is enabled.');}
}
export default install

插件发挥作用的常见场景
通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令
通过 app.provide() 使一个资源可被注入进整个应用
向 app.config.globalProperties 中添加一些全局实例属性或方法
一个可能上述三种都包含了的功能库 (例如 vue-router)。

使用插件

在main.js中引入插件文件，并通过use使用插件，注意：app.use()要在app.mount()之前，不然会报错,因为.use() 和 .mount() 方法的调用顺序有其特定的原因。简单来说，.use() 是用来安装插件的，而 .mount() 则是将 Vue 应用挂载到 DOM 上。为了确保所有通过插件添加的功能（如全局属性、指令等）在应用被挂载之前就已经准备好并可用，.use() 必须写在 .mount() 之前。

<script setup>
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import i18nPlugin from './plugins/i18n'
const app = createApp(App)
//可传入选项
app.use(i18nPlugin, {greetings: {hello: '你好呀!'}
})
app.mount('#app')

接着在需要使用插件的地方

<script setup></script><template><div style="margin-bottom: 230px;padding-top: 30px;"><!-- 插件使用 --><h1>{{ $translate('greetings.hello') }}</h1></div>
</template>

在插件中使用Provide（提供） / Inject（注入）

当希望多个组件共享某些状态或配置时可以使用Provide / Inject，如果是复杂的状态管理可以用vuex
主题管理插件themePlugin.js

import {ref} from 'vue'
export default {install(app,options){const defaultTheme = options.defaultTheme || 'light'const theme = ref(defaultTheme)app.provide('theme', theme)app.config.globalProperties.$toggleTheme = ()=>{theme.value = theme.value === 'light' ? 'dark' : 'light'}}
}

main.js

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import i18nPlugin from './plugins/i18n'
import themePlugin from './plugins/themePlugin'
const app = createApp(App)
app.use(i18nPlugin, {greetings: {hello: '你好呀!'}
})
app.use(themePlugin,{defaultTheme: 'dark'
})
app.mount('#app')

使用主题插件

<script setup>
import { inject, getCurrentInstance } from "vue";
const theme = inject("theme");
// 获取当前组件实例
const { proxy } = getCurrentInstance();
//点击切换主题
function changeTheme() {if (proxy && proxy.$toggleTheme) {proxy.$toggleTheme();}
}
</script><template><divstyle="margin-bottom: 230px;padding-top: 30px;":class="theme"><button @click="changeTheme">change theme</button><!-- 插件使用 --><h1>{{ $translate('greetings.hello') }}</h1></div>
</template>
<style scoped>
.light {background: linear-gradient(315deg, #baf 25%, #647eff);border: none;
}
.dark {background: #000;
}
</style>