上一篇讲解了 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: `
- Hello World
- ` })
- // 第 2 步: 创建一个
- renderer const renderer = require('vue-server-renderer').createRenderer()
- // 第 3 步: 将 Vue 实例渲染为
- html renderer.renderToString(App, (err, HTML) => {
- if (err) throw err
- console.log(HTML)
- // =>
- Hello World
- })
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: `
访问的 URL 是: {{ url }}
- `
- })
- renderer.renderToString(App, (err, HTML) => {
来源: http://www.bubuko.com/infodetail-2887825.html