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单位与设计基准匹配。
- 代码通过了项目的格式化、代码检查、类型检查和构建流程。
- 在提交前审查了占位文案、模拟数据和生成的资产。
故障排除
| 问题 | 检查项 |
|---|---|
401 或认证错误 | 确认在运行命令的shell中设置了 DASHSCOPE_API_KEY。 |
command not found: ui-to-vue | 使用 npx [email protected] 形式或全局安装包。 |
| 切图被忽略 | 确认资产目录名称受支持，并且嵌套在匹配的页面或模块下。 |
| 组件忽略请求的UI库 | 使用显式的 --ui 值重新运行，并检查生成的导入语句。 |
| 生成的布局尺寸看起来不对 | 确认截图导出宽度与目标库基准匹配。 |
参考
- npm包：
ui-to-vue-converter