Vue2 + webpack + express4构建单页应用(二)

根据Vue2 + webpack + express4构建单页应用(一)已经构建了一个基本的小应用，但是还没有解决jquery的ajax请求、style模块中使用less等问题

一、实现异步请求及转发

1.客户端发起请求

一直实现异步请求都是用ajax（XMLHttpRequest）来实现的 ,最近兴起了ajax的替代技术fetch,XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题。

我在github上选择了一个支持前后端同构的fetch插件：https://github.com/matthew-andrews/isomorphic-fetch

在项目中执行 npm install --save isomorphic-fetch es6-promise 下载插件，可以在需要的地方按照下面方式使用：

import es6Promise from 'es6-promise';
import fetch from 'isomorphic-fetch';
es6Promise.polyfill();

fetch('//offline-news-api.herokuapp.com/stories')
    .then(function(response) { 
        if (response.status >= 400) { 
            throw new Error("Bad response from server"); } return response.json(); }
     )     
    .then(function(stories) { console.log(stories); });

一般在项目中会将以上代码抽离出来写成一个方法单独抽离出成一个文件，使用时引入文件调用该方法

2.node端转发异步请求

node有一个http转发的中间件http-proxy-middleware

npm install http-proxy-middleware --save 下载中间件

然后在app.js中引入中间件并注册

var proxy = require('http-proxy-middleware');
app.use('/api', proxy({target: 'http://www.example.org', changeOrigin: true}));

详细使用，参考 https://github.com/chimurai/http-proxy-middleware#options

二、使用less预编译语言

现在写样式一般可以使用预编译语言less或者sass

根据个人习惯我选用的less，使用less需要有一下配置：

1.在.vue文件中的