Deco Visual Editor

https://www.decoide.org/video.mp4

一款可视化组件编辑器，让您可以通过拖拽方式快速构建用户界面，支持 ReactNative/React/Vue 框架。

Features

Install

1. 通过 VS Code 扩展市场安装

• 打开 VS Code
• 进入扩展视图 (Ctrl+Shift+X)
• 搜索 "Deco Visual Editor"
• 点击安装按钮

2. 手动安装

• 下载 .vsix文件
• 在 VS Code 中运行命令:
• code --install-extension deco-visual-editor-X.X.X.vsix

🚀 快速开始

打开插件面板

• 点击编辑器左侧工具栏的 Deco 图标
• 或使用命令面板 (Ctrl+Shift+P) 搜索 "Open Deco Panel"

模版库

1. 选择页面模版

• 从页面模版库选择指定模版
• 输入页面生成目录和路径

2. 编辑页面参数

• 页面模版编辑页面，输入模版参数
• 预览代码
• 自动同步参数

3. 生成完整代码

• 插件会在指定目录自动生成代码
• 自动导入页面路径到入口文件
• 自动导入组件库

组件库

1. 拖拽组件

• 从组件面板拖拽组件到编辑器中的任意位置

2. 编辑属性

• 组件插入后会自动打开属性面板,您可以:
• 修改组件属性
• 预览实时变化
• 自动同步到代码

3. 生成完整代码

• 插件会自动处理:
• 自动导入组件头文件
• 属性绑定
• 代码格式化

4. 二次编辑

• 选中组件代码，右键选择:Deco 编辑
• 支持对设置的属性修改和重置
• 代码格式化