咱们的需求css
在 中，核心的就是渲染器，它提供了最基础渲染能力，有了它，你能够实现微前端、微服务、远程组件、首屏渲染，甚至能够和 React、EJS 等配合使用。html
它能够和怎样的你协做？
-
若是你是传统的后端渲染的，须要作SEO，可是你但愿在部分布局，部分页面引入 Vue，那么
renderer.renderJson()足以，将渲染结果传递给后端渲染的模板引擎中便可。前端 -
若是你是中后台系统，业务系统所有集中在一个项目，你但愿能够按照业务进行服务的拆分，那么 `` 足以vue
-
若是你是 CSR 渲染的项目，那么
renderer.renderHtml({ mode: 'csr-html' })足以node -
若是你是 SSR 渲染的项目，那么
renderer.renderHtml({ mode: 'ssr-html' })足以git
若是你想作微前端、微服务、那么渲染器 天生就具有了这样的能力，你能够把它当成一个工具函数使用，你能够经过 HTTP 、 RPC 等等各类协议访问到你的服务，而后使用它进行渲染程序员
建立一个渲染器
开发环境
import { SSR } from '@fmfe/genesis-core'; import { Watch } from '@fmfe/genesis-compiler'; const start = async () => { const ssr = new SSR(); const watch = new Watch(ssr); await watch.start(); const renderer = watch.renderer; // 拿到渲染器以后，作点什么 ....
}; start();
若是你是项目是第一次建立，程序将会自动在项目根目录建立 Vue 基本的模板。github
.
├── src
│ ├── app.vue 入口的页面
│ ├── entry-client.ts 客户端入口文件
│ ├── entry-server.ts 服务端入口文件
│ └── shims-vue.d.ts vue文件的TS声明
│
└── package.json
由于在实际的开发环境中，咱们还须要静态资源的文件和热更新，watch 对象还提供了对应的中间件使用，若是你使用 Express 框架，能够直接使用web
/**
* 静态资源中间件
*/
app.use(watch.devMiddleware);
/**
* 热更新的中间件
*/
app.use(watch.hotMiddleware);
若是你使用了 Koa，或者其它的框架，就须要在对应框架上包装一层中间件使用。面试
生产环境
开发完成后，须要发布产环境，咱们老是须要将代码提早编译好，这样用户访问的时候，就能够立马快速的渲染，因此第一步咱们须要先编译代码
import { SSR } from '@fmfe/genesis-core'; import { Build } from '@fmfe/genesis-compiler'; const start = () => { const ssr = new SSR(); const build = new Build(ssr); return build.start(); }; start();
::: warning 注意 在这里你须要把环境变量 NODE_ENV 设置为 production，不然编译出来的是开发模式下的代码，运行时的性能会很是差。 :::
NODE_ENV=production ts-node index.ts
执行上面的编译命令后，咱们将会获得一个 dist 目录，里面放置了咱们编译后的代码。若是你想更改编译输出的地址，或者应用名称，能够点击这里了解更多
.
├── dist
│ ├── ssr-genesis 应用名称
│ │ ├── client 客户端资源文件
│ │ | ├── js 脚本
│ │ | ├── css 样式
│ │ | ├── images 图片
│ │ | ├── medias 媒体资源
│ │ | └── fonts 字体文件
│ │ ├── server 服务端资源文件
│ │ │ ├── vue-ssr-client-manifest.json 客户端构建清单
│ │ │ └── vue-ssr-server-bundle.json 服务端应用包
│
└── package.json
代码构建完成后，咱们就能够在生产环境中直接建立一个渲染器了。
import { SSR } from '@fmfe/genesis-core'; const start = async () => { const ssr = new SSR(); const renderer = ssr.createRenderer(); // 拿到渲染器以后，作点什么 ....
}; start();
生产环境，静态资源都是基于内容哈希生成的文件名，因此这里设置静态目录的时候，设置强缓存便可
app.use( renderer.staticPublicPath, express.static(renderer.staticDir, { immutable: true, maxAge: '31536000000' }) );
渲染器的使用
至此，无论是开发环境仍是生产环境，咱们都已经拿到了渲染器，接下来咱们可使用渲染器去作一些事情了。
渲染方法
renderer.render().then((result) => { console.log(result.data); });
在默认的状况下，等同于下面的
renderer.render({ url: '/', mode: 'ssr-html' }).then((result) => { console.log(result.data); });
关于渲染方法的更多选项，点击这里了解 renderer.render 方法是渲染器最底层的方法，下面的功能都是基于它来进行封装的。
渲染中间件
若是你的业务比较简单，能够直接经过咱们的中间件进行快速的开发，它只是一个简单的 SSR 中间件。 ::: warning 注意 若是 SSR 渲染失败，该中间件不会帮你降级渲染到 CSR :::
app.use(renderer.renderMiddleware);
渲染 HTML
const result = await renderer.renderHtml(); console.log(result);
渲染 JSON
const result = await renderer.renderJson(); console.log(result);
降级渲染
为了更好的用户体验，在SSR渲染失败的时候，咱们指望它能够降级渲染到 CSR 模式，咱们能够对渲染的方法包装一层，而且打印出错误信息。甚至能够经过一些监控工具，推送到你的邮箱、短信进行报警。
const render = (options: RenderOptions = {}) => { return renderer.render(options).catch((err: Error) => { // 打印渲染失败的错误信息
console.error(err); const mode: RenderMode = options.mode || 'ssr-html'; return renderer.render({ ...options, mode: mode.indexOf('html') ? 'csr-html' : 'csr-json' }); }); }; const result = await render(); console.log(result.data);
使用路由
调用渲染函数时，传入要渲染的地址和路由的模式，由于在使用远程组件的时候，咱们可能不太但愿这个组件使用历史模式渲染，也可能使用 abstract 模式渲染，能够最好将它作成动态的参数来控制。
const result = await render({ url: '/', state: { routerMode: 'history' } }); console.log(result.data);
-
注意 vue-router 不支持一个页面上建立多个历史模式的路由实例，不然你调用
router.push()方法时，将会建立多个历史记录，为了解决这个问题，请使用 genesis-app 的路由
router.ts
npm install vue-router import Vue from 'vue'; import Router, { RouterMode } from 'vue-router'; Vue.use(Router); export const createRouter = (mode: RouterMode = 'history') => { return new Router({ mode: mode, routes: [ // 配置你的路由 ] }); };
entry-server.ts
修改咱们的服务端入口文件
import { RenderContext } from '@fmfe/genesis-core'; import Vue from 'vue'; import App from './app.vue'; import { createRouter } from './router'; export default async (renderContext: RenderContext): Promise<Vue> => { // 读取传过来的路由模式
const mode = renderContext.data.state.routerMode; // 建立路由
const router = await createRouter(mode); // 设置渲染的地址
await router.push(renderContext.data.url); // 建立 Vue 实例
return new Vue({ // 传入路由对象
router, renderContext, render(h) { return h(App); } }); };
entry-client.ts
修改咱们的客户端入口文件
import { ClientOptions } from '@fmfe/genesis-core'; import Vue from 'vue'; import App from './app.vue'; import { createRouter } from './router'; export default async (clientOptions: ClientOptions): Promise<Vue> => { // 读取服务端下发的路由模式
const mode = clientOptions.state.routerMode; // 建立路由
const router = await createRouter(mode); // 设置渲染的地址
await router.push(clientOptions.url); // 建立 Vue 实例
return new Vue({ // 传入路由对象
router, clientOptions, render(h) { return h(App); } }); };
app.vue
修改咱们的视图文件，以便支持路由渲染
<template>
<div class="app">
<h2>你好世界！</h2>
<p v-if="show" @click="close" class="text"> {{ installed ? '在客户端应该安装成功，点击我关闭!' : '未安装' }} </p>
<router-view />
</div>
</template>
总结
“大清亡于闭关锁国，学习技术须要交流和资料”。 在这里我给你们准备了不少的学习资料免费获取,包括但不限于技术干货、大厂面试题系列、技术动向、职业生涯等一切有关程序员的分享.
web前端小白进阶方法笔记,学习资料,面试题和视频,项目源码免费领取，经过努力追到本身的女神，走向人生巅峰