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

步调很具体，直接上教程
  上一篇

• 在项目目录打开终端
  

• 输入以下命令安装axios
  

1. npm i axios

复制代码

• 重新打开项目即可完成按照
  
• 测试
  

   源码
  main.js

1. import Vue from 'vue'
2. import App from './App.vue'
4. //全局引入axios
5. // 引入axios
6. import axios from 'axios';
7. // 挂载到vue原型链上
8. Vue.prototype.axios = axios;
10. Vue.config.productionTip = false
12. new Vue({
13.   render: h => h(App),
14. }).$mount('#app')

复制代码

App.vue

1. <template>
2.   <div id="app">
3.     <TestComponent/>
4.   </div>
5. </template>
6. <script>
7. import TestComponent from "./components/TestComponent.vue";
8. export default {
9.   name: "App",
10.   components: {
11.    TestComponent
12.   },
13.   data() {
14.     return {
15.     };
16.   },
17.   methods: {
18.   }
19. };
20. </script>
21. <style></style>

复制代码

TestComponent.vue

1. <template>
2.   <div>
3.     <button @click="onClick">点击输出</button>
4.   </div>
5. </template>
7. <script>
8. //局部导入axxios
9. //import axios from 'axios'
10. export default {
11.     data() {
12.     return {
13.       list: [],
14.     };
15.   },
16.   methods: {
17.     onClick() {
18.         console.log(this.list);
19.     },
20.   },
21.   async created() {
22.     //全局导入了axios需要加this,局部的不用this
23.     const res = await this.axios.get("http://hmajax.itheima.net/api/news");
25.     setTimeout(() => {
26.       this.list = res.data.data;
27.     }, 2000);
28.   },
29. };
30. </script>
32. <style lang="less" scoped>
33. </style>

复制代码

  效果演示