- vite和webpack構(gòu)建的項目main.ts都是一樣的
首先來一個最簡單的mian.ts示例
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- 然后我們需要使用config.gloablProperties全局掛載變量就要改造一下
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
- 現(xiàn)在我們可以使用config.globalProperties掛載全局變量
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
// 掛載一個$name的全局變量
app.config.globalProperties.$name = '123'
app.mount('#app')
-
在vue組件當(dāng)中去使用這個全局的變量，我們就直接在HelloWorld當(dāng)中去使用一下vue3.x中config.globalProperties掛載的全局變量抒寂，ts會給出一個這個提示
圖片.png - 如果使用as any這種方式虐呻，可以解決這個編輯器提示的問題卿吐，但是又來一個新的問題
webpack構(gòu)建的項目在終端會提示一個黃色的警告琅摩，就是使用了any這個警告晨汹，經(jīng)過一系列百度之后终议，查找到了一個比較完美的解決方案
<script setup lang="ts">
import { ref, getCurrentInstance, ComponentInternalInstance} from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
// 使用config.globalProperties掛載的全局變量
const { appContext: { config: { globalProperties }} } = getCurrentInstance() as ComponentInternalInstance;
console.log(globalProperties.$name);
// 網(wǎng)上有些網(wǎng)友也遇到// 對象可能為 "null"虫埂。ts(2531)這樣的問題祥山，就可以使用下面這種寫法
console.log(globalProperties?.$name);
</script>
