一、vue-resource插件的安装
使用 npm:
$ cnpm install vue-resource --save
//个人建议后面添加 --save 这样会自动把插件配置到package.json文件内
二、vue-resource插件的引用
出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。
1、创建引用文件:
用ide打开项目文件,在src目录下创建文件夹resource,后在文件夹内创建index.js。如图:
2.编写引用的相关代码:
step1: resource下的index.js:
import Vue from 'vue';
/*引入资源请求插件*/
import VueResource from 'vue-resource';
/*使用VueResource插件*/
Vue.use(VueResource);
export default({
});
step2: src下的main.js,代码引入已经引用好的resource文件
import Vue from 'vue';
import App from './App';
import router from './router';
import resource from './resource';//通过import引入
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
resource,//通过import引入,然后在这里调用
components: { App },
template: '<App/>'
});
tip:如果代码没有反应,请用cmd进入到项目目录,$cnpm run dev。
step2: 然后直接在组建里面发起请求就可以了,例如:
export default{
data(){
return{
}
},
methods:{
getData(){
// //请求数据
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20page=1'
this.$http.get(api).then((res)=>{
console.log(res)
},function(err){
console.log(err)
})
}
}
}
只要实现该效果即可。不过出于安全性的考量,建议大家使用vue-axios的方式调用数据。