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)                                            

 

原文地址:https://www.cnblogs.com/mmzuo-798/p/10132165.html

时间: 2024-10-09 00:22:28

Vue SSR: 基本用法 (二)的相关文章

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

vue ssr 项目改造经历

vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也可以点评一下,因为,我写的不一定准确,只是针对我的项目. 下面先说一下大致: 原有项目有用到element,在改造ssr过程中,是很坑的.如果可以的话,还是强烈建议你重新改写成nuxt项目.由于我是小白,所以开始时候备份了一下项目,然后开始网上查找相关文章. 1.首先是这位大神的文章https://

vue的基础用法

基础用法(没有搭建框架就在html文件里演示) 一. Hello World起步 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <!-- 模板 --> <div id="app&qu

【转】手摸手,带你用vue撸后台 系列二(登录权限篇)

前言 拖更有点严重,过了半个月才写了第二篇教程.无奈自己是一个业务猿,每天被我司的产品虐的死去活来,之前又病了一下休息了几天,大家见谅. 进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常重要的,可以说是一个后台项目一开始就必须考虑和搭建的基础核心功能.我们所要做到的是:不同的权限对应着不同的路由,同时侧边栏也需根据不同的权限,异步生成.这里先简单说一下,我实现登录和权限验证的思路. 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到t

Java关于Properties用法(二)——替换配置文件中的参数

上一章讲了配置文件的基本用法,虽然上一章已经可以解决一些需求,但还不些不足之处.假如,配置文件里面的字符串有一部分需要经常变动,另外一些不需要,上一章的方法就不方便了,所以这章主要讲如何在配置文件中使用参数,然后替换字符串里面的参数值. 一.使用类MessageFormat替换配置文件中的参数 MessageFormat 提供了以与语言无关方式生成连接消息的方式.使用此方法构造向终端用户显示的消息. MessageFormat 获取一组对象,格式化这些对象,然后将格式化后的字符串插入到模式中的适

awk用法(二) ---程序语言特性

1 内建变量(built-in) 常用 FS   输入字段分隔符  默认空白 由选项 -F 改变 或者重新赋值FS OFS  输出字段分隔符  默认空格,改变可以重新赋值 FILEWIDTHS   由空格隔开iade定义了每个字段的宽度,即取代FS 有字段长度来决定如何分割字段的 FNR 当前数据文件中的数据行数 NR 数据文件中的字段总数 NF 已处理的输入数据行数目 实例一 : FS与OFS的用法 [[email protected] ~]# echo  "data1,date2,date3

vue动画的用法

vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就可以了,话不多说,直接上代码. 一.vue.js原生动画 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title>

vue路由高级用法

五.路由设置高级用法alias 别名 {path:'/list',component:MyList,alias:'/lists'}redirect 重定向 {path:'/productList',redirect:'/list'}path:'*' 异常处理 {path:'*',component:'NotFound'} <!doctype html> <html> <head> <meta charset="UTF-8"> <ti

Linux九阴真经之九阴白骨爪残卷5(ansible用法二之Playbook和YAML语法)

playbook是由一个或多个"play"组成的列表 play的主要功能在于将事先归并为一组的主机装扮成事先通过ansible中的task定义好的角色.从根本上来讲,所谓task无非是调用ansible的module.将多个play组织在一个playbook中,即可让他们联通起来按事先编排的机制运行. Playbook 采用yaml 语言编写每一个ansible 的 playbook 都是一个yaml格式的文件,因此要学习编写剧本(playbook), 我们先来了解 yaml 语法的基