vue3 main.js

// 導入Vue 3的createApp函數
import { createApp } from 'vue';

// 導入主組件、路由、Vuex存儲、axios配置和API工具
import App from './App.vue';
import router from './router/index';
import store from './store/index';
import axios from './utils/axios';
import api from './utils/api';
import utils from './utils/utils';

// 使用createApp函數創建Vue應用實例
const app = createApp(App);

// 將路由和Vuex存儲添加到Vue應用
app.use(router);
app.use(store);

// 將axios、api和utils工具綁定到Vue應用的全局屬性，這樣在組件內可以使用this.$http、this.$api和this.$utils來訪問它們
app.config.globalProperties.$http = axios;
app.config.globalProperties.$api = api;
app.config.globalProperties.$utils = utils;

// 將Vue應用掛載到DOM元素上，'#app'是掛載點的選擇器
app.mount('#app');

使用的地方

// 使用Vue 3的Composition API來獲取當前組件實例，然后通過proxy對象訪問組件的上下文，如方法、數據、計算屬性等
import {getCurrentInstance} from "vue";
let { proxy } = getCurrentInstance();

// 打印綁定到Vue應用的axios實例，這是一個示例，展示如何在組件內使用全局屬性
console.log(proxy.$http);