使用Vue語法渲染你的Koa視圖文件？

時間 2019-12-07

標籤使用 vue 語法渲染 koa 視圖文件简体版

原文原文鏈接

前言

Koa是Express團隊開發新一代Node Web應用開發框架，當你使用她開發你的Web應用時，一件很重要的事確定就是——怎樣渲染個人視圖？javascript

不少人想，那還不簡單，選擇一個模板引擎，再找個對應支持該引擎的Koa中間件不就好了；
答案是這樣的，你也能找到相似下面一堆的中間件：
html

可是有沒有想過，直接用Vue的語法與渲染你的視圖？因而你找了不少地方，你並不必定找到很好的方案，找到更多的也許是Vue ssr集成方案上去了，可是那個有不少麻煩的地方，它的比較好的使用場景是先後端同構開發；vue

而你如今只想簡單的，要Vue的語法，和他的一些其餘核心特性，如：組件化、指令、過濾器等；有沒有這樣一個現成Koa中間件？java

有！！！git

合適的中間件

正是由於我有上面的需求，同時也沒有找到相似的解決方案，因此我本身基於Vue的服務端渲染方案封裝了一個Koa中間件，能夠實現上面的全部需求，她的地址：github

github.com/imingyu/koa…npm

能夠查看git倉庫中test文件夾，裏面涉及了場景需求的單元測試，均已經過，能夠放心使用後端

此中間件目前支持Koa2版本，最近我會更新下，讓她也支持Koa1；bash

安裝

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);複製代碼

運行上述代碼後，你就會發現，哇塞！！能夠在Koa視圖裏歡快的玩耍Vue啦，歐耶！app

相關標籤/搜索

渲染