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)
Vue SSR: 基本用法 （二）的更多相关文章
- Vue SSR的渲染性能
一.前言 前端技术年年有新宠,Vue.js 2.0以其轻量级.渐进式.简洁的语法在MVVM框架中脱颖而出,一经推出便很受业界青睐. 为了提高首屏渲染速度 缓存+直出 是必不可少的.在Vue 1× 时代 ...
- vue SSR 部署详解
先用vue cli初始化一个项目吧. 输入命令行开始创建项目: vue create my-vue-ssr 记得不要选PWA,不知为何加了这个玩意儿就报错. 后续选router模式记得选 histor ...
- Vue SSR初探
因为之前用nuxt开发过应用程序,但是nuxt早就达到了开箱即用的目的,所以一直对vue ssr的具体实现存在好奇. 构建步骤 我们通过上图可以看到,vue ssr 也是离不开 webpack 的打包 ...
- Vue源码分析(二) : Vue实例挂载
Vue源码分析(二) : Vue实例挂载 author: @TiffanysBear 实例挂载主要是 $mount 方法的实现,在 src/platforms/web/entry-runtime-wi ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- 转载一篇好理解的vue ssr文章
转载:原文链接https://www.86886.wang/detail/5b8e6081f03d630ba8725892,谢谢作者的分享 前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟 ...
- Vue SSR不可不知的问题
Vue SSR不可不知的问题 本文主要介绍Vue SSR(vue服务端渲染)的应用场景,开发中容易遇到的一些问题,提升ssr性能的方法,以及ssr的安全性问题. ssr的应用场景 1.SEO需求 SE ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
随机推荐
- 一个JavaWeb搭建的开源Blog系统，整合SSM框架
搬砖有暇,捣鼓了一个简单的Blog系统(项目地址https://github.com/lenve/JavaEETest/tree/master/MyBlog),适合以下人群学习: 1.已经掌握了jsp ...
- 带着新人学springboot的应用11（springboot+Dubbo+Zookeeper 上）
这次说个在大型项目比较常见的东西,就是分布式,分布式到底是个什么东西呢?概念太大,不好说,就像刚学javaee的人问你,什么是web啊,什么是spring啊等等,你可能觉得,这个东西我好像知道,但是用 ...
- MVC Scaffolding SmartCode-Engine 更新
概述 通过扩展visual studio.net scaffolding组件,添加了一套功能完善的代码模板,包括Controller,Model,View,Businessd等各种功能的代码,配合En ...
- Spring Boot（十三）RabbitMQ安装与集成
一.前言 RabbitMQ是一个开源的消息代理软件(面向消息的中间件),它的核心作用就是创建消息队列,异步接收和发送消息,MQ的全程是:Message Queue中文的意思是消息队列. 1.1 使用场 ...
- [ASP.NET] 如何利用Javascript分割檔案上傳至後端合併
最近研究了一下如何利用javascript進行檔案分割上傳並且透過後端.特地記錄一下相關的用法 先寫限制跟本篇的一些陷阱 1．就是瀏覽器的支援了 因為本篇有用到blob跟webworker 在ie中需 ...
- arcgis 10 版本连接SDE数据库报错：No ArcSDE server license found 最有效的解决方法
这个问题可以这样解决:就在在Oracle中登入SDE数据库 进入到SDE数据库中后,找到表SERVER_CONFIG,其中有一行数据记录的就是我们需要进行修改的数据 你需要做的就是找到一个可用的,前面 ...
- 将excel按照某一列拆分成多个文件（方案整理）
1解决方案:将excel按照某一列拆分成多个文件 https://blog.csdn.net/ntotl/article/details/79141314 2遇到的问题:解决vbe6ext.olb不能 ...
- FaaS技术框架
FaaS介绍 微服务(MicroService)是以专注于单一服务/功能的小型单元块为基础,利用模块化的方式组合成复杂的大型应用服务. FaaS是Function as a Service的缩写,可以 ...
- OPC协议解析-关于OPC协议的几个问题
1 什么是OPC协议? 为了便于自动化行业不同厂家的设备和应用程序能相互交换数据,定义了一个统一的接口函数,就是OPC协议规范.有了OPC就可以使用统一的方式去访问不同设备厂商的产品数据. OP ...
- java新知识系列 六
sleep和wait的区别有: Servlet方法的使用 方法重写的规则,以及两同两小一大原则: DispatcherServlet的解析 依赖注入DU和控制反转Ioc AOP和OOP的区别 Spri ...