想请教一下大佬们，使用 VUE 进行门户（首页）自定义的方案？

[lizhesystem]

最近有个需求，通过管理端拖拉拽实现门户首页自定义的功能，前端用的 VUE ，但是在技术选型这块有几个疑问？

1. 组件共享问题：如果在管理端进行操作并且预览的话，无法实现管理端组件和客户端组件的共用（两个项目相互独立），参考过其他开源项目使用 iframe （嵌入）客户端传参方式的方案，感觉整体交互会比较复杂。

2. 首页加载问题：既然是门户网站，想来是不是使用 ssr 比如 nuxt 是不是更好，但是这样的话技术曲线会增高，因为之前也没接触过。如果使用传统单页面的方案，前端接收 JSON 来渲染组件铺首页，效果肯定很差，会有先白屏的效果，体验应该也不会太好。

3. 渲染问题：有没有什么方案，可以不用编译就可以动态渲染页面，这样我更改完界面，客户端就直接看到效果，而不是使用接口拿 JSON 铺组件的效果，vite 或者 nuxt 可以么？

或者有没有这方面的开源项目，可以给小弟参考参考

[duowb]

个人不成熟的想法：
把组件弄成组件库，然后在管理端和客户端引用，或者把编排的功能做成组件，在管理端和客户端使用。同时，将拖拽生成好的 json 配置文件放到项目里面，这样是不是加载会比较快

[fishlium]

没太看懂，这个需求不是你预先生成组件吗，用动态组件实现。为什么会涉及到编译呢

[lizhesystem]

@duowb #1 嗯，或者把设置好的 JSON 持久化到浏览器，但是肯定没有直接加载来的快，估计还得上骨架屏。

[lizhesystem]

@fishlium #2 确实，但最终渲染页面的话肯定是用动态组件来实现，我在想有没有更好的办法，在服务端渲染好直接返回 html 或者组件这样。

[importmeta]

有, 用 SSG 技术.

[lizhesystem]

@importmeta #5 好的，谢谢🙏 我了解下

[Tiller]

SSG 不太适合你们吧。在我的印象中，SSG 不应该是只能生成类似于 vitepress 这个纯静态站点么。

你这种拖拉拽，要动态更改的，还是更加适合 nuxt 的 SSR 模式。

1. 组件问题。Nuxt 有个概念叫 layers 。你可以为管理端和客户端，创建一个新的 nuxt 项目。在这个 nuxt 项目中维护一个组件库。然后在管理端和客户端作为一个 layers 引入这个项目。这样你可以保持组件的一致性

2. 个人认为 ssr 才是适合你们的技术。但是针对现有的项目进行改造的话，还是有一定的工作量的。如果你们考虑上的话，管理端可以继续进行 CSR 渲染，避免 SSR 带来的各种问题。可以说几乎无缝？

客户端的话，也可以保持部分 SSR ，部分 CSR

3. 同上，nuxt ssr ，在服务端获取 json 的数据，渲染好之后，展示出来就是静态的 HTML 了。

我最近在有一搭没一搭的开发自己的项目，想要开源出来的。做的就是你说的这种，有门户，有后台管理的系统。

遇到最烦的问题就是各种鉴权，例如路由鉴权，接口鉴权之类的。发现后台管理还是直接 csr 比较方便

[TryToCatchYou]

可以通过托拉拽生成 JSON 配置后，在服务端进行 SSG ，然后 Deploy 到 web 服务器，之前恰巧做过这块配置，托拉拽可以使用开源库 Vvverbjs