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

介绍

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

启动

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

复制代码

关于 Genesis

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

项目的目录结构

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.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.title = 'vue-genesis-templace';
    return new App({
        propsData: {
            name: ctx.data.name,
            title: ctx.data.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();

复制代码

完整的需求架构图

最后说明

Followme 是一个极其复杂的大型网站，它几乎遇到了前端所能遇到的全部问题，咱们计划经过自研的 Genesis 框架来达到前端SSR微应用的目的，解决由于公共组件库更新，致使全部的项目都须要发版本的问题，而且能够作到真正的无刷新跳转页面

2020

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