这是一个基于 Vue SSR Genesis 框架快速开发的模板例子
发布于 5 年前 作者 1340641314 3868 次浏览 来自 分享

介绍

这是一个基于 Vue SSR Genesis 框架快速开发的模板例子

启动

# 安装依赖
npm install
# 开发
npm run dev
# 编译
npm run build
# 运行编译后的程序
npm run start

关于 Genesis

这是一个为 Followme 5.0诞生的Vue SSR框架，也许上线后我们会开源，也许日后会🔥呢？

项目的目录结构

1.png

app.vue 页面入口

<template>
    <div class="app">
        <h2>Vue SSR for Genesis</h2>
        <ol class="list">
            <li class="list-item">页面标题：{{title}}</li>
            <li class="list-item">服务名称：{{name}}</li>
            <li class="list-item">渲染地址：{{url}}</li>
            <li class="list-item">官网网站：<a rel="noopener noreferrer" target="_blank" href="https://www.followme.com/">www.followme.com</a></li>
        </ol>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component<App>({})
export default class App extends Vue {
    @Prop({
        type: String,
        required: true
    })
    public name!: string;

    @Prop({
        type: String,
        required: true
    })
    public title!: string;

    @Prop({
        type: String,
        required: true
    })
    public url!: string;
}
</script>

src/entry-client.ts 客户端入口文件


import App from './app.vue';

const data = window[process.env.GENESIS_NAME!];

export default new App({
    propsData: {
        name: data.name,
        title: data.state..title,
        url: data.url
    }
});

src/entry-server.ts 服务端入口文件

import { GenesisTypes } from '@fmfe/genesis-core';
import App from './app.vue';

export default (ctx: GenesisTypes.RenderContext) => {
    ctx.data.state.title = 'vue-genesis-templace';
    return new App({
        propsData: {
            name: ctx.data.name,
            title: ctx.data.state.title,
            url: ctx.data.url
        }
    });
};

genesis.ts 创建 ssr 实例

import { Genesis } from '@fmfe/genesis-core';

export const ssr = new Genesis({});

genesis.build.ts 源码编译

import { Build } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = () => {
    return new Build(ssr).start();
};
export default start();

genesis.dev.ts 开发模式

import { DevServer } from '@fmfe/genesis-compiler';
import { ssr } from './genesis';

const start = () => {
    return new DevServer(ssr).start();
};
export default start();

genesis.prod.ts 生产环境

import express from 'express';
import { Renderer } from '@fmfe/genesis-core';
import { ssr } from './genesis';

const start = async () => {
    const app = express();
    const renderer = new Renderer(ssr);
    app.use(renderer.staticPublicPath, express.static(renderer.staticDir, {
        immutable: true,
        maxAge: '31536000000'
    }));
    app.use(renderer.renderMiddleware);
    app.listen(ssr.port, () => console.log(`http://localhost:${ssr.port}`));
};
start();

完整的需求架构图

2.png

最后说明

Followme 是一个极其复杂的大型网站，它几乎遇到了前端所能遇到的所有问题，我们计划通过自研的 Genesis 框架来达到前端SSR微应用的目的，解决因为公共组件库更新，导致所有的项目都需要发版本的问题，并且可以做到真正的无刷新跳转页面

2020

Genesis 你好！如果你也❤️😍，右转传送门 vue-genesis-templace

回到顶部