天富娱乐登录彩票 怎样实现服务器端渲染？

服务端渲染的实现，通常有3种方式，第1种是手动进行项目的简单搭建，第2种是使用vue CLI 3脚手架进行搭建，第3种利用一些成熟框架来搭建(如Nuxt,js），本节讲解第1种和第2种方式，带领读者实现简单的服务器端渲染。

1.创建 vue-ssr项目

在C:\vue\chapter08目录中，使用命令行工具创建一个vue-ssr项目，具体命令如下:

 mkdir vue-ssr cd vue-ssr npm init -y

执行上述命令后，会在vue-ssr 目录下生成一个package.json文件。

在Vue中使用服务器端渲染，需要借助Vue的扩展模块vue-server-renderer。下面我们在vue-ssr项目中使用npm来安装vue-server-renderer,具体命令如下:

 npm install vue@2.6.x vue-server-renderer@2.6.X --save

vue-server-renderer是Vue中处理服务器加载的一个模块,给Vue提供在Node.js服务器端渲染的功能。vue-server-renderer依赖-些Node.js原生模块，所以目前只能在Node.js中使用。

2.Vue渲染

将vue-server-renderer安装完成后，创建服务器脚本文件test.js,实现将Vue实例的渲染结果输出到控制台中，具体代码如下:

 const Vue = require('vue') const app = new Vue({ template: '<div>SSR 的简单使用</div>' const renderer = require ('vue-server-renderer').createRendere() renderer.renderToString(app, (err, html) => { if (err) { throw err } console.log(html) })

在命令行中执行node test.js,运行结果如下所示:

 <div data-server-rendered="true">SSR的简单使用</div>

从上述结果可以看出，在<div>标签中添加了一个特殊的属性data-server-rendered,该属性是告诉客户端的Vue这个标签是由服务器渲染的。

猜你喜欢：

什么是服务器端渲染？它有哪些优点和不足？

浏览器渲染页面流程的4个步骤

什么是客户端渲染？

传智教育web前端高级软件工程师课程