vue3.0没有全局的vue对象 需要使用app.config.globalProperties 去扩展全局方法
然后createApp(App).use(axios) 使用
use的用法
参数:
{Object | Function} plugin
...options (可选)
用法:
安装 Vue.js 插件。如果插件是一个对象,它必须暴露一个 install 方法。
如果它本身是一个函数,它将被视为安装方法。
该安装方法将以应用实例作为第一个参数被调用。
传给 use 的其他 options 参数将作为后续参数传入该安装方法。
当在同一个插件上多次调用此方法时,该插件将仅安装一次。
axios.ts
"use strict";
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
let config = {
// baseURL: process.env.baseURL || process.env.apiUrl || ""
// timeout: 60 * 1000, // Timeout
// withCredentials: true, // Check cross-site Access-Control
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
function(config) {
// Do something before request is sent
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
_axios.interceptors.response.use(
function(response) {
// Do something with response data
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
export default {
install:function(app:any, options:any) {
// 添加全局的方法
app.config.globalProperties.axios = _axios;
// 添加全局的方法
app.config.globalProperties.$translate = (key: any) => {
return key
}
}
}
main.ts
import { createApp } from 'vue'
import App from './App.vue'
// @ts-ignore
import axios from './plugins/axios.ts'
// @ts-ignore
import installElementPlus from './plugins/element.ts'
// 引入公共scss
import './element-variables.scss'
import router from './router'
const app = createApp(App).use(router).use(axios)
installElementPlus(app)
app.mount('#app')
使用Home.vue
<template>
<div class="home">
<div @click="clickEvent('2313216351')">
2313216351
</div>
</div>
</template>
<script lang="ts">
import {defineComponent,getCurrentInstance} from 'vue';
export default defineComponent({
name: 'Home',
mounted(){
// 使用
const { proxy }:any = getCurrentInstance(); //获取上下文实例,ctx=vue2的this
proxy.axios.post('api/Login',{card:111}).then((e:any)=>{
console.log(e)
})
},
methods: {
clickEvent(num:string): void {
alert(num)
}
}
});
</script>
<style scoped lang="scss">
.home {
background: $--bg-color;
div {
color: $--color-primary;
}
}
</style>