咱們的需求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前端小白進階方法筆記,學習資料,面試題和視頻,項目源碼免費領取，經過努力追到本身的女神，走向人生巔峯