这个小节里，我们要通过和后端数据交互实现一个登录的功能。
这里我们要用到vue-resource，vue-resouce就相当于jQuery的$.ajax，是用来访问后端数据的。
安装
npm install vue-resource
简单调用
在main.js中引用vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)
在Login.vue中改写login方法
login:function(){
this.$http.get('http://*****/authenticate/credentials'
,{
params:{
UserName : this.username,
Password : this.password
}
})
.then(
response => {
this.message = '';
router.push({path:'/main'});
}
,response =>{
this.message = '用户名或密码错误';
}
);
}
可以看到我们使用了this.$http.get方法，我们传了两个参数url和params，分别是API的地址和参数。then方法的参数是两个函数，第一个是访问成功的回调函数，第二个是访问失败的回调函数。
具体可参考官方文档
全局root url
url每次都带上长长的根路径http://*****，确实很烦人，我们在全局中配置一下。
在main.js中
Vue.use(VueResource);
Vue.http.options.root = 'http://****';
然后在login方法中
this.$http.get('authenticate/credentials')
这里面有一个tricky的地方，正确的是authenticate/credentials，而不是/authenticate/credentials，多了个/会变成网站个根目录，也就是'http://localhost:8080'。
开发和生产环境
我们的开发环境API和生产环境API往往是分开的。我们下面用webpack给开发环境和生产环境配置不同的接口地址。
首先我们找到下面的文件：
/config/dev.env.js
/config/prod.env.js
这两个文件就是针对开发环境和生产环境设置不同参数的文件。
我们先打开dev.env.js，修改一下开发环境的配置。在module.exports加入一行
API_ROOT: '"http://***"'
类似的我们再修改一下prod.env.js。
在main.js中调用设置好的参数。
Vue.http.options.root = process.env.API_ROOT
