上一篇讲解了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. 【朝花夕拾】Android性能篇之（五）Android虚拟机

    前言 Android虚拟机的使用,使得android应用和Linux内核分离,这样做使得android系统更稳定可靠,比如程序中即使包含恶意代码,也不会直接影响系统文件:也提高了跨平台兼容性.在And ...

  2. JVM(1)---虚拟机在运行期的优化策略

    1.解释器与JIT编译器 首先我们先来了解一下运行在虚拟机之上的解释器与JIT编译器.当我们的虚拟机在运行一个java程序的时候,它可以采用两种方式来运行这个java程序: 采用解释器的形式,也就是说 ...

  3. [零] JavaIO入门简介 程序设计语言 为什么需要IO库

     本文旨在引申出来Java IO的概念含义,作为学习JavaIO一个起步的了解知识点 部分内容引自<计算机操作系统第三版>  操作系统的文件管理   "在现代计算机系统中,要用到 ...

  4. 一统江湖的大前端（3） DOClever——你的postman有点low

    <一统江湖的大前端>系列是自己的前端学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有 ...

  5. es简单打造站内搜索

    最近挺忙的,在外出差,又同时干两个项目.白天一个晚上一个,特别是白天做的项目,马上就要上线了,在客户这里 三天两头开会,问题很多真的很想好好静下来怼代码,半夜做梦都能fix bugs~ 和客户交流真的 ...

  6. [我还会回来的]asp.net core再战iris

    废话不多说,直接开干! 硬件配置 处理器: Intel(R) Core(TM) i5-4690k CPU @3.90GHz 内存容量: 8.00 GB 软件版本 OS: Microsoft Windo ...

  7. C# 提取PPT文本和图片的实现方案

    在图文混排的文档中,我们可以根据需要将文档中的文字信息或者图片提取出来,通过C#代码可以提取Word和PDF文件中的文本和图片,那么同样的,我们也可以提取PPT幻灯片当中的文本和图片.本篇文档将讲述如 ...

  8. .NET平台下使用MongoDB入门教程

    适合人群:完全没有接触MongoDB或对MongoDB有一点了解的C#开发人员.因为本文是一篇入门级的文章. 一.了解MongoDB  MongoDB是一个基于分布式文件存储的数据库.由C++语言编写 ...

  9. js 常用

    js设置 div高度和宽度 function autoHeight() { var h = $(window).height(); var w = $(window).width(); $(" ...

  10. 使用vue-cli 初始化 vue 项目

    1. 安装nodejs 2. 安装 vue-cli npm install -g vue-cli 安装前可以通过设置代理为淘宝仓库地址,以加快下载速度. npm config set registry ...