vue快速入门（四十三）axios模块的安装与引入

本文主要是介绍vue快速入门（四十三）axios模块的安装与引入，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

步骤很详细，直接上教程

上一篇

1. 在项目目录打开终端

2. 输入以下命令安装axios

npm i axios

3. 重新打开项目即可完成按照

4. 测试

源码

main.js

import Vue from 'vue'
import App from './App.vue'//全局引入axios
// 引入axios
import axios from 'axios';
// 挂载到vue原型链上
Vue.prototype.axios = axios;Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

App.vue

<template><div id="app"><TestComponent/></div>
</template>
<script>
import TestComponent from "./components/TestComponent.vue";
export default {name: "App",components: {TestComponent},data() {return {};},methods: {}
};
</script>
<style></style>

TestComponent.vue

<template><div><button @click="onClick">点击输出</button></div>
</template><script>
//局部导入axxios
//import axios from 'axios'
export default {data() {return {list: [],};},methods: {onClick() {console.log(this.list);},},async created() {//全局导入了axios需要加this,局部的不用thisconst res = await this.axios.get("http://hmajax.itheima.net/api/news");setTimeout(() => {this.list = res.data.data;}, 2000);},
};
</script><style lang="less" scoped>
</style>

效果演示

🎁附加：

如何在终端关闭当前已经打开的项目

先Ctrl+c,再输入y，最后回车

这篇关于vue快速入门（四十三）axios模块的安装与引入的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---