Vue SSR: 基本用法 （二）

上一篇讲解了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)

 

　

posted @ 2018-12-17 16:15  front-gl  阅读(715)  评论(0)    收藏  举报