vuecli4安装axios以及简单使用

vuecli4安装axios

• 地址
  
  https://www.npmjs.com/package/axios
• 进入终端项目根目录安装,命令
  
  npm install axios
• 安装之后,node_modules里面会多一个axios文件;

使用

• 全局引入,在main.js中引入
  
  //引入axios Axios别名 axios文件

import Axios from 'axios'
• 定义绑定到vue实例上面去,后面就可以直接用了

//定义绑定到vue实例上面去
//给vue定义一个属性,属性的名字自定义,暂时叫axios,这个随便定义,可以叫$http或$axios;Axios是引入是定义的别名
//后面使用的时候,直接用vue实例访问定义的axios这个属性就可以了
Vue.prototype.axios = Axios

• eg:

import Axios from 'axios'

//定义绑定到vue实例上面去
//给vue定义一个属性,属性的名字自定义,暂时叫axios,这个随便定义,可以叫$http或$axios;Axios是引入是定义的别名
//后面使用的时候,直接用vue实例访问定义的axios这个属性就可以了
Vue.prototype.axios = Axios

..............................................................


<template>
	<ul class="lan-list">
		<li v-for="(v,index) in nav_list" :key="index">{{v}}</li>				
	</ul>
</template>

<script>
	export default{
		// 生命周期函数,创建成功的时候调用
		created:function(){
			var url = 'http://139.196.186.154:8080'
			console.log(url)
			this.axios.get(url).then(res=>{
				console.log(res.data.data)
				this.nav_list = res.data.data
			})			
		},
		data:function(){
			return{ 
				nav_list:[]
			}
		}
	}
</script>

<style scoped="scoped">
	
</style>

vue-axios 这种也有人用,上面那种最简单

• 安装 npm install --save axios vue-axios
• 使用

//引入axios Axios别名  axios文件
import Axios from 'axios'
import VueAxios from 'vue-axios'
// Vue.prototype.axios = Axios
Vue.use(VueAxios, Axios)