<code class="hljs language-typescript" lang="typescript">import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// vue3全局变量挂载
app.config.globalProperties.$http = http
const demo = 'demo'
app.config.globalProperties.$demo = demo
app.mount('#app')
vue3使用globalProperties属性来挂载全局变量。
挂载后，在vue文件中使用。 可以直接调用模板。
{{ $demo }}
传统使用脚本的方式和以前一样
export default {
mounted() {
console.log(this.$demo)
}
}
脚本中设置的句型可以轻松使用。 由于setup没有这个，所以需要导出获取当前实例的方法，解构给proxy使用。
import { reactive, ref, getCurrentInstance } from 'vue'
// 引入vue组件内部实例类型用于引入全局变量的类型断言
import type { ComponentInternalInstance } from 'vue'
const currentInstance = C()
// 使用getCurrentInstanceAPI获取全局对象方法一
// 从globalProperties中可以获取到所有的全局变量
// const globalProperties = currentInstance?.appContext.config.globalProperties
// console.log(globalProperties);
// 使用getCurrentInstanceAPI获取全局对象方法二
// 可以把proxy变量理解为原来的this
// const proxy = currentInstance?.proxy
// 这里 getCurrentInstance() 的ts类型检测是ComponentInternalInstance | null,所以需要类型断言，才能解构出 proxy
const { proxy } = getCurrentInstance() as ComponentInternalInstance
console.log(proxy.$demo)
// 全局挂载了elementui的ELMessage组件，这里才有这个$message
proxy.$message.success('getCurrentInstance')
上面对变量 demo 的引用变得流行，因为 ts 类型检查代理下没有 demo 和 $message 变量。 为了解决这个问题typescript定义全局对象，需要编写一个声明文件来扩展vue套接字。
如果项目中没有现成的声明文件，您可以自己创建一个。 例如，在 src 下创建一个名为 Typing.d.ts 的声明文件，并使用自定义名称。
打字.d.ts
// 注意，扩展vue的接口需要先import vue进来, 不导入原来的环境进来，直接扩展的话，就不是扩展了，变成覆盖
import Vue from 'vue'
// 引入了element-plus的Message的ts类型声明
import type { Message } from 'element-plus'
declare module '@vue/runtime-core' {
// 扩展全局变量的接口内容，需要扩展ComponentCustomProperties这个接口，不要乱改成别的
interface ComponentCustomProperties {
$demo: string,
$message: Message
}
}
您添加的声明文件需要在 tsconfig.json 或 jsconfig.json 中配置typescript定义全局对象，并在 include 中添加文件的完整路径。
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "src/typing.d.ts"],
只有这样声明文件才会生效。 如果你使用的是项目中已经存在并且已经引入的声明文件，则可以忽略里面的两个步骤。
