https://github.com/imingyu/koa-vue-view

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

engine koa koa-middleware koa-view koa-vue koa-vue-view vue-server-renderer vue-ssr

Last synced: 2 months ago
JSON representation

A Koa view engine which renders Vue components on server.

• Host: GitHub
• URL: https://github.com/imingyu/koa-vue-view
• Owner: imingyu
• License: mit
• Created: 2017-10-10T02:42:00.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2017-12-21T10:44:47.000Z (over 6 years ago)
• Last Synced: 2024-04-01T06:08:51.059Z (3 months ago)
• Topics: engine, koa, koa-middleware, koa-view, koa-vue, koa-vue-view, vue-server-renderer, vue-ssr
• Language: JavaScript
• Size: 39.1 KB
• Stars: 31
• Watchers: 4
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-koa - koa-vue-view - Koa视图渲染中间件，用于在服务端渲染Vue组件。 [](https://www.npmjs.com/package/koa-vue-view) (仓库 / 中间件)

README

        
# koa-vue-view

[![Build Status](https://travis-ci.org/imingyu/koa-vue-view.svg?branch=master)](https://travis-ci.org/imingyu/koa-vue-view)

![image](https://img.shields.io/npm/l/koa-vue-view.svg)

[![image](https://img.shields.io/npm/v/koa-vue-view.svg)](https://www.npmjs.com/package/koa-vue-view)

[![image](https://img.shields.io/npm/dt/koa-vue-view.svg)](https://www.npmjs.com/package/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语法的视图文件

- 视图文件的语法采用vue组件的编写语法

- 支持vue的组件化

- 支持全局数据、组件等共享

> 注意：本中间件虽然支持vue组件的编写语法，但是仅会处理其中的`template`部分，其他的如`style`，`script`等部分都会原样输出

## 待添加功能：

- 不应编译视图文件中template标签中的前端用的vue代码

# 安装

```bash

npm i -S koa-vue-view

```

# 使用

```html

    

    

        

        

        

        {{hight(app.name)}} - {{app.version}}

        

    

    

        
{{layoutName}} - {{layoutVersion}}

        

        

        

    


    

    

        

    

    

        


            
{{item.name}} {{ add(item.age, 1) }}

        

    


```

```javascript

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);

```

# 规约

- 在读取视图文件内容时，会将其内容分割为三部分：`header`、`template`、`footer`；

    - `template`截取自文件中第一对顶级`template`标签中的内容；

    - `header`截取自文件中第一对顶级`template`标签的前面内容；

    - `footer`截取自文件中第一对顶级`template`标签的后面内容；

    - **视图文件中仅允许包含一对顶级`template`标签**

- **渲染视图时仅渲染`template`部分**

# Options

```javascript

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

```javascript

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](https://github.com/imingyu/koa-vue-view/issues/1)

## 1.1.2

- fix issues[#1](https://github.com/imingyu/koa-vue-view/issues/1)

## 2.1.3

- 核心功能实现

## 1.1.1

- 核心功能实现