美文网首页
一个简单的服务器渲染(ssr)的例子

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

作者: 好名字都让你们用了 | 来源:发表于2019-08-28 17:03 被阅读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;
    }
    

    相关文章

      网友评论

          本文标题:一个简单的服务器渲染(ssr)的例子

          本文链接:https://www.haomeiwen.com/subject/tpdmectx.html