咱们的需求
它能够和怎样的你协做？
若是你是传统的后端渲染的，须要作seo，可是你但愿在部分布局，部分页面引入 vue，那么 renderer.renderjson() 足以，将渲染结果传递给后端渲染的模板引擎中便可。javascript
若是你是中后台系统，业务系统所有集中在一个项目，你但愿能够按照业务进行服务的拆分，那么 `` 足以css
若是你是 CSR 渲染的项目，那么 renderer.renderhtml({ mode: 'csr-html' }) 足以html
若是你是 SSR 渲染的项目，那么 renderer.renderhtml({ mode: 'ssr-html' }) 足以前端
建立一个渲染器
开发环境
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();
. ├── src │ ├── app.vue 入口的页面 │ ├── entry-client.ts 客户端入口文件 │ ├── entry-server.ts 服务端入口文件 │ └── shims-vue.d.ts vue文件的TS声明 │ └── package.json
/** * 静态资源中间件 */ app.use(watch.devMiddleware); /** * 热更新的中间件 */ app.use(watch.hotMiddleware);
生产环境
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();
NODE_ENV=production ts-node index.ts
. ├── 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);});
渲染中间件
app.use(renderer.renderMiddleware);
渲染 html
const result = await renderer.renderhtml();console.log(result);
渲染 jsON
const result = await renderer.renderjson();console.log(result);
降级渲染
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);
使用路由
const result = await render({ url: '/', state: { routerMode: 'history' } });console.log(result.data);
router.ts
npm install vue-router
importvue 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> <h2>你好世界！</h2> <p v-if="show" @click="close"> {{ installed ? '在客户端应该安装成功，点击我关闭!' : '未安装' }} </p> <router-view /> </div> </template>
本文分享自微信公众号 - web前端开发（web_qdkf）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。vue