上一篇讲解了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. 使用Phalcon框架开发一个简易的博客系统

    使用Phalcon PHP框架开发一个简易的博客系统(类似于CMS) 最近在做Phalcon(Phalcon在英文中指的是鸟类中飞得最快的那一个物种,由于是高性能框架,借用了这个词)相关的项目,由于刚 ...

  2. InterlliJ Debug方式启动:method breakpoints may dramatically show down debugging

    使用idea在DEBUG的时候出现Method breakpoints may dramatically slow down debugging, 如图: 根据语义可能是断点打在方法上面了,导致在某个 ...

  3. Node.js与Sails~redis组件的使用

    有段时间没写关于NodeJs的文章了,今天也是为了解决高并发的问题,而想起了这个东西,IIS的站点在并发量达到200时有了一个瓶颈,于是想到了这个对高并发支持比较好的框架,nodeJs在我之前写出一些 ...

  4. dnSpy 强大的.Net反编译软件

    作者:D.泡沫 一说起.net的反编译软件,大家首先想到的就是Reflector,ILSpy,dotPeek等等.而dnSpy同样是一款优秀的反编译软件,同时它是开源免费的.官方的描述是: dnSpy ...

  5. 【ASP.NET Core快速入门】（四）在CentOS上安装.NET Core运行时、部署到CentOS

    下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows 第一步:Add the dotnet product feed( ...

  6. C语言实现循环队列的初始化&进队&出队&读取队头元素&判空-2

    /*顺序表实现队列的一系列操作(设置flag标志不损失数组空间)*/ #include<stdio.h> #include<stdlib.h> #define Queue_Si ...

  7. leetcode — same-tree

    import java.util.Stack; /** * Source : https://oj.leetcode.com/problems/same-tree/ * * * Given two b ...

  8. 浅谈WPF中的MVVM框架--MVVMFoundation

    先科普一下:什么是WPF,请看下图 微软对于WPF技术的构想是很宏大的,可惜普及率不高,不过如果你要做Windows客户端开发的话WPF技术还是值得一学的. 什么是MVVM模式 简单来说它是一种高级的 ...

  9. 持续集成配置之Nuget

    持续集成配置之Nuget Intro 本文是基于微软的 VSTS(Visual Studio Team Service) 做实现公众类库的自动打包及发布. 之前自己的项目有通过 Github 上的 T ...

  10. 安装VS时，双击setup.exe后界面一闪而过的问题

    问题:安装VS时,双击setup.exe界面一闪而过的问题 解决: 百度后说需要到"控制面板/添加和管理程序"关闭系统自带的netframework3.x及以上版本. 1.查看所有 ...