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 版新增功能

支持v-if
支持v-for
支持class，style，ref，key等组件默认属性的编辑
组件编辑支持innterTemplate，slots，scopedslots这三个属性的编辑,更好的支持自定义组件内容和插槽。
支持structure属性，可以更加得心应手的开发具有复杂结构的组件。
支持几乎所有的element-ui组件，用心设置了众多组件的初始化属性，初始化数据和slot等默认值，可以为开发小白起到重要的参考作用。
支持任意HTML标签。
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不如我的摸鱼溜。

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

为什么这么多人觉得前端开发很难做下去？
无论是新手还是几年的前端开发程序员,都会又这样的经历:当学习了一种前端技术的时候,同时会有几种新的前端技术诞生. 还有,你选择的那种前端技术,也许已经过时了. 在抱怨过后,会继续去学习新技术,或者慢慢 ...
为什么软件开发很难外包
" 很多公司和团队选择把整个软件项目或项目中某些模块或过程(比如测试)整体外包给另一家公司或团队.本文将和你一起来探讨为什么公司或团队有外包的冲动,为什么项目外包问题多和我对外包的建议.&q ...
为什么软件开发很难？真相了
作者:Jeremy Mikkola 链接:https://sourl.cn/VLYUZZ 前言软件开发为什么如此之难?本文认为这种困难与编程语言无关,因为现代的编程语言已经足够好了.那么,原因到底是 ...
为什么软件开发很难？真相了！！
点击关注下方公众号,Java资料都在这里作者:Jeremy Mikkola 译者:王者:策划:万佳正文如下: 软件开发为什么如此之难?本文认为这种困难与编程语言无关,因为现代的编程语言已经足够好 ...
wms地图绘制工具_三维离线地图-三维地图开发，三维地球，三维可视化开发
一.软件介绍 BIGEMAP离线地图服务器,提供一站式搭建离线/在线地图数据服务器,支持40多种地图离线发布:提供快速WEB应用.WMTS.TMS.WMS等地图服务:支持二次开发调用:支持数据集管理. ...
小程序开发工具中黑马优购小程序tabs组件_还觉得小程序开发很难？这几款小程序开发工具小白都能用哦！...
玩过H5,微海报,直播之后-紧跟时代潮流的品牌公关狗们总是会在第一时间去研究时下最in的营销工具.而自从微信小程序公测之后,很多小伙伴也是中毒不浅,但是在技术开发的问题上,却不知道该如何下手.作为不会 ...
小程序开发工具_还觉得小程序开发很难？这几款小程序开发工具小白都能用哦！...
玩过H5,微海报,直播之后-紧跟时代潮流的品牌公关狗们总是会在第一时间去研究时下最in的营销工具.而自从微信小程序公测之后,很多小伙伴也是中毒不浅,但是在技术开发的问题上,却不知道该如何下手.作为不会 ...
.Net移动开发平台，基于VisualStudio的可视化开发——Smobiler平台入门教程
通过以下步骤,可以简单了解到如何下载Smobiler Designer(设计器).Client(客户端),以及如何通过设计器进行开发和调试移动应用,并在服务端部署.Cloud打包.访问您所开发的移动应 ...
android手机游戏开发从入门到精通_unity3d游戏开发如何从入门到精通？
对于游戏爱好者来说,unity3d想必大家都不陌生,unity3d和虚幻4算是现在最主流的游戏开发引擎,当然,Unity 3D 游戏开发引擎目前之所以炙手可热,与其完善的技术以及丰富的个性化功能密不可 ...
5 个被忽视的习惯，决定了你很难成为高级开发工程师！
整理 | 张仕影责编 | 郑丽媛出品 | CSDN(ID:CSDNnews) 每个初级程序员都希望有一天能成为一名高级开发工程师. 当程序员想要转向更高需求以及更高层次的角色时,他们的能力也必须 ...

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

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

最新文章

热门文章