app.use 插件
// myPlugin.js
export default {install(app) {app.config.globalProperties.$myPlugin = () => {console.log('This is a method from a plugin!')}}
}// main.js
import { createApp } from 'vue'
import App from './App.vue'
import MyPlugin from './myPlugin'const app = createApp(App)
app.use(MyPlugin)
app.mount('#app')
<h1>{{ $myPlugin('greetings.hello') }}</h1>
app.config.globalProperties
可以直接在 main.js 写全局属性和函数，但是这种方式不推荐，不利于维护和团队开发。推荐通过 app.use。
TS 全局属性和函数的类型
某些插件会通过 app.config.globalProperties 为所有组件都安装全局可用的属性。举例来说，我们可能为了请求数据而安装了 $http，或者为了国际化而安装了 $translate。为了使 TypeScript 更好地支持这个行为，Vue 暴露了一个被设计为可以通过 TypeScript 模块扩展来扩展的 ComponentCustomProperties 接口：
import axios from 'axios' // 如果不是第三方扩展，也建议写一个 export {} 在顶层避免出问题，具体查看官方文档，下方链接。declare module 'vue' {interface ComponentCustomProperties {$http: typeof axios$translate: (key: string) => string}
}
Vue3 文档 - 扩展全局属性 和 类型扩展的位置
app.provide
// main.js
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.provide('globalMethod', () => {console.log('This is a provided global method!')
})app.mount('#app')
<template><div><button @click="globalMethod">Call Injected Method</button></div>
</template><script setup>
import { inject } from 'vue'const globalMethod = inject('globalMethod')
</script>
