Skip to content

A Koa view engine which renders Vue components on server.

License

Notifications You must be signed in to change notification settings

imingyu/koa-vue-view

Repository files navigation

koa-vue-view

Build Status image image image

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部分,其他的如stylescript等部分都会原样输出

待添加功能:

  • 不应编译视图文件中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);

规约

  • 在读取视图文件内容时,会将其内容分割为三部分:headertemplatefooter
    • 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

  • 核心功能实现