步骤很详细,直接上教程
上一篇
- 在项目目录打开终端
- 输入以下命令安装
axios
npm i axios
-
重新打开项目即可完成按照
-
测试
源码
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,最后回车