psweb-ssr
v1.0.1
Published
基本vue服务器渲染
Downloads
3
Maintainers
pswebxycReadme
最基本的vue服务器渲染包
npm install
yarn install
yarn start服务器
import express from 'express';
import { renderToString } from 'vue/server-renderer';
import { createApp } from './app.js';
const server = express();
server.get('/', (req, res) => {
const app = createApp();
renderToString(app).then((html) => {
res.send(`
<!DOCTYPE html>
<html>
<head>
<title>Vue SSR Example</title>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<script type="module" src="/client.js"></script>
</head>
<body>
<div id="app">${html}</div>
</body>
</html>
`);
});
});
server.use(express.static('.'));
server.listen(3000, () => {
console.log('ready');
});
客户端
import { createApp } from './app.js';
createApp().mount('#app');中间件
import { createSSRApp } from 'vue';
export function createApp() {
return createSSRApp({
data: () => ({ count: 1 }),
template: `<div @click="count++">服务器渲染结果：{{ count }}</div>`,
});
}项目任务
- 他将vue与node(Express)结合到一起。
- 完成服务器端动态渲染
- 在vue中开发的项目，可以有选择的加入到这个任务中。