vue 如何实现这种功能?

Question

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

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

https://sfc.vuejs.org/

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

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

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

Answer 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左下角加群了解我这边的开发进展。后面弄完了可以考虑开源出来。