上一篇讲解了ssr的原理，这篇主要讲基本用法：

1.安装

npm install vue vue-server-renderer --save

我们将在整个指南中使用 NPM，但你也可以使用 Yarn。

注意：　　
  • 推荐使用 Node.js 版本 6+ 。
  • vue -server -renderer 和 vue 必须匹配版本。 必须匹配版本。
  • vue -server -renderer 依赖一些 Node.js  原生模块，因此只能在 Node.js原生模块 中使用。 我们可能会提供一个更简单的构建，以在将来其他「 JavaScript  运行时(runtime)」运行。

2.渲染一个 Vue 实例

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({ template: `<div>Hello World</div>` })
// 第 2 步：创建一个
renderer const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 实例渲染为
HTML renderer.renderToString(app, (err, html) => {
 if (err) throw err
 console.log(html)
 // => <div data-server-rendered="true">Hello World</div>
})

　　

3.与服务器集成

在 Node.js 服务器中使用时相当简单直接，例如 Express：

npm install express --save

　

创建一个server.js

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer() server.get('*', (req, res) => {
    const app = new Vue({
        data: { url: req.url },
        template: `<div>访问的 URL 是： {{ url }}</div>`
    })
     renderer.renderToString(app, (err, html) => {
         if (err) {
             res.status(500).end('Internal Server Error')
             return
         }
        res.end(`
            <!DOCTYPE html>
                <html lang="en">
                    <head><title>Hello</title></head>
                    <body>${html}</body>
                </html>
        `)
    })
})
server.listen(8080)

　

Vue SSR: 基本用法 （二）的更多相关文章

  1. Vue SSR的渲染性能

    一.前言 前端技术年年有新宠,Vue.js 2.0以其轻量级.渐进式.简洁的语法在MVVM框架中脱颖而出,一经推出便很受业界青睐. 为了提高首屏渲染速度 缓存+直出 是必不可少的.在Vue 1× 时代 ...

  2. vue SSR 部署详解

    先用vue cli初始化一个项目吧. 输入命令行开始创建项目: vue create my-vue-ssr 记得不要选PWA,不知为何加了这个玩意儿就报错. 后续选router模式记得选 histor ...

  3. Vue SSR初探

    因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...

  4. Vue源码分析(二) : Vue实例挂载

    Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...

  5. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  6. checkbox在vue中的用法小结

    关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...

  7. 转载一篇好理解的vue ssr文章

    转载:原文链接https://www.86886.wang/detail/5b8e6081f03d630ba8725892,谢谢作者的分享 前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟 ...

  8. Vue SSR不可不知的问题

    Vue SSR不可不知的问题 本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题. ssr的应用场景 1.SEO需求 SE ...

  9. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

随机推荐

  1. Zend与PHP之间到底是什么关系

    Zend与PHP之间是什么关系 What is Zend's relationship with PHP? 每次看到PHP虚拟机中出现zend.zendvar之类的都很困惑,特意查了一下... PHP ...

  2. Android--Tween补间动画

    前言 Android除了支持逐帧动画之外,也提供了对补间动画的支持,补间动画就是指开发人员只需要指定动画的开始.动画结束的"关键帧",而动画变化的"中间帧"由系 ...

  3. JS判断客户端是否是iOS或者Android手机移动端(转载)

    前言: 上午有一个移动端的项目负责人问我,在ios系统上样式出现问题,因为内核原因,我改来改去,在ios弄好了,但在安卓有问题了,突然想到了一种办法,既然ios是一种机型,安卓是一种机型,可以检测用户 ...

  4. Java设计模式学习总结

    设计模式基础学习总结 这篇总结主要是基于我之前设计模式基础系列文章而形成的的.主要是把重要的知识点用自己的话说了一遍,可能会有一些错误,还望见谅和指点.谢谢 更多详细内容可以查看我的专栏文章:设计模式 ...

  5. SpringCloud Ribbon的分析(二)

    上文我们分析到 loadBalancer 根据具体的算法选择相应的server. protected Server getServer(ILoadBalancer loadBalancer) { if ...

  6. 使用MQ来保证分布式事务的最终一致性

    前言 之前我们讨论了如何拆分一个订单下单的一个服务(https://www.cnblogs.com/linkstar/p/9610268.html) 从单体到微服务的拆分,当时我们只是对原来的整个服务 ...

  7. DocX开源WORD操作组件的学习系列一

    DocX学习系列 DocX开源WORD操作组件的学习系列一 : http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_sharp_001_docx1.htm ...

  8. 浅谈cookie和session

    Cookie简介 Cookie(复数形态Cookies),中文名称为“小型文本文件”,指某些网站为了辨别用户身份或存储用户相关信息而存储在用户本地终端(Client Side) 上的数据(通常为加密数 ...

  9. Android开发过程中的坑及解决方法收录（四）

    1.某个控件要放在Linearlayout布局的底部(底部导航条) <LinearLayout xmlns:android="http://schemas.android.com/ap ...

  10. 为什么要学习Java虚拟机

    为什么要学习Java虚拟机? 为什么要学习JVM? 学习Java虚拟机有什么好处? 这些问题就好像在问Java程序猿:你为什么要变强大! C++程序编译后可直接运行于物理机CPU上.而Java程序则不 ...