vue中使用vue-resource、axios、fetch-jsonp请求数据

1.使用vue-resource

• 安装vue-resource：

cnpm install vue-resource --save

• 去main.js文件配置vueResource（先导入，再使用）：

//导入vue-resouece
import vueResource from 'vue-resource';
//使用  与整个Vue实例进行关联，关联之后才能用vueResource进行请求
Vue.use(vueResource);

• 创建Mock.vue文件，在其中使用：

Mock.vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Mock.vue

• 在App.vue中进行导入与配置：

方法见：“vue中创建单文件组件、注册组件、使用组件”

• 在Mock.vue中请求数据：

2.使用axios
请求mock数据、远程api、支持的是cros跨域

• 安装axios：

cnpm install axios --save

• 创建Axios.vue文件，在其中使用：

Axios.vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Axios.vue

• 在App.vue中进行导入与配置：

方法见：vue中创建单文件组件、注册组件、使用组件

• 导入axios：

在哪里使用，在哪里导入

 import axios from 'axios'

• 在Axios.vue中请求数据：

局部axios

Q：怎样将局部axios打包成全局axios？
A：去main.js文件配置axios：

//配置axios 全局使用  $后的名字为自定义
import axios from 'axios';
Vue.prototype.$axios=axios; 

使用时需写为：

3.使用Fetch-jsonp
请求mock数据、远程api、支持的是jsonp跨域

• 安装fetch-jsonp：

cnpm install fetch-jsonp --save

• 创建Fetchjsonp .vue文件，在其中使用：

Fetchjsonp .vue：可在src目录下新建一个文件名为MyComponents，在文件中新建一个文件夹，可命名为Fetchjsonp .vue

• 导入fetch-jsonp：

在哪里使用，在哪里导入

 import Fetchjsonp from 'fetch-jsonp'

• 在Fetchjsonp.vue中请求数据：