V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lizhesystem
V2EX  ›  Vue.js

想请教一下大佬们,使用 VUE 进行门户(首页)自定义的方案?

  •  
  •   lizhesystem · 9 天前 · 1168 次点击

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

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

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

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

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

    8 条回复    2024-10-30 22:30:02 +08:00
    duowb
        1
    duowb  
       9 天前   ❤️ 1
    个人不成熟的想法:
    把组件弄成组件库,然后在管理端和客户端引用,或者把编排的功能做成组件,在管理端和客户端使用。同时,将拖拽生成好的 json 配置文件放到项目里面,这样是不是加载会比较快
    fishlium
        2
    fishlium  
       9 天前   ❤️ 1
    没太看懂,这个需求不是你预先生成组件吗,用动态组件实现。为什么会涉及到编译呢
    lizhesystem
        3
    lizhesystem  
    OP
       9 天前
    @duowb #1 嗯,或者把设置好的 JSON 持久化到浏览器,但是肯定没有直接加载来的快,估计还得上骨架屏。
    lizhesystem
        4
    lizhesystem  
    OP
       9 天前
    @fishlium #2 确实,但最终渲染页面的话肯定是用动态组件来实现,我在想有没有更好的办法,在服务端渲染好直接返回 html 或者组件这样。
    importmeta
        5
    importmeta  
       9 天前   ❤️ 1
    有, 用 SSG 技术.
    lizhesystem
        6
    lizhesystem  
    OP
       9 天前
    @importmeta #5 好的,谢谢🙏 我了解下
    Tiller
        7
    Tiller  
       9 天前   ❤️ 1
    SSG 不太适合你们吧。在我的印象中,SSG 不应该是只能生成类似于 vitepress 这个纯静态站点么。

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

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

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

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

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

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

    遇到最烦的问题就是各种鉴权,例如路由鉴权,接口鉴权之类的。发现后台管理还是直接 csr 比较方便
    TryToCatchYou
        8
    TryToCatchYou  
       9 天前 via iPhone   ❤️ 1
    可以通过托拉拽生成 JSON 配置后,在服务端进行 SSG ,然后 Deploy 到 web 服务器,之前恰巧做过这块配置,托拉拽可以使用开源库 Vvverbjs
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1198 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 18:21 · PVG 02:21 · LAX 10:21 · JFK 13:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.