javascript - 低代码原理，怎么样才能按照vue开发编写的代码导出呢？

Question

现在做一个拖拽的功能,有个问题想不明白。
就是低代码拖拽组件到内容区展示,但是导出的时候,你拖拽组件部分是经过什么处理？才能保持原样(就跟平时在vscode编译器里面开发的代码一样)导出一个vue文件呢？
组件在内容区显示,在浏览器开发者模式去看是最原始的样子，直接导出html肯定不行的。
各位道友有什么好的想法呢？谢谢大家！

我能想到导出代码就是直接把dom导出出去,但是这样肯定不行

Answer 1

一般的低代码都是表单部分的操作完之后导出成JSON数据保存在数据库中。不会去生成一个 x.vue 文件。

可以直接借鉴 form-generator 这个项目。

Answer 2

在低代码平台中实现Vue组件的拖拽编辑并导出为可维护的Vue文件，确实需要一些特别的处理，因为直接从DOM导出HTML并不足以保持Vue组件的逻辑和样式。以下是一种可能的实现方法：

1. 抽象组件元数据

首先，当用户在低代码平台上拖拽组件时，平台应该不仅仅是将组件的HTML结构添加到DOM中，而是同时记录或生成该组件的元数据（metadata）。这些元数据可以包括：

• 组件的名称和类型
• 组件的属性（如props）
• 组件的事件绑定
• 组件的插槽（slots）内容
• 组件的样式信息（可以是内联样式，也可以是引用的样式文件或CSS类）

2. 使用模板引擎或AST（抽象语法树）

在导出时，低代码平台可以利用模板引擎（如Handlebars, EJS等）或Vue的AST（通过vue-template-compiler等工具）来根据组件的元数据动态生成Vue文件。这样，生成的Vue文件不仅包含HTML结构，还包含Vue组件的完整定义，如<script>和<style>部分。

3. 组件化和模块化

在低代码平台上，用户拖拽的组件应该被视为可复用的Vue组件。平台应支持将这些组件导出为独立的Vue文件，并可能包含在该平台的某个组件库中。这样，导出的Vue文件可以很容易地在其他Vue项目中复用。

4. 导出逻辑

导出逻辑可以是一个按钮点击事件，触发时：

• 遍历当前页面或画布上的所有组件
• 读取每个组件的元数据
• 使用模板引擎或AST根据元数据生成Vue文件的内容
• 将生成的Vue文件内容保存到文件系统或提供下载

5. 注意事项

• 依赖管理：如果组件之间有依赖关系（如父子组件），导出时需要确保这些依赖关系在Vue文件中得到正确处理。
• 样式隔离：确保每个组件的样式不会影响到其他组件，可能需要使用CSS作用域或BEM等命名约定。
• 性能优化：如果项目很大，导出过程可能会比较慢，需要考虑性能优化措施。

结论

直接从DOM导出HTML来保留Vue组件的逻辑和样式是不现实的。相反，应该通过记录和生成组件的元数据，并使用模板引擎或AST来生成可维护的Vue文件。这样不仅可以保留组件的结构，还可以保留其逻辑和样式，使得导出的Vue文件可以在其他Vue项目中轻松复用。