A RetroSearch Logo

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

Search Query:

Showing content from https://github.com/imingyu/koa-vue-view below:

imingyu/koa-vue-view: A Koa view engine which renders Vue components on server.

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等部分都会原样输出

<!--模板： ./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);
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中； 
app.use(ctx => {
    ctx.render(文件路径|组件配置对象).then(html=>{})
})

1.x对应的是koa1适用的版本，2.x对应的是koa2对应的版本；

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