vue-ssr入门学习
2018-01-20 本文已影响0人
我讲你思
image
vue刚完成一个项目，有点时间就研究起了vue-ssr(vue在服务器端渲染)，本来准备研究nuxt(一个vue服务器端渲染框架，据说很简单)，可是却一头雾水，报错一大堆，又找不到解决方法，索性便去vue官网研究一下原生的。
1.下载
新建一个文件夹veu-ssr，输入
npm install vue vue-server-renderer --save
npm install express --save
2.新建文件夹demo
1.新建文件index.html和index.js其中index.html就是包裹vue实例的容器的
//一个页面模板，index.js是demo启动的文件。
index.html中写入以下内容
如同vue-cli创建项目中的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
{{{meta}}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>
- 以上代码注释部分，即<!--vue-ssr-outlet-->， 一定不能少，一定没有空格！！！
- 以上代码注释部分，即<!--vue-ssr-outlet-->， 一定不能少，一定没有空格！！！
- 以上代码注释部分，即<!--vue-ssr-outlet-->， 一定不能少，一定没有空格！！！
index.js中写入以下代码
const Vue = require('vue')
const server = require('express')()
const fs = require('fs')
//读取模版
const renderer = require('vue-server-renderer').createRenderer({
template: fs.readFileSync('./index.html', 'utf-8')
})
// 此参数是vue 生成Dom之外位置的数据 如vue生成的dom一般位于body中的某个元素容器中，
//此数据可在header标签等位置渲染，是renderer.renderToString()的第二个参数，
//第一个参数是vue实例，第三个参数是一个回调函数。
const context = {
title: 'What I Love',
meta:` <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="vue-ssr">
<meta name="generator" content="GitBook 3.2.3">
`
}
server.get('*', (req, res) => {
//创建vue实例 主要用于替换index.html中body注释地方的内容，
//和index.html中 <!--vue-ssr-outlet-->的地方是对应的
const app = new Vue({
data: {
url: req.url,
data: ['菠萝', '萝卜', '香蕉', '苹果', '泥猴桃', '梨子'],
title: '我喜欢的水果'
},
//template 中的文本最外层一定要有容器包裹， 和vue的组件中是一样的，
//只能有一个父级元素，万万不能忘了！
template: `
<div>
<div>url : {{url}}</div>
<p>{{title}}</p>
<p v-for='item in data'>{{item}}</p>
</div>
`
})
//将 Vue 实例渲染为字符串 (其他的API自己看用法是一样的)
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('err:' + err)
return
}
//将模版发送给浏览器
res.end(html)
console.log('success')
})
})
server.listen(8080)
- 运行
node index.js
