A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.npmjs.com/package/koa-vue-view below:

koa-vue-view - npm

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组件的编写语法，但是仅会处理其中的template部分，其他的如style，script等部分都会原样输出

待添加功能： 安装 使用 
<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>
 
<template>
    <strong style="color:red;">
        <slot></slot>
    </strong>
</template>
 
 
<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',
    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'));
    
})
 
 
app.listen(8200);
规约 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 2.1.5 1.1.2 2.1.3 1.1.1

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4