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

一个简单的服务器渲染(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;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 对于客户端应用来说,服务端渲染是一个热门话题。然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js ...
    summerbluet阅读 8,130评论 1 12
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 4,866评论 0 1
  • 在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: ...
    hubcarl阅读 11,219评论 0 19
  • 我见过有的人在一起五六年最后还是分手,也见过认识两个月就闪婚一路走到现在。所以和一个人能不能走到最后真的跟别的没有...
    ABBYABBIE_cfd7阅读 754评论 0 0
  • 嗯,我恋爱了,我分手了! 我每天和那个人说着再亲密的话,每天都在思考怎么样解决我们距离的鸿沟!但我真的错了,我真的...
    海草姑娘阅读 1,027评论 0 1