回头我会补上Vuejs通过Vue-cli创建项目的过程

目前我们已经通过Vue-cli工具搭建了vuejs项目,那么问题来了,关于我们常用的网路请求,vuejs是不带的,只能通过第三方工具来实现这部分需求。
常用的像jQuery可以满足这部分需求,但是目前来讲,如果你已经接触到Nodejs并用上了Vuejs框架的话,你还用jQuery就未免显得太Low了。之前我用superagent来实现网络请求,用Promise封装了异步,实现同步请求,但是和Vuejs这么高大上的框架比来显得有些格格不入。所以我采用了基于Vuejs开发的第三方插件vue-resource来实现网络请求。

vue-resource Github主页

关于如何引入,官方文档写的还是比较粗糙的,只针对熟悉Vuejs框架的人,接下来我们要进入一个快车道,迅速集成vue-resource
首先通过npm安装vue-resource

npm install vue-resource -S

或者你可以安装到全局(不推荐)
然后在Vuejs项目的入口文件引入(src/main.js)

import VueResource from 'vue-resource'

并且插入Vuejs

Vue.use(VueResource)

这样,你在组件里就可以通过如下方式来进行网络请求。

this.$http.get('/api').then()

关于vue-resource的get和post网络请求方式参考如下文档,是个码农就能看明白

vue-resource插件GET/Post请求方式

接下来我们说说关于POST请求方式的参数格式问题。
vue-resource对于POST传参默认是以application/json方式传递,如果你的请求方式是一个k=>v的形式传递的话,你得把vue-resource的传参模式改成x-www-form-urlencode格式,修改方法如下:

Vue.use(VueResource)

之后增加一行:

Vue.http.options.emulateJSON = true;

如果你的请求方式是RESTfull的话,就改成:

Vue.http.options.emulateHTTP = true;

最后,关于跨域(适用webpack打包)

在Vuejs里面跨域是不被允许的(基本上都不允许),所以我们要通过代理(proxy)的方式进行url伪装。
具体方法如下:
在Vuejs的配置文件里面能找到一项proxyTable的配置,增加一个代理条件:

proxyTable: {
    '/api': {
        target: 'http://yourdomain/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api':''
        }
    }
}

这样的话你就能通过

this.$http.get('/api').then()

来进行跨域请求,它会把/api代理到http://yourdomain/api进行请求。
下班前赶这么一篇文章也是蛮急的,将就看吧。