koa-vue-view
A Koa view engine which renders Vue components on server.
1.x的分支/npm包支持koa1；master分支和2.x版本的npm包支持koa2。
需求
我熟悉书写vue的代码，感觉她的语法很简洁明了，并且支持组件化；我最近在学习使用koa编写node web应用，在koa框架中渲染视图有很多选择；但是我想在koa中使用vue来渲染视图；
我在调研了vue的ssr解决方案后，感觉她很好，但是不满足我的需求，我只是想用她的语法和组件化来实现视图渲染，渲染的数据想从koa的ctx.state中读取，也不想前后端同用同一套路由这种方式；
所以我觉得用vue的ssr的基础部分——服务端渲染vue实例，来完成我的需求，即此中间件诞生；
本中间件包含功能：
- 服务端渲染vue语法的视图文件
- 视图文件的语法采用vue组件的编写语法
- 支持vue的组件化
- 支持全局数据、组件等共享
注意：本中间件虽然支持vue组件的编写语法，但是仅会处理其中的
template部分，其他的如style，script等部分都会原样输出
待添加功能：
- 不应编译视图文件中template标签中的前端用的vue代码
安装
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);规约
- 在读取视图文件内容时，会将其内容分割为三部分：
header、template、footer；template截取自文件中第一对顶级template标签中的内容；header截取自文件中第一对顶级template标签的前面内容；footer截取自文件中第一对顶级template标签的后面内容；- 视图文件中仅允许包含一对顶级
template标签
- 渲染视图时仅渲染
template部分
Options
app.use(require('koa-vue-view')(options));可接受的options选项：
| 选项 | 类型 | 默认值 | 描述 |
| methodName | string | render | 在koa ctx注册渲染视图的方法名，默认render |
| replaceBody | boolean | true | 是否使用渲染后的字符串替换ctx.body的内容 |
| appendBody | boolean | false | replaceBody=true时，将渲染后的字符串追加到ctx.body中还是直接赋值给ctx.body |
| filterHtml | function | 可指定一个函数用于过滤render之后的html字符串，ctx.body=函数返回值=过滤后的字符串 | |
| cache | boolean | process.env.NODE_ENV === 'production' | 是否启用缓存，启用后仅在第一次加载视图时读取其内容，后续将从缓存中读取 |
| renderer | object | require('vue-server-renderer').createRenderer() | vue ssr 渲染器 |
| data | object|function | 全局共享数据对象，在所以组件和页面中都可以共享使用，如果传递的是function，则执行function的this对象指向运行的组件或者页面的vue实例 | |
| vue mixin可接受的任意选项，如：data，methods，components | 将以mixin的方式，添加到每个渲染的页面的mixins中； |
Render
app.use(ctx => {
ctx.render(文件路径|组件配置对象).then(html=>{})
})更新日志
1.x对应的是koa1适用的版本，2.x对应的是koa2对应的版本；
2.1.6 | 1.1.6
- 解决全局组件中引用全局组件时渲染出错的问题；
- 加入
filterHtml配置项，用于过滤渲染后的html字符串
2.1.5
- fix issues#1
1.1.2
- fix issues#1
2.1.3
- 核心功能实现
1.1.1
- 核心功能实现