使用node+vue.js实现SPA应用

业务需求

最近公司要求开发web版的app,由于app是偏向内容方面，而且带了一个聊天模块，所以一般的多页开发不是很适合，而且主要是手机浏览，对加载速度或者用户体验来说都比较苛刻。调研了很多框架和模式，最后自己东拼西凑搞出来了这么一个玩意。

服务端

毫无疑问使用node，使用typescript可以有效的在编码同时查错，强类型语言写服务端毫无压力。

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var WebpackConfig = require('./webpack.config')

import as index from "./routes/index";
import as foo from "./routes/foo";
import * as bar from "./routes/bar";

var app = express();

//启动服务的时候 打包并监听客户端用到的文件，webpackDevMiddleware是开发模式，他会打包js在内存里面,你改了文件，它也会重新打包
app.use(webpackDevMiddleware(webpack(WebpackConfig),{
publicPath: '/build/',stats: {
colors: true
}
}));

//一般的配置项
app.set('views',dirname + '/views');
app.set('view engine','ejs');
app.set('view options',{ layout: false });
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(methodOverride());
app.use(express.static(dirname + '/public'));

var env = process.env.NODE_ENV || 'development';
if (env === 'development') {
app.use(errorHandler());
}

//路由配置
app.get('/',index.index);
app.get('/foo',foo.index);
app.get('/bar',bar.index);

app.listen(3000,function(){
console.log("Demo Express server listening on port %d in %s mode",3000,app.settings.env);
});

export var App = app;

服务端渲染页面

var Vue = new vueServer.renderer(); //创建一个服务端的vue

export function index(req: express.Request,res: express.Response) {

//创建一个组件
var vm = new Vue({
template: `

This is index!

` });

//等待html渲染完成，再返回给浏览器 vueServer.htmlReady是vue-server的自带事件
vm.$on('vueServer.htmlReady',function(html:string) {
//这里用的是ejs模板 可以把需要用到的数据设置成window下的全局变量，方便客户端的js访问。
res.render('layout',{server_html:html,server_data:'window.cm_data = {name:"张三"}'})
});

};

标签都可以动态设置，只要传参数进来就可以 Vue Router Example

//这里的id是前端需要用到的一个标识
<div id="app">

Hello App!

//router-view是客户端vue-router需要解析的dom //server_html是根据访问url地址生成的html,是做SEO的重点，不加载下面的app.js也可以看到内容 <%-server_html%>

//webpack打包好的js,主要是路由配置