Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/imingyu/koa-vue-view
A Koa view engine which renders Vue components on server.
https://github.com/imingyu/koa-vue-view
engine koa koa-middleware koa-view koa-vue koa-vue-view vue-server-renderer vue-ssr
Last synced: about 1 month ago
JSON representation
A Koa view engine which renders Vue components on server.
- Host: GitHub
- URL: https://github.com/imingyu/koa-vue-view
- Owner: imingyu
- License: mit
- Created: 2017-10-10T02:42:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-21T10:44:47.000Z (almost 7 years ago)
- Last Synced: 2024-10-26T19:49:10.607Z (about 2 months ago)
- Topics: engine, koa, koa-middleware, koa-view, koa-vue, koa-vue-view, vue-server-renderer, vue-ssr
- Language: JavaScript
- Size: 39.1 KB
- Stars: 31
- Watchers: 4
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-koa - koa-vue-view - Koa视图渲染中间件，用于在服务端渲染Vue组件。 [](https://www.npmjs.com/package/koa-vue-view) (仓库 / 中间件)
README
# koa-vue-view
[](https://travis-ci.org/imingyu/koa-vue-view)
[](https://www.npmjs.com/package/koa-vue-view)
[](https://www.npmjs.com/package/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代码
# 安装
```bash
npm i -S koa-vue-view
```
# 使用
```html
{{hight(app.name)}} - {{app.version}}
{{layoutName}} - {{layoutVersion}}
- {{item.name}} {{ add(item.age, 1) }}
```
```javascript
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
```javascript
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
```javascript
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](https://github.com/imingyu/koa-vue-view/issues/1)
## 1.1.2
- fix issues[#1](https://github.com/imingyu/koa-vue-view/issues/1)
## 2.1.3
- 核心功能实现
## 1.1.1
- 核心功能实现