mxDev

visual design tools for javascript web project ,such as vue react

      ui界面的开发设计，如果有可视化设计工具的帮助，无疑会起到事半功倍的效果。在web项目组件化的时代。一款优秀的可视化工具会在概要设计，网站总体设计，交互设计，业务逻辑实现，api测试等方面带来巨大的效率提升。MxDev辅助设计工具致力于帮助设计开发人员更好，更快的进行设计开发，为有效降低软件企业设计开发成本，提高软件质量稳定性，缩短软件交付时间贡献力量。

      mxDev是一款面向vue和react技术的辅助设计工具，其重要特性有：

一． 特点

1. 工具以vscode插件方式展现，和vscode编程无缝结合
2. 任意拖拽，实时展示
         控件可由组件候选区拖拽到主编辑区，也可在主编辑区的不同父组件之间来回拖拽，将来更可和组件树之间进行拖拽。
   主编辑器区的效果即真实页面的展示效果，不是模拟出来的，可以直接和组件进行人机交互。就目前来说，就已经非常适合进行页面原型设计，未来进一步完善后，更可以用来辅助业务细节实现。
3. 组件属性即时修改，视图效果即时生效。
         因为采用了先进的组件显示技术，即使对层次较深的组件进行属性修改，视图刷新速度也会保持飞快。
4. 完善的组件属性编辑支持，包括属性类型及属性说明提示等
5. 支持html标签和vue第三方库标签
   
   
   1.jpg

二． 不同区域说明

1. 组件候选区
      主要支持将html和vue第三方库的组件以图表方式罗列展示，并支持拖拽到右边的主编辑器区。

2.jpg

2. 属性编辑区

3.jpg

3. 主编辑器
      主编辑器就是展现页面的部分，MxDev在实现主编辑器的时候就是在每个组件外面做了一层薄薄的控件封装，所以主编辑区展现的效果基本上就是项目页面的实际效果。
      主编辑器的组件同样可以随意拖拽，拖拽时也需要和target进行匹配，如果不能匹配是无法激发黄色闪烁效果的。有的输入组件，输入焦点触发和拖拽控制相互冲突，所以在主编辑区要想直接输入某些组件，比如输入input，需要先双击这个组件以屏蔽拖拽并触发输入焦点。
      注意：当目前为止，因为尚不能绑定v-model，所以输入之后仍然是没有效果的
      有些组件比如el-table-column被拖拽到el-table后就无法被选中，有的组件比如el-divider本身就屏蔽click事件，也无法被选中，在即将出现的下一个版本中，会用组件树的形式来解决这个问题。

4. 操作按钮
      按钮处于整个插件界面的右上角，截图如下：

4.jpg

三． 拖拽说明

      拖拽是图形化设计工具进行人机交互时的灵魂，mxDev工具在拖拽控制上更是做到了细致贴心。

1. 拖拽对象分为dragSource和dropTarget，source和target必须匹配。比如el-col图标只能拖拽到el-row组件内部或其他兄弟el-col组件旁边，其他组件内部是拖拽不进去的。
2. 拖拽分为“拖拽到内部”和“拖拽到旁边”
         拖拽source到target内部时，被拖拽进入的target组件会呈现“黄色闪烁”的样式，当拖拽到target组件的任意一个边的时候，target的这个边会出现“黄色闪烁”的样式。
3. 拖拽到内部分为两种情况
   (1) source图标比target要小，直接拖拽进内部即可
   (2) source图标比target要大，可以使用“四角进入”拖拽，所谓四角进入，就是source图标或组件的任意一个角（corner）和target对应的角重合的方式(source的角进入到target的角)进行拖拽。
         个别组件在编辑器区展示时尺寸比较狭窄，拖拽时要有耐心，直到目标父组件呈现黄色闪烁样式的时候，松开鼠标完成拖拽。

四． 插件安装

      可以在vscode的extensions中搜索mxDev自动进行下载安装，也可以自git上下载之后，自己打包安装。

      Github地址：https://github.com/jonenine/mxDev