《9-2 9.2手动搭建项目实现简单的服务器端渲染ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《9-2 9.2手动搭建项目实现简单的服务器端渲染ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、9-2 9.2 手动搭建项目实现简单的服务器端渲染教学课件 Vue.js基础与应用开发实战（微课版）9.2 手动搭建项目实现简单的服务器端渲染9.2.1 了解vue-server-renderer 的作用及基本语法在Vue中使用服务端渲染，需要借助Vue的扩展模块vue-server-renderer，执行以下命令安装vue-server-renderer模块：npm install vue-server-renderer vue-save执行以下命令也可以安装指定版本的vue-server-renderer模块：npm install vue-server-renderer2.6.x-sav
2、evue-server-renderer模块的主要功能是处理服务器加载，给Vue提供在Node.js服务器端渲染的功能。【注意】：vue-server-renderer和vue必须匹配版本。vue-server-renderer依赖一些Node.js原生模块，因此只能在Node.js中使用。1createRenderer()方法该方法是创建一个renderer实例，例如：const renderer=require(vue-server-renderer).createRenderer();2renderer.renderToString(vm,cb)方法该方法的作用是将Vue实例呈现为字符串
3、，该方法的回调函数是一个标准的Node.js回调，它接收错误作为第一个参数。如下代码：保存文件renderer.js，然后在命令行中执行node renderer.js命令，输出如下所示：Good luckGood luck如上我们可以看到，在我们div中有一个特殊的属性data-server-rendered，该属性的作用是告诉Vue这是服务器渲染的元素，并且应该以激活的模式进行挂载。3createBundleRenderer(code,rendererOptions)方法Vue SSR依 赖 包 vue-server-render，它 的 调 用 支 持 有 2种 格 式：createRe
4、nderer()和createBundleRenderer()，那么createRenderer()是以vue组件为入口的，而 createBundleRenderer()以 打 包 后 的 JS文 件 或 JSON文 件 为 入 口 的。所 以 createBundleRenderer()的作用和createRenderer()作用是一样的，无非就是支持的入口文件不一样而已。下面的代码是createBundleRenderer使用实例：【示例】：demo02-vue-ssr项目文件夹demo02-vue-ssr中的文件renderer.js的代码如下：const createBundleRe
5、nderer=require(vue-server-renderer).createBundleRenderer;/绝对文件路径let renderer=createBundleRenderer(./package.json);console.log(renderer);如 上 代 码，保 存 为 renderer.js文 件，在 命 令 行 中 执 行 node renderer.js命令，输出如下所示：renderToString:Function:renderToString,renderToStream:Function:renderToStream可以看到该方法也同样有renderT
6、oString()和renderToStream()两个方法。9.2.2 直接编写代码将Vue实例渲染为HTML【实例9-1】在vue-ssr项目中编写代码将Vue实例渲染为HTML【操作要求】创建vue-ssr项目01-vue-ssr，在该项目中直接编写代码将Vue实例渲染为HTML。【实现过程】1创建vue-ssr项目在指定文件夹下，在命令行中执行以下命令创建一个vue-ssr项目01-vue-ssr：mkdir 01-vue-ssrcd 01-vue-ssr【实现过程】2项目初始化在命令行中执行以下命令：npm init-y成 功 执 行 上 述 命 令 后，会 在 文 件 夹 01-v
7、ue-ssr中 生 成 一 个package.json文件。3创建服务器脚本文件server.jsvue-server-renderer成功安装后，创建服务器脚本文件server.js，实现将Vue实例的渲染结果输出到控制台中。（1）创建一个Vue实例const Vue=require(vue)const app=new Vue(template:Good luck)（2）创建一个rendererconst renderer=require(vue-server-renderer).createRenderer()（3）将Vue实例渲染为 HTMLrenderer.renderToString
8、(app,(err,html)=if(err)throw err console.log(html)4执行运行脚本文件的命令在命令行中执行以下命令：node server.js成功执行该命令后，命令行窗口输出以下内容：Good luck从输出结果可以看出，在标签中添加了一个特殊的属性data-server-rendered，该属性告诉客户端的Vue该标签是由服务器端渲染的。vue-server-renderer的作用是将vue实例并渲染成html结构。9.2.3 使用Express框架搭建SSRExpress是一个基于Node.js平台的Web应用开发框架，用来快速开发Web应用程序。【实例9
9、-2】在vue-ssr项目中使用Express框架搭建SSR【操作要求】创建vue-ssr项目02-vue-ssr，在该项目中使用Express框架搭建SSR。【实现过程】1创建vue-ssr项目在指定文件夹下，在命令行中执行以下命令创建一个vue-ssr项目02-vue-ssr：mkdir 02-vue-ssrcd 02-vue-ssr2项目初始化在命令行中执行以下命令：npm init-y成 功 执 行 上 述 命 令 后，会 在 文 件 夹 02-vue-ssr中 生 成 一 个package.json文件。【实现过程】3创建template.html文件在刚创建的Vue项目中创建tem
10、plate.html文件，编写模块页面。template.html文件的代码如下：输出当前位置 上述代码中，注释“”是HTML注入的位置，该注释不能删除，否则会报错。4使用Express框架实现SSR（1）在vue-ssr项目中安装Express框架在命令行中，执行如下命令安装Express框架：npm install express save执行如下命令安装指定版本的Express框架npm install express4.17.x-save（2）创建server.js文件在项目根文件夹02-vue-ssr中创建server.js文件，该文件中编写表9-2所示的代码。表表9-2 项目根文件
11、夹项目根文件夹02-vue-ssr中文件中文件server.js的代码的代码序号代码010203040506070809101112131415161718192021/创建Vue实例const Vue=require(vue)const server=require(express)()/读取模板const renderer=require(vue-server-renderer).createRenderer(template:require(fs).readFileSync(./template.html,utf-8)const context=title:vue ssr,metas:,
12、/处理GET方式请求server.get(*,(req,res)=res.set(Content-Type:text/html;charset=utf-8)const vm=new Vue(data:url:req.url ,表表9-2 项目根文件夹项目根文件夹02-vue-ssr中文件中文件server.js的代码的代码序号代码222324252627282930313233343536/使用双花括号进行HTML转义插值 template:当前访问的URL是：url,)/将Vue实例渲染为HTML后输出 renderer.renderToString(vm,context,(err,html
13、)=if(err)res.status(500).end(err:+err)return res.end(html)server.listen(3000,function()console.log(server started at localhost:3000)4使用Express框架实现SSR（3）执行启动服务器的命令命令行中执行以下命令，启动服务器。node server.js成 功 执 行 上 述 命 令 后，打 开 浏 览 器，在 地 址 栏 输 入 网 址：http:/localhost:3000/，按【Enter】钮，页面显示“当前位置：/”。在浏览器中查看源代码，如下所示：输出当前位置 当前位置：/从以上代码可以看出data-server-rendered属性的值为true，说明当前页面是服务器端渲染后的结果。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！