vue 如何实现这种功能?

我想应用的场景是 在可视化平台,开放一个代码片段给用户,可供用户自己写 vue 组件

我在 vue3的 playground 发现了这样一个功能

https://sfc.vuejs.org/

它能自定义 vue 组件,并且支持各种 import

image.png

请问这种是怎么实现的呢?

需要安装什么编译器之类的东西吗?

阅读 2k
1 个回答

我正好也在研究这个问题,所以简单回答一下。

  • import不是这个Playground创造的,新版浏览器一般都支持。比如下面的代码,可以直接在浏览器执行的。

    <script type="module">import _ from 'https://cdn.skypack.dev/lodash';
    </script>
  • Vue官网的这个站点,复杂的点在于,它用一个ReplStore实现了有限的模块系统(也就是可以创建新的组件文件,只能是.html/.css/.ts/.js后缀)。我理解你只是想一个单独的sfc文件,而不需要多文件。
  • 我没在网上找到开箱即用的单文件vue 3文件解析项目,估计得自己写。所以研究了一下,基本上也理顺了。这是我根据Playground开源程序整理出来的主要实现过程
  • 可以在RunJS左下角加群了解我这边的开发进展。后面弄完了可以考虑开源出来。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题