实现微前端,你所需要了解的 Vue Genesis 渲染器

本文介绍了Vue Genesis渲染器在微前端、SSR、CSR等场景的应用。通过renderer.renderjson()、renderer.renderhtml()等方法,适配不同类型的项目需求。同时,文章详细阐述了开发和生产环境的配置,以及渲染器的创建、使用和错误降级处理。此外,还提到了路由配置和如何与其他框架如Express、Koa协作。
摘要由CSDN通过智能技术生成

在这里插入图片描述
我们的需求
核心的就是渲染器,它提供了最基础渲染能力,有了它,你可以实现微前端、微服务、远程组件、首屏渲染,甚至可以和 react、Ejs 等配合使用。

它可以和怎样的你协作?
如果你是传统的后端渲染的,需要做seo,但是你希望在部分布局,部分页面引入 vue,那么 renderer.renderjson() 足以,将渲染结果传递给后端渲染的模板引擎中即可。

如果你是中后台系统,业务系统全部集中在一个项目,你希望可以按照业务进行服务的拆分,那么 `` 足以

如果你是 CSR 渲染的项目,那么 renderer.renderhtml({ mode: ‘csr-html’ }) 足以

如果你是 SSR 渲染的项目,那么 renderer.renderhtml({ mode: ‘ssr-html’ }) 足以

如果你想做微前端、微服务、那么渲染器 天生就具备了这样的能力,你可以把它当成一个工具函数使用,你可以通过 HTTP 、 RPC 等等各种协议访问到你的服务,然后使用它进行渲染。

创建一个渲染器
开发环境


如果你是项目是第一次创建,程序将会自动在项目根目录创建 vue 基本的模板。
因为在实际的开发环境中,我们还需要静态资源的文件和热更新,watch 对象还提供了对应的中间件使用,如果你使用 Express 框架,可以直接使用

如果你使用了 Koa,或者其它的框架,就需要在对应框架上包装一层中间件使用。

生产环境
开发完成后,需要发布产环境

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值