美文网首页Vue3.X基础入门
vue3.x+typescript 配置全局属性-vue3配置全

vue3.x+typescript 配置全局属性-vue3配置全

作者: 我爱张智容 | 来源:发表于2021-02-07 09:37 被阅读0次

    前面我们给大家讲过可以通过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')
    
    

    相关文章

      网友评论

        本文标题:vue3.x+typescript 配置全局属性-vue3配置全

        本文链接:https://www.haomeiwen.com/subject/ckavoktx.html