第一步:先安装axios
yarn add axios / npm install axios

##main.js
import {
	createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import print from 'vue3-print-nb'
import axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$http = axios;
app.use(ElementPlus)
app.use(router)
app.use(print)
app.mount('#app')

vue3的挂载方式:app.config.globalProperties.$http = axios;
第一次不会用,所以百度了一下,是这样写的:
在这里插入图片描述
在这里插入图片描述
结果:在这里插入图片描述

打印一下解构出来的ctx
const {ctx}=getCurrentInstance()
console.log(ctx);

在这里插入图片描述

好家伙,打印出来的数据里面没有我自定义的$http

再来打印一下getCurrentInstance()
在这里插入图片描述

		`$http藏得挺深啊!!`

在这里插入图片描述

const {
	appContext: {
		config: {
			globalProperties: {
				$http
			}
		}
	}
} = getCurrentInstance();

在这里插入图片描述
成功了!第一次用vue3就踩到了坑。记录一下。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐