前言
Koa是Express團隊開發(fā)新一代Node Web應用開發(fā)框架港粱，當你使用她開發(fā)你的Web應用時螃成，一件很重要的事肯定就是——怎樣渲染我的視圖？
很多人想查坪，那還不簡單寸宏，選擇一個模板引擎，再找個對應支持該引擎的Koa中間件不就行了偿曙；
答案是這樣的氮凝，你也能找到類似下面一堆的中間件：
koa views.png
但是有沒有想過，直接用Vue的語法與渲染你的視圖望忆？于是你找了很多地方罩阵，你并不一定找到很好的方案，找到更多的也許是Vue ssr集成方案上去了启摄，但是那個有很多麻煩的地方稿壁，它的比較好的使用場景是前后端同構開發(fā)；
而你現(xiàn)在只想簡單的歉备，要Vue的語法傅是，和他的一些其他核心特性，如：組件化、指令喧笔、過濾器等帽驯；有沒有這樣一個現(xiàn)成Koa中間件？
有Ｊ檎ⅰＤ岜洹！
合適的中間件
正是因為我有上面的需求梗劫，同時也沒有找到類似的解決方案享甸，所以我自己基于Vue的服務端渲染方案封裝了一個Koa中間件，可以實現(xiàn)上面的所有需求梳侨，她的地址：
https://github.com/imingyu/koa-vue-view
可以查看git倉庫中test文件夾蛉威，里面涉及了場景需求的單元測試，均已通過走哺，可以放心使用
此中間件目前支持Koa2版本蚯嫌，最近我會更新下，讓她也支持Koa1丙躏；
安裝
npm i -S koa-vue-view
使用
<!--模板： ./views/Master.vue -->
<template>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{hight(app.name)}} - {{app.version}}</title>
<slot name="meta"></slot>
</head>
<body>
<h1>{{layoutName}} - {{layoutVersion}}</h1>
<slot name="top"></slot>
<slot></slot>
<slot name="bottom"></slot>
</body>
</html>
</template>
<!--組件： ./components/Age.vue -->
<template>
<strong style="color:red;">
<slot></slot>
</strong>
</template>
<!--頁面： ./views/User.vue -->
<template>
<Master>
<ul>
<li v-for="(item,index) in users" :key="index">{{item.name}} <Age>{{ add(item.age, 1) }}</Age></li>
</ul>
</Master>
</template>
var path = require('path');
var Koa = require('koa');
var VueView = require('koa-vue-view');
var app = new Koa();
app.use(VueView({
methodName: 'render',//在koa ctx注冊渲染視圖的方法名择示，默認render
data: {
_: require('lodash'),
app: {
name: 'Github',
version: '1.0.0'
}
},
methods: {
add(a, b) {
return a + b;
}
},
components: {
Master: {
path: path.resolve(__dirname, './views/Master.vue'),
data() {
this.layoutVersion = '1.0.0';
return {
layoutName: 'master'
}
},
methods: {
hight(str) {
return `***${str}***`;
}
}
},
Age: path.resolve(__dirname, './components/Age.vue')
}
}));
app.use(ctx => {
ctx.state.users = [{
name: 'Tom',
age: 20
}, {
name: 'Alice',
age: 18
}];
ctx.render(path.resolve(__dirname, './views/User.vue'));
/*
或者
ctx.render({
path:path.resolve(__dirname, './views/User.vue'),
data(){
return {name:'Github'}
},
methods:{
show(){}
}
});
*/
})
app.listen(8200);
運行上述代碼后，你就會發(fā)現(xiàn)晒旅，哇塞Ｕっぁ！ 可以在Koa視圖里歡快的玩耍Vue啦废恋，歐耶谈秫！
