koa-vue-view

    2.1.6 • Public • Published

    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

    • 核心功能实现

    Install

    npm i koa-vue-view

    DownloadsWeekly Downloads

    14

    Version

    2.1.6

    License

    MIT

    Last publish

    Collaborators

    • avatar