第一步：安装 Easy Window
1
下载安装包
访问 Easy Window 官网，下载适合您操作系统的安装包：
- Windows: easy-window.exe
- macOS: easy-window.dmg（即将发布）
- Linux: easy-window.deb（即将发布）
2
运行安装程序
双击下载的安装包，按照安装向导完成安装。整个过程大约需要 1-2 分钟。
3
启动应用
安装完成后，在桌面或开始菜单中找到 Easy Window 图标，双击启动应用。
第二步：创建第一个项目
1
新建项目
启动 Easy Window 后，点击 新建项目 按钮。
选择项目模板或从空白项目开始，输入项目名称和保存位置。
2
熟悉界面
Easy Window 的界面包含以下几个主要区域：
- 组件面板： 左侧，包含所有可用的UI组件
- 设计画布： 中央，您的设计工作区
- 属性面板： 右侧，当前选中组件的属性设置
- 图层面板： 右下角，管理组件层级结构
第三步：开始设计
1
添加组件
从左侧组件面板中选择需要的组件，直接拖拽到设计画布上。
尝试添加以下基础组件：
- 标题 (Title)
- 按钮 (Button)
- 输入框 (Input)
- 卡片 (Card)
2
配置属性
选中任意组件后，在右侧属性面板中可以修改：
- 文本内容： 按钮文字、标签内容等
- 样式属性： 颜色、字体、大小等
- 布局属性： 位置、尺寸、对齐方式等
- 交互属性： 点击事件、数据绑定等
3
布局调整
使用以下技巧优化您的布局：
- 智能对齐： 拖拽组件时会出现对齐线，帮助精确定位
- 快捷键： Ctrl+D 复制组件，Delete 删除组件
- 网格吸附： 在视图菜单中开启网格，实现精确布局
第四步：预览和测试
1
实时预览
点击工具栏中的 预览 按钮，查看设计效果。
预览模式下可以测试按钮点击、表单输入等交互功能。
2
响应式测试
在预览模式下，使用不同的屏幕尺寸测试您的设计：
- 桌面 (1920x1080)
- 平板 (768x1024)
- 手机 (375x667)
第五步：导出项目
1
选择导出格式
点击 文件 → 导出，选择您需要的导出格式：
- Vue3： 完整的应用项目
- HTML + CSS： 纯静态网页文件
- 图片： PNG/JPG 格式的设计图
2
运行导出的项目
如果导出为 Vue3 项目，您可以：
cd your-project-name
npm install
npm run dev
项目将自动编译。
小贴士
常用快捷键
Ctrl + N - 新建项目Ctrl + S - 保存项目Ctrl + D - 复制组件Delete - 删除组件Ctrl + Z - 撤销操作Ctrl + Y - 重做操作
最佳实践
- 定期保存项目，避免数据丢失
- 使用有意义的组件名称，便于后期维护
- 遵循统一的设计规范，保持界面一致性
- 充分利用组件的复制和模板功能，提高效率
- 在不同屏幕尺寸下测试您的设计
遇到问题？
如果在使用过程中遇到任何问题，您可以：
- 观看 视频教程 学习更多技巧
- 加入 QQ 交流群 1053996918 获得帮助