Psweb-ssr NPM | npm.io

最基本的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中开发的项目，可以有选择的加入到这个任务中。

psweb-ssr psweb-nodejs psweb-vue

express vue

@everything-registry/sub-chunk-2489

1.0.1

2 years ago