入门基础
1.vue
2.express
步骤
1.初始化项目,npm init
2.安装vue、express、vue-ssr-renderer, npm i express vue vue-ssr-renderer -S
3.同级目录中创建server.js和index.html
代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<!--下面这一句很重要，记得添加上，而且前后不能有空格-->
<!--vue-ssr-outlet-->
{{{init}}}
</body>
</html>
server.js
const express = require('express');
const Vue = require('vue');
const renderer = require('vue-server-renderer');
const fs = require('fs');
const server = express();
const render = renderer.createRenderer({
template: fs.readFileSync('./index.html', 'utf-8')
});
server.get('/getSSR', (req, res) => {
const app = new Vue({
// 改成''
template: `<div>
{{info}}
<home></home>
</div>`,
data: {
info: 'ssr'
},
components: {
home: {
template: '<div><input type="text" v-model="msg" /></div>',
data() {
return {
msg: 'home'
}
}
}
}
});
render.renderToString(app, {
title: 'ssr',
init: '<script>console.log("init")</script>'
}, (err, html) => {
res.end(html);
});
});
server.listen(10086, _ => {
console.log('server is running at 10086')
});
原创文章 28
获赞 52
访问量 5万+