https://www.decoide.org/video.mp4
一款可视化组件编辑器，让您可以通过拖拽方式快速构建用户界面，支持 ReactNative/React/Vue 框架。
Features
|
|
| 📚 |
页面模版即取即用 |
| ✨ |
可视化拖拽组件到编辑器 |
| 📦 |
实时属性编辑面板 |
| 🎨 |
自动生成并同步代码 |
| 🎲 |
内置常用 UI 组件库 |
| 🧱 |
代码格式化与二次编辑 |
| 🧑🎨 |
与设计组件库同步，保持联动 |
Install
- 通过 VS Code 扩展市场安装
- 打开 VS Code
- 进入扩展视图 (Ctrl+Shift+X)
- 搜索 "Deco Visual Editor"
- 点击安装按钮
- 手动安装
- 下载 .vsix文件
- 在 VS Code 中运行命令:
- code --install-extension deco-visual-editor-X.X.X.vsix
🚀 快速开始
打开插件面板
- 点击编辑器左侧工具栏的 Deco 图标
- 或使用命令面板 (Ctrl+Shift+P) 搜索 "Open Deco Panel"
模版库
- 选择页面模版
- 编辑页面参数
- 页面模版编辑页面，输入模版参数
- 预览代码
- 自动同步参数
- 生成完整代码
- 插件会在指定目录自动生成代码
- 自动导入页面路径到入口文件
- 自动导入组件库
组件库
- 拖拽组件
- 编辑属性
- 组件插入后会自动打开属性面板,您可以:
- 修改组件属性
- 预览实时变化
- 自动同步到代码
- 生成完整代码
- 插件会自动处理:
- 自动导入组件头文件
- 属性绑定
- 代码格式化
- 二次编辑
- 选中组件代码，右键选择:Deco 编辑
- 支持对设置的属性修改和重置
- 代码格式化
| |
