上一篇讲解了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. 从锅炉工到AI专家(7)

    说说计划 不知不觉写到了第七篇,理一下思路: 学会基本的概念,了解什么是什么不是,当前的位置在哪,要去哪.这是第一篇希望做到的.同时第一篇和第二篇的开始部分,非常谨慎的考虑了非IT专业的读者.希望借此 ...

  2. 从锅炉工到AI专家(4)

    手写数字识别问题 图像识别是深度学习众多主流应用之一,手写数字识别则是图像识别范畴简化版的入门学习经典案例.在TensorFlow的官方文档中,把手写数字识别"MNIST"案例称为 ...

  3. 【Python3爬虫】第一个Scrapy项目

    Python版本:3.5    IDE:Pycharm 今天跟着网上的教程做了第一个Scrapy项目,遇到了很多问题,花了很多时间终于解决了== 一.Scrapy终端(scrapy shell) Sc ...

  4. （五）通过Python的select监控多个描述符实现并发连接

    概述 本文通过使用select改写之前的服务器程序通过监控多个套接字描述符来实现并发连接并加入了一些机制让程序更加健壮,不过我们所有的实验都是建立在单词发送数据不会超过1024字节,如果超过你需要做特 ...

  5. Spring Boot 路由

    多路由指向同一个方法 @GetMapping(value = {"/login","/index"}) 访问http://127.0.0.1/index 和 h ...

  6. ELK-安装logstash

    注意:在下载tar包的时候需要注意下安装的es版本号,按照官网的说明版本是对应一致的. $ wget https://artifacts.elastic.co/downloads/logstash/l ...

  7. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU特性介绍（4）- RT105x选型

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的RT105x选型. 大家都知道i.MX RT105x是i.MX RT系列第一款产品,在提这款产品特性的 ...

  8. 痞子衡嵌入式：ARM Cortex-M文件那些事（0）- 文件关联

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式开发里的文件关联. 本篇是文件系列第一篇,本系列文章会逐一介绍ARM Cortex-M开发过程中(以IAR集成开发环境为例,其他开发 ...

  9. [Go] go get获取官方库被墙解决

    1.直接在github上clone对应的代码 , 地址为: https://github.com/golang/xxxxxxx.git xxxxxxx为所缺的库名  , 比如net库  text库 h ...

  10. Java AQS 概述

    AQS 概述 AQS(队列同步器,AbstractQueuedSynchronizer),是用来构建锁或其他同步组件的核心基础框架(比如 ReentrantLock.ReentrantReadWrit ...