Vue使用vue-resource插件

一、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的方式调用数据。