vue开发很难？不存在的，可视化开发神器mxdev0.4版更新

引言：

       Vue可视化开发工具，编辑器，平台，IDE，快速设计开发工具mxdev 0.4版更新

       助力企业快速高质量开发，小白上手，老鸟摸鱼，效率提升的阶梯就是mxdev。

       vscode扩展页面搜索mxdev进行安装

       vscode扩展代码开源地址：https://github.com/jonenine/mxDev

以前文章链接：

       https://juejin.cn/post/6978697433156960269

       https://juejin.cn/post/6939714367839698980

       https://blog.csdn.net/jonenine/article/details/118299416

       https://blog.csdn.net/jonenine/article/details/114822637

       https://zhuanlan.zhihu.com/p/384664266

       https://zhuanlan.zhihu.com/p/357179418

还不会用的同学，请参考以前文章的链接。

一. 0.4 版新增功能

1. 支持v-if
   
2. 支持v-for
   
3. 支持class，style，ref，key等组件默认属性的编辑
   
4. 组件编辑支持innterTemplate，slots，scopedslots这三个属性的编辑,更好的支持自定义组件内容和插槽。
   
5. 支持structure属性，可以更加得心应手的开发具有复杂结构的组件。
   
6. 支持几乎所有的element-ui组件，用心设置了众多组件的初始化属性，初始化数据和slot等默认值，可以为开发小白起到重要的参考作用。
   
7. 支持任意HTML标签。
   
8. vscode端的持续编辑，IDE主编辑区持续生效

二．详细介绍

1.v-if

       操作方法如图，大家应该一看就懂

       需要注意的是if structure，else if 0 structure等属性都是structure数据类型的，这是本次新添加的数据类型，主要是为了可以更好的编辑结构化组件，详细内容看下面的解释。

       目前的0.4版，还不支持绑定，即回调参数和context参数还不能应用于组件属性和模板（template和slot等属性），编辑区只能展示静态值产生的效果，但coder的功能是完整的，设置的绑定变量或表达式会正确的出现在生成的代码中。

2.v-for

       v-for这个也是一样的，因为目前还不支持绑定，所以v-for中的所有子组件的状态都是一样的

       比如向v-for内的div（structure设置的子组件）内部拖拽一个button，会发现v-for的每次迭代内部都被放置了一模一样的一个button。虽然迭代出了两个一模一样的button，但在代码树视图，组件树中的button构件还是一个。

3. template 及slot属性

（1）innerTemplate属性

       内部的template，当外层组件存在其他内部组件时，以内部组件为准,二者不能共存。虽然支持slot，但编辑slot请使用slots或scopedSlots属性。此属性绑定后的意义为inner HTML。

       这个属性比较常见，很多组件都有 比如 <el-button>按钮</el-button> ，这个“按钮”文本就是innerTemplate，你可以改成 <el-button><div>按钮</div></el-button> 或你想要的任意样子。

（2）slots

       具名slot,不支持scoped slot。可以和外层组件的其他內部组件共存。

       举一个 <el-card> 的例子,通过slot自定义组件的头部。

（3）scopedSlots

       只支持scoped slot,可以和外层组件的其他內部组件共存。

       这个用的也比较广泛，比如 <el-tree>

       可尝试在右边的代码编辑器中进行修改，并观察保存后生效的视觉效果。

4.structure 属性

       从设计编码的角度来讲，可视化编辑的方式虽然简单直观，但其编码的颗粒度和灵活性是不如代码文本编辑细腻的，就好比电影拍的再好可能也做不出小说的味道。从目前大前端组件技术的编程本质来看，组件就是render函数，而render其实就是在绑定参数下，返回vnode的一个方法，其返回的就是一个结构。有没有一种方法可以将可视化和代码文本的编辑这两条路结合起来呢。mxdev给出的答案就是structue属性。

       先来看mxdev是如何实现 <el-table> 的

       再来看一下structure属性的定义

       structure类似于innerTemplate，但是更加灵活的代码组织形式。通过给内嵌子孙标签设置mx-dev-control属性。可以让这个子孙标签成为独立的可二次编辑的控件，控件标签的内容(structure文本中)将被忽略。mx-dev-control属性的值作为控件的structure name属性，structure name在一个structure内唯一。 也就是structure可以同时表达一个组件以及这个组件内部结构中的子组件，并且这个子组件将成为可以独立编辑的构件，可以在这个子组件中继续进行拖拽和编辑属性等操作。

       组件选择视图中“容器类型”下的“三列布局”和“自定义布局”等组件，也是通过structure属性实现的，可以说，structure是编辑复杂结构组件的利器。

       需要注意的是，在编辑内嵌标签的文本时可以设置一些属性，这些属性只能在structure中进行修改，在文本中没有出现的属性才可以通过属性编辑表格来修改。也就是说凡是用structure文本编辑出来的部分，只能通过编辑structure的文本修改，比如通过IDE上部的删除按钮对structure子组件的删除是无效的。

5. 基本上支持element-ui 2.14版本的所有组件。对于组件的默认属性，样式和template，slot等属性都认真设置了初始化值，可以对开发起到良好的提示和参考作用。

6. 支持任意html标签

       通过structure组件实现div+structure编辑的功能

       通过any tags实现纯粹的structure编辑的功能，既任意的（多个）html标签和其他导入的第三方库的标签。

       这个各位亲自试验一下便知。

7. vscode 编辑持续生效

       在上一版本的插件中，在vscode编辑完成之后保存生效，保存之后会将vscode端的editor关掉，0.4版赋予持续编辑和生效的能力，即只要这个editor不关闭，保存所编辑属性时，对应的组件的视觉效果都会立即生效。

       需要注意的是，其他不能在vscode中编辑的属性，像是string，boolean类型的属性，需要在编辑后点击属性编辑表格右上侧的保存图标，以刷新组件。

8.其他一些bug的修改和操作上的完善

三．0.5版支持功能展望

       在即将到来的0.5版中，mxdev将会进一步与vscode的开发相结合，比如通过右键菜单关联src下的vue文件，设计模型的保存，合并比较源代码文件等功能。

       即将到来的另外一个重要功能：自定义组件库的导入功能。是的，你可以将自己或所在团队开发的组件库导入mxDev。在下一版的介绍文章中，将会举一个实际的例子，演示开发一套基于echart的vue组件库（无非是柱图，饼图，线图），并将其导入到mxdev中，使其具备和内置的element-ui组件一样的拖拽开发和属性修改能力。

       另外，可能有人会反映说：拖拽有时不好用，这个要有点耐心，因为有时候拖拽的图标比要进入的父组件还要大，可以试试4角进入的拖拽方式，只要目标组件闪了黄光，放手就是，这个需要有一点耐心。

       快来使用mxdev，你的996不如我的摸鱼溜。