## 介绍这是一个基于 Vue SSR Genesis 框架快速开发的模板例子 ## 启动 ```base # 安装依赖 npm install # 开发 npm run dev # 编译 npm run build # 运行编译后的程序 npm run start ``` ## 关于 Genesis 这是一个为 [Followme 5.0](https://www.baidu.com/s?&wd=Followme+5.0)诞生的Vue SSR框架，也许上线后我们会开源，也许日后会🔥呢？ ## 项目的目录结构 ![1.png](//static.cnodejs.org/FnyAhiJDTq5lmzgRpCa5sIPWc4Jn) ## app.vue 页面入口 ```html ``` ### src/entry-client.ts 客户端入口文件 ```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 服务端入口文件 ```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 实例 ```ts 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 生产环境 ```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](//static.cnodejs.org/Fj0D7y4rGboiMfnbNSMeHDd1S9N-) ## 最后说明 [Followme](https://www.followme.com/) 是一个极其复杂的大型网站，它几乎遇到了前端所能遇到的所有问题，我们计划通过自研的 Genesis 框架来达到前端SSR微应用的目的，解决因为公共组件库更新，导致所有的项目都需要发版本的问题，并且可以做到真正的无刷新跳转页面 ## 2020 Genesis 你好！如果你也❤️😍，右转传送门[ vue-genesis-templace](https://github.com/fmfe/vue-genesis-templace)

Vue SSR for Genesis