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

main.js

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'import aaa from './plugins/aaa'
import bbb from './plugins/bbb'createApp(App)//带参数的插件.use(aaa, {greetings: {hello: 'Bonjour!'}})//Provide插件.use(bbb).mount('#app')

aaa.js

export default {install: (app, options) => {console.log(app)console.log(options)// 注入一个全局可用的 $translate() 方法app.config.globalProperties.$translate = (key) => {// 获取 `options` 对象的深层属性// 使用 `key` 作为索引console.log(key)return key.split('.').reduce((o, i) => {if (o) return o[i]}, options)}}
}

bbb.js

import {ref} from 'vue'
export default {install:(app, options) =>{let message=ref('你好啊')app.provide('message',message)}
}

App.vue(对插件使用的组件)

<template><div>{{ $translate('greetings.hello') }}</div><div>{{messsage}}</div>
</template>
<script setup>
import { inject } from "vue";let messsage=inject('message')
</script>
<style scoped>
</style>