使用Vue語法渲染你的Koa檢視檔案？

小明愛吃瓜發表於2019-02-14
Vue

前言

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

很多人想，那還不簡單，選擇一個模板引擎，再找個對應支援該引擎的Koa中介軟體不就行了；
答案是這樣的，你也能找到類似下面一堆的中介軟體：

圖片描述
圖片描述

但是有沒有想過，直接用Vue的語法與渲染你的檢視？於是你找了很多地方，你並不一定找到很好的方案，找到更多的也許是Vue ssr整合方案上去了，但是那個有很多麻煩的地方，它的比較好的使用場景是前後端同構開發；

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

有！！！

合適的中介軟體

正是因為我有上面的需求，同時也沒有找到類似的解決方案，所以我自己基於Vue的服務端渲染方案封裝了一個Koa中介軟體，可以實現上面的所有需求，她的地址：

github.com/imingyu/koa…

可以檢視git倉庫中test資料夾，裡面涉及了場景需求的單元測試，均已通過，可以放心使用

此中介軟體目前支援Koa2版本，最近我會更新下，讓她也支援Koa1；

安裝

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啦，歐耶！

相關文章