如何在编译好的页面下还能可视化布局，可视化交互。可视化双向绑定，可视化点击事件，可视化弹框制作

如何在编译好的页面下还能可视化布局，可视化交互。可视化双向绑定，可视化点击事件，可视化弹框制作

技术介绍

项目演示

众所周知我们在制作前端页面的时候，一边要手写代码，另一边要打开浏览器查看效果，当涉及到交互的时候，比如要测试一下自己写的按钮点击事件，我们还得切换到浏览器去手动点一下，才能看到自己写的代码逻辑代码是否有误。
而目前guiplan已支持在编译好的页面下可视化布局，直接看到的就是编译好的真实效果，可视化交互直接在看到的效果上写数据代码，添加点击事件等等。写完立刻生效。直接点击即可测试。真正的将可视化布局，预览真实效果，可视化交互等功能做到了三合一，软件里一个页面就能搞定所有的流程，无需再边写代码边看效果边点击，窗口还要繁琐切来切去等操作。废话不多说先放个视频直接演示效果

编译好的页面直接可视化布局，可视化双向绑定、可视化点击、可视化制作对话框 #web #前端开发

完整视频如下

guiplan0.5.0大改版，编译好的页面直接去可视化操作，真正将网页制作，网页的预览效果，以及网页的交互制作做到了三合一

操作流程

技术介绍

由于我们大部分的vue开发的项目都用webpack编译，我这边用node+express+mongodb+iview-admin制作了一个简单的前后端框架，配合guiplan可自动生成前后端代码。有兴趣的同学也可以下载免费使用 guiplan-iview-admin，然而实际在使用webpack过程中项目中的框架或组件越来越多，电脑配置也不高的情况下，我们每次修改之后，编译都特别慢。大大影响了体验，降低了开发效率。从而guiplan迟迟做不了在编译好的页面下可视化操作，因为webpack编译太慢，功能做出来体验也会很差，如果软件每次自动生成完代码，而且还要等待几秒的编译时间，会让用户觉得这个软件老卡了，所以宁愿不做这个功能也不要背这锅。
后来了解到了新技术vite,测试了一下，效果不错基本是秒编译，vite热更新大大提高了编译速度，从而我们后续将编译好的页面直接可以可视化操作这个功能给加上了。element-plus-vite 这里是我这边写的精简版框架，目前只添加了路由的配置。用guiplan最新版的同学建议用这个框架，效果会更好,但功能不全需要自己补充。

下载项目

直接输入命令

git clone https://gitee.com/guiplan/element-plus-vite.git

下载到自己的电脑里，比如：我这边下载到F:\gitWork\test\element-plus-vite目录下

创建项目

在guiplan软件中创建项目，当选择路径的时候，我们直接选择下载过来的文件目录

创建页面

输入页面名称之后，选择空模板，点击创建

安装与启动

软件会自动检测当前项目是否安装，如果没安装会出现以下图标，点击图标即可自动执行npm install命令来安装，自动下载相关的插件。

安装完之后这个图标变为了启动图标

再点击这个图标，即可自动执行npm run dev命令来启动服务。

创建路由

先输入vue文件相对路径，下方会显示文件的绝对位置，然后点击保存

在软件中文件菜单里可以点击打开路由配置


打开路由配置之后，左边有个“一键创建路由” 按钮，点一下即可自动创建。
不过这里要注意，由于vite对@符号严格要求的缘故，我们得将自动生成的代码@前面加一个斜杠/
如：

component: () => import('@/views/test/index.vue')

改为

component: () => import('/@/views/test/index.vue')

开启预览模式

在软件的右下角输入当前启动的项目端口，然后再点击打开预览（也可直接用快捷Y），再点击刷新

这样我们就可以直接看到编译后的真实效果了，然后我们再点击自己创建的页面如下路由名称为test_index,点击完之后即可跳转到自己的当前自己正在编辑的页面

编辑窗口可视化布局

由于页面里什么都没有，我们可以按快捷键Y切换到编辑窗口，插入一个div再插入一个文字，再点击保存先给页面插入一些内容。当然没改版之前都是通过这个窗口来进行可视化制作页面的。这里如果不用到特殊插件以及组件，普通的html代码渲染的效果与实际几乎一致。但有些组件以及插件元素标签都是自定义的，比如element框架里的按钮组件是元素标签<el-button>这样的,或者用户用的自己写的组件如<test-btn>,这样我们的编辑窗口由于获取不到这些组件的结构，从而无法渲染到真实的效果。所以这边制作完之后再点击保存才能看到实际效果。包括我们在这基础上写的数据、方法、绑定的点击事件 都需要保存之后在实际效果下才能看到效果与测试。

预览模式下布局

再按快捷键Y开启预览模式，这里有个按钮，点击这个按钮之后

软件自动将你选择的元素添加红色边框来标记

切换到编辑效果

我们再将鼠标点击到预览窗口以外的地方，当出现如下图出现黄色边框时，表示我们就可以可视化操作页面了

这一块要特别注意一下，因为如果你要在真实效果下还能实现点击，快捷键等操作，为了避免与软件快捷键的冲突，我们在测试的时候点击了预览窗口，就不能再进行快捷键等方式操作页面了。所以当我们测试完之后要记得再点击预览窗口以外区域回到编辑模式。

选择层

当添加的div,按钮，文本框等组件越来越多的时候，我们通过方向键键（上下左右）选择不同的元素，来进行不同的操作。其他的操作其实和编辑窗口里的操作一样。

插入组件

与编辑窗口操作方式一样，直接点击按钮即可自动插入按钮到当前选择的元素里，这里会自动保存，并不需要我们每次都去点击保存。当然这里由于自动保存，如果你的项目是webpack构建的就存在编译慢，效果很长时间才出来的问题，那么就请切换到编辑窗口去制作。


插入进来之后，看到的就是实际效果。

调整布局

还是一样的操作，点击下图水平布局，再点击垂直居中，下方效果立刻变化

快捷键M + 方向键 快速添加边距如下：

修改属性，内容，添加数据，创建方法

• 修改属性

如上图我们选择这个按钮之后点击属性，会直接打开属性代码，左边会显示当前元素常用的属性，可以手动去点击按钮快速插入，也可以直接去改源代码。


我们可以看到按钮的尺寸直接变小了。

• 修改内容
  这里会显示按钮的内容，直接去修改它即可修改按钮内容。如改将确定改为搜索
  
  改完之后效果也是立刻更新了
  
• 创建数据
  这里以文本框为例，选中文本框，点击数据
  
  比如这里创建一个数据name:‘guiplan’
  
  然后将这个name绑定到这个文本框里
  
  可以看到效果就直接显示出来了，name的值直接就显示到文本框里了
  
  这样我们的交互也可以可视化制作了
• 创建方法并触发点击事件
  我们再选中这个搜索按钮，点击自定义方法
  
  再创建一个方法

clickTest(){
  this.name = "guiplan的内容被修改"
}

同样的我们将方法绑定到点击事件里

绑定完之后我们直接去点击搜索按钮，可以看到文本框里的内容立刻变化了

查看源代码

直接点击页面名称即可查看源代码

生成的源代码也是非常友好的，不像其他软件生成的代码几乎是不能拿来用的。
而guiplan生成的代码完全符合vue规范，以及html规范。哪怕我们不用这个软件来制作了，生成后端代码我们同样是可以直接拿来用的，当然代码可能不好看，网上找格式化工具，格式化就好了。而且还支持手写与软件生成一起混合开发，上面test_index注释以外的区域可以写自己的代码，手写与自动生成两不误，真正的适应程序员的要求，做到互相兼容。

总结

从代码的量来看虽然不多，但如果去手写，从头敲完不加测试最起码十多分钟是需要的，而这个简单的页面在guiplan软件里操作，一分钟不到就能搞定。可想而知能提高多少倍工作效率。
当然对于我们程序员来说也是很有好处的，少量的核心代码还是要写的，比如那些按钮还有点击事件，双向绑定文本框等。有了这个软件之后，其实我们只需要去写少量逻辑代码。像那些这种div元素,css样式代码，以及v-mdal,v-for绑定属性等等，这些代码都没什么技术含量，而且还重复且量还巨大。写多了只能说很熟练，但并不能提高技术。这些代码占整个项目的80%以上。软件自动帮你生成，不仅提高开发效率还能提高学习效率。
综上所有的操作都是基于编译好的页面下进行，再也不用把页面切来切去看效果了，大大提高开发效率，节省开发时间，减低开发成本与难度。
真正的将可视化效果做到了极致。做到了网页的制作，预览，交互的三合一。
制作网页就是这么快速，高效。
视频里还有对话框的可视化制作，原理也是一样的，这里就不做多说明了，有兴趣的同学可以直接看视频。
更多信息见官网www.guiplan.com