前面我们给大家讲过可以通过app.config.globalProperties.$axios=Axios; 来配置全局属性,但是在ts中使用这样的配置方法的话是没法通过编译的,这个时候我们就需要拓展属性。
下面是在vue3.0定义源文件找到的一段说明注释
/**
* Custom properties added to component instances in any way and can be accessed through `this`
*
* @example
* Here is an example of adding a property `$router` to every component instance:
* ```ts
* import { createApp } from 'vue'
* import { Router, createRouter } from 'vue-router'
*
* declare module '@vue/runtime-core' {
* interface ComponentCustomProperties {
* $router: Router
* }
* }
*
* // effectively adding the router to every component instance
* const app = createApp({})
* const router = createRouter()
* app.config.globalProperties.$router = router
*
* const vm = app.mount('#app')
* // we can access the router from the instance
* vm.$router.push('/')
* ```
*/
}
vue3.x+typescript 配置全局axios属性
import { createApp } from 'vue'
import App from './App.vue'
import route from './route'
//配置Antd
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
//配置请求数据
import {AxiosInstance } from "axios";
import Axios from "axios";
//全局配置Axios
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$axios: AxiosInstance;
}
}
let app=createApp(App)
app.config.globalProperties.$axios=Axios; //this.Axios
app.use(route)
app.use(Antd)
app.mount('#app')