前言
现在设计常用蓝湖、 Figma等设计工具，这些工具有直接生成网页的插件，对于网页开发来说很方便，游戏开发者却需要花费很多时间去拼界面。如果能直接生成Prefab，将大大提高开发效率。理论上通过dom元素的位置和样式等属性，可以转换为Prefab。
该插件支持把网页元转成Prefab，可以应用到设计稿转Prefab或者旧有Vue网页项目转Cocos项目。
效果示例：
设计稿生成网页流程
以蓝湖为例，看下蓝湖如何生成Html
美术端操作：
- 设置生成代码上传
- 调整正确的分辨率，假如设计分辨率是7501624，上传后的蓝湖中的1倍图尺寸为7501624
蓝湖端操作：
- 打开设计稿，选中代码标签，点代码下载，设置HTML框架，导出代码
- 创建本地server
静态资源必须放到服务器中，才能在网页中浏览，下面提供一个简单的本地静态服务器创建方法：
- 新建html5_server.js文件，输入代码
var express = require("express");
var app = express();
app.use(express.static('./static/'));
var port = 1188;
app.listen(port);
console.log("html5_server listen to " + port);
-
新建一个文件夹，比如新建名为server的文件夹
-
将html5_server.js 放入server文件夹，打开命令行窗口，切换到该文件夹
-
安装依赖，终端执行命令： npm install express
-
启动服务器，终端执行命令： node html5_server.js
-
在server下新建static文件夹，将蓝湖生成的静态文件拖入到static文件夹下
-
打开浏览器输入：http://localhost:1188/ 就可以访问到页面了
网页转Prefab
安装Chrome插件
-
下载扩展代码，下载后目录为dom-ui-parser
-
打开Chrome扩展管理界面
-
打开开发者模式
-
点击加载已解压的扩展程序，选择dom-ui-parser文件夹
-
安装成功后，显示扩展信息
-
将插件固定到插件栏，方便使用
-
点击插件，插件界面如下
开始网页转换
-
在浏览器中，选中网页中对应dom容器，指定id（双击dom元素可以编辑dom属性）
-
然后打开dom插件，输入上面指定的id，点击开始就会下载
-
下载完后就是一个预制体的zip包，解压后，直接拖入Cocos2.x项目就可以了
默认的解压的目录结构是prefab文件和textures文件夹，如果需要调整资源位置，移动文件时一定同时移动资源和资源的meta文件，防止资源uuid变化，导致资源找不到。
自动导入的资源结构比较乱，需要手动调整层级，重命名文件，删除无用图片
Cocos3.x版本适配
目前转换的Prefab是2.x版本，针对3.x项目，可以使用官方的转换插件转成3.x文件
-
先把下载的Prefab放入cocos2.x版本的项目中
-
打开cocos3.x的项目，导入cocos2.x的项目
-
选中资源文件，注意至少要选中一个场景文件，场景可以是空场景
-
导入完成后重启项目
-
重新打开项目就可以使用Prefab了，导入的cocos2.x空场景可以删除
-
由于导入的Prefab未设置相机参数，如果看不到节点，需要修改Prefab根节点对应相机，修改时选择递归修改子节点
插件下载
dom-ui-parser.zip (24.1 KB)
