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

vue 组件拓展,如何提供组件拓展功能使用户可以添加新的组件

  •  
  •   Gaays · 2022-02-14 15:25:44 +08:00 · 2141 次点击
    这是一个创建于 1032 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想问一下大家,现在项目中有一套多组件( components )页面,想给用户提供自定义添加组件的能力,如何在不提供源码的前提下提供这样的功能,可以实现吗?

    13 条回复    2022-02-15 13:49:05 +08:00
    redtech
        1
    redtech  
       2022-02-14 15:50:33 +08:00
    低代码?
    Gaays
        2
    Gaays  
    OP
       2022-02-14 15:57:43 +08:00
    @redtech 差不多,但是颗粒度没那么细
    zzt
        3
    zzt  
       2022-02-14 16:50:54 +08:00
    zzt
        4
    zzt  
       2022-02-14 16:56:28 +08:00
    @zzt 只要用户提供的组件 JS 符合 vue 组件的数据格式,然后传参 /出参定义好文档。不过由于你这个需求描述不是很清楚,所以也给不出更细化的实现
    Gaays
        5
    Gaays  
    OP
       2022-02-14 17:23:37 +08:00
    @zzt 就是类似低代码,开发了基础的一些组件,如果用户想添加自定义组件,得提供让用户添加自定义组件的功能,但是同时不提供源码,根据 vue 开发文档,我想到的解决方法是:项目中有一个自定义组件的文件夹,运行时通过动态读文件然后在这个页面引入,实现自定义组件功能?
    9tao
        6
    9tao  
       2022-02-14 19:45:14 +08:00
    用户在你的平台上注册组件,提供 umd 规范并且符合你平台注册规范的组件的 js cdn 地址,在项目启动时动态加载这些 js
    doommm
        7
    doommm  
       2022-02-14 20:24:17 +08:00
    不光是 js ,附带的 css 也要一并加载
    leonkfd
        8
    leonkfd  
       2022-02-14 21:09:30 +08:00
    利用动态组件即可,<component :is="userSelectComponent" />
    最近也开发过一个浏览器起始页,也是能让用户自行去选择自己合适的组件去搭建自己的起始页,组件也是动态按需加载,由用户决定,有空感兴趣可以参考下。
    https://howdz.vercel.app
    waiaan
        9
    waiaan  
       2022-02-15 09:21:54 +08:00
    如果没理解错,这个组件应该是事先不存在的。
    你可以准备一个文件夹专门用来放用户自定义的组件,webpack 有个功能是可以读取一个文件夹下的所有文件,然后再用上面几位说的方法注册为 vue 的动态组件。
    Gaays
        11
    Gaays  
    OP
       2022-02-15 09:34:41 +08:00
    @waiaan 你说的对我刚刚就在想这个 require.context
    zzt
        12
    zzt  
       2022-02-15 11:57:10 +08:00
    @Gaays 和用户的代码最彻底的隔离就得像 @9tao 说的让用户直接提供组件打包完成后的访问地址。但是这样把组件的控制权完全交给用户感觉不太安全。以前百度 MIP 也有个类似的需求,就是站长需要自定义 MIP 组件,他们是单独搞了个仓库,让站长提交组件代码,然后审核。我觉得你也可以这样,搞个外部组件仓库,用户提交组件到这,然后这个组件仓库作为主仓库的 submodule ,再怎么动态导入就可以用上面说的那些方式了。
    Gaays
        13
    Gaays  
    OP
       2022-02-15 13:49:05 +08:00
    @zzt 好,谢谢提供建议和案例!我想想应该怎么处理
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4963 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 08:20 · PVG 16:20 · LAX 00:20 · JFK 03:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.