UI转Vue 是做什么的？
将UI设计截图批量转换为Vue 3 Composition API组件代码。
使用场景
- 用户提供了包含设计截图或设计导出图片的目录。
- 目标应用是Vue 3。
- 用户希望一次性生成页面组件、共享组件以及路由连接。
- 用户指定了Vant、Element Plus或Ant Design Vue作为组件库。
不适用场景
- 用户只有一张截图，需要定制化的单个组件。
- 目标项目不是Vue。
- 设计稿需要复杂的交互逻辑、数据流或可访问性审查。
- 截图包含无法发送到外部模型API的客户隐私数据。
输入
使用按模块和页面状态分组的输入目录：
screenshots/
|-- HomePage/
| |-- List/
| | |-- [email protected]
| | `-- cut-images/
| |-- cut-images/
| `-- [email protected]
`-- cut-images/
支持的切图目录名称包括 assets、icons、sprites、cut、images 和 cut-images。
转换模型
- 页面分组：当截图表示列表、详情、表单、加载或空状态时，将相关截图合并为一个页面组件。
- UI库映射：尽可能将原生视觉元素映射到Vant、Element Plus或Ant Design Vue组件。
- 切图优先级：优先使用页面级资源，其次是模块级资源，最后是全局共享资源。
- 组件提取：重复出现的UI区域会被提取为共享组件（出现超过一次时）。
CLI使用方法
使用 npx 运行转换器，确保文档中的命令不依赖全局安装的二进制文件：
export DASHSCOPE_API_KEY=your_key
npx [email protected] --input ./screenshots --ui vant --output ./src
对于桌面端UI库：
npx [email protected] --input ./designs --ui element-plus --output ./src
npx [email protected] --input ./designs --ui antd-vue --output ./src
如果包已全局安装，可以直接使用 ui-to-vue 命令：
npm install -g [email protected]
ui-to-vue --input ./screenshots --ui vant --output ./src
选项
| 选项 | 描述 | 默认值 |
|---|---|---|
--input | 设计图目录 | ./screenshots |
--ui | UI库：vant、element-plus 或 antd-vue | vant |
--output | 输出目录 | ./src |
--config | 配置文件路径 | ./.ui-to-vue.config.json |
API密钥处理
转换器可以从配置文件或环境中读取DashScope凭据。在仓库中建议使用环境变量：
export DASHSCOPE_API_KEY=your_key
如果需要本地配置文件，请确保将其排除在版本控制之外：
{
"apiKey": "your_dashscope_key",
"input": "./designs",
"ui": "vant",
"output": "./src"
}
.ui-to-vue.config.json
安全与隐私
- 将设计截图视为可能发送到外部模型API的源材料。
- 未经许可，请勿对涉及客户隐私的设计执行此流程。
- 在可重复的工作流中固定转换器版本，而不是使用
@latest。 - 在提交之前审查生成的Vue代码。
- 不要提交
.ui-to-vue.config.json、API密钥、生成的密钥或客户截图。
输出审查清单
- 页面组件已在
views/或指定的输出目录下生成。 - 重复的UI区域仅在复用明确的情况下被提取到
components/中。 - 路由输出与目标项目的路由风格兼容。
- 生成的组件一致地使用所请求的UI库。
- 生成的CSS单位与设计基准匹配。
- 代码通过项目的格式化工具、linter、类型检查器和构建流程。
- 提交前检查了占位符文案、模拟数据和生成的资源。
故障排查
| 问题 | 检查 |
|---|---|
401 或认证错误 | 确认在运行命令的Shell中设置了 DASHSCOPE_API_KEY。 |
command not found: ui-to-vue | 使用 npx [email protected] 形式或全局安装该包。 |
| 切图被忽略 | 确认资源目录名称是受支持的，并且嵌套在对应的页面或模块下。 |
| 组件忽略指定的UI库 | 使用明确的 --ui 值重新运行，并检查生成的导入语句。 |
| 生成的布局尺寸不正确 | 确认截图导出宽度与目标库的基准一致。 |
参考资料
- npm包：
ui-to-vue-converter