简介
vue-resource是一个通过XMLHttpRequest或JSONP技术实现异步加载服务端数据的Vue.js插件。该插件提供了一般的HTTP请求接口和RESTFUL架构请求接口,并且提供了全局方法和Vue组件实例方法。同时,它提供了数据获取各个阶段的钩子,使得我们可以对数据获取过程进行更好的控制。
安装
vue-resource提供了npm、bower、手动编译等安装方式。
1.npm
如果项目基于npm包方式来开发,则可以使用npm来安装vue和vue-resource,执行命令:
$ npm i vue vue-resource --save-dev
然后在项目中引入Vue.js和vue-resource,并且在Vue.js中注册vue-resource插件,代码示例如下:
//引入Vue.js和vue-resource
var Vue=require('vue');
var VueResource=require('vue-resource');
//注册vue-resource插件
//如果Vue.js已经在html中直接引入,则不需要执行此步骤
Vue.use(VueResource);
2.bower
当业务代码使用bower来管理时,可以使用bower安装到指定目录。为了便于举例,假定该目录是js/vendr,执行如下命令:
$ bower install vue-resource
在html中,在vue文件之后引入vue-resource,代码示例如下:
<!--引入vue-->
<script src="js/vendor/vue.js"></script>
<!--引入vue-resource-->
<script src="js/vendor/vue-resource.js"></script>
3.手动编译
当想尝试一些Vue中并未发布的新特性时,可以直接clone源码,手动构建来实现。由于在未正式发布之前,有些特性可能会被移除,所以不建议在生产环境中使用手动编译方式安装。
执行如下命令:
$ git clone https://github.com/vue.js/vue-resource.git
$ cd vue-resource
$ npm install
$ npm run build
编译后的文件在dist目录中。