上一篇我们介绍了可视化搭建的行业现状和主要功能，以及做这个编辑器工具的主要技术选型，这篇开始一起开发可视化搭建编辑器。
参考链接
程序员开发第一步，取名字，开个仓库，我取的仓库名称是digital-twin-edit，然后考虑使用脚手架初始化仓库，因为这个工具应用有点偏向于后台应用，所以我直接选择了
- Umi Max来初始化仓库，修改了了一些配置（如：取query参数配置、路由使用hash等等）
- Xflow 2.0的文档提供了画布工具封装
- X6 Xflow的底层技术。
路由规划
先想各个模块的路由地址,用户可以新建多个数字孪生或者数据大屏项目，需要有列表、编辑、预览等页面,新建好空页面待开发：
[
{
path: '/',
redirect: '/home',
},
{
name: '首页',
path: '/home',
component: './Home',
},
{
name: '项目列表',
path: '/projectList',
component: './ProjectList',
},
{
name: '编辑',
path: '/project/:id',
component: './Project',
},
{
name: '预览',
path: '/preview/:id',
component: './Preview',
},
{
name: '测试',
path: '/testPage',
component: './TestPage',
},
{
name: '404',
path: '*',
component: './404',
},
]
框架布局搭建
最核心的是画布的编辑，也就是上述的编辑、预览页面。我们先搭建好工作区的主要布局，目前我采用的是左侧固定宽度展示节点分类列表；中间大区域区为画布渲染；右边配置面板；顶部固定高度可以展示logo、个人信息、画布工具栏目（保存、导出图片、历史版本等功能预留区域）
如下图所示：
左侧自定义节点可以通过拖拽进入画布任意位置新建节点；右边配置面板的大小用户可以鼠标悬浮在设置面板左边线来拖拽控制配置面板的大小，如下图所示：
至此，页面的主要布局结构基本完成，剩下就需要好好设计一下功能实现了。
使用技术
- 左侧自定义节点列表使用useDnd来拖拽、放置位置来新建节点
- 右侧配置面板使用Resizable来让该区域大小可拖拽控制大小，提升用户体验。
部署
我有自己的阿里云服务器，我本机配置了ssh免密登录，所以只需要写一个sh脚本就可以了，如果是需要部署在github上世界使用gh-pages即可
