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>