一个简单的服务器渲染(ssr)的例子

2019-08-28  本文已影响0人  好名字都让你们用了

一个简单的服务器渲染(ssr)的例子

  1. 创建一个 Vue 实例
  2. 创建一个 renderer
  3. 将 Vue 实例渲染为 HTML
const Vue = require('vue')
module.exports = async ctx => {
    // 第 1 步:创建一个 Vue 实例
    const app = new Vue({
        data: {
            list: [
                {path: '/login',name: '登陆'},
                {path: '/logout',name: '登出'},
                {path: '/list',name: '购物车列表'},
            ]
        },
        template: 
        `<ol>
        <li v-for="(item,index) in list" :key="index"><a :href="item.path">{{item.name}} {{item.path}} </a></li>
        </ol>`
    })
    // 第 2 步:创建一个 renderer
    const renderer = require('vue-server-renderer').createRenderer()
    // 将 Vue 实例渲染为 HTML
    let result = await renderer.renderToString(app);
    // 给前端输出html
    ctx.body = result;
}
上一篇下一篇

猜你喜欢

热点阅读