59859cc威尼斯官网-威尼斯欢乐娱人成app

教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

传智教育|传智播客

一样的教育,不一样的品质

全国校区

 

  • JavaEE
  • HTML&JS+前端
  • Python+大数据开发
  • 人工智能开发
  • UI/UE设计
  • App测试
  • 新媒体+短视频
    直播运营
  • 59859cc威尼斯官网-威尼斯欢乐娱人成app

怎样实现服务器端渲染?

更新时间:2021年08月20日16时48分 来源:传智教育 浏览次数:

好口碑IT培训

服务端渲染的实现,通常有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实例的渲染结果输出到控制台中,具体代码如下:

 //①创建一个Vue实例

 const Vue = require('vue')

  const app = new Vue({

template: '<div>SSR 的简单使用</div>'
//② 创建一个renderer实例
const renderer = require ('vue-server-renderer').createRendere()

//③将Vue实例渲染为HTML

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前端高级App工程师课程



0 分享到:

59859cc威尼斯官网|威尼斯欢乐娱人成app

XML 地图 | Sitemap 地图