guiplan官网

搭建第一个页面


        很多新手刚学习不知道如何下手,我们就从最简单的静态页面开始吧!当然guiplan的定位方向是开发工具,辅助开发的,所以如果你是新手小白,可以放弃学习了。传统的开发工具是手写代码,而guiplan工具可以让你省去大部分的手写代码。拖拖拽拽即可完成页面布局。手写少量业务核心代码即可。目前的项目都是需要定制的,还没有那个软件不写代码也能完成定制开发,所以大家一定要学好开发基础。

步骤如下:

1.创建项目

登录之后进入到guiplan中,然后点击“新建项目”


输入项目名称,选中无框架或者bootstrap框架(目前纯静态页面支持bootstrap与无任何框架搭建)。


选择页面存储路径,比如选择testDemo目录


最后点击提交。这样我们的项目就创建好了。

2.进入到项目

项目创建好之后只需点击项目即可进入到页面编辑中


此时软件会自动将静态文件下载到当前目录中

3.创建页面

点击“创建新页面”


或者右击文件夹再点击“新建页面”



会弹出页面创建对话框,输入文件夹名称(可以为空,为空则表示页面存放在根目录下),然后输入页面名称


最后点击创建,即可创建一个页面。页面的位置会根据文件夹名称,根目录,文件名称自动拼接为一个完整的路径。比如根目录为D:/test,文件夹为home,文件名称为index最终页面的位置为:D:/test/home/index.html

此时我们页面就创建好了。软件会自动帮你选中你当前所创建的页面。

4.搭建页面内容

        很多小伙伴走到这一步了也是一头雾水,因为预览器里什么都没有。这是因为自动创建的页面就只有一个div,没有样式也没有内容,所以就什么都没有,我们只需添加内容即可。
点击元素节点(注意:要改那个节点就需要点击选中节点才能修改),预览器选中要开发的显示屏幕,如果是移动端h5页面就选移动屏幕。当节点或屏幕图标颜色都为蓝色则代表选好了。而预览器中红色虚线边框则表示你当前所选的节点。

点击“组件库”,点击“无框架”然后点击“文字”,或者直接按快捷键T即可插入一个文字到所选节点里面。预览器也会同步刷新内容如下图:

后面的html,css等操作查看详细布局操作教程即可http://template.guiplan.com/apiword/aMLRNoWA/id23Egdo
vue交互操作 查看详细交互操作教程http://template.guiplan.com/apiword/CrSV6Zgn/idwSdZLj



创建一个后台管理项目


        如果你想用guiplan内置的框架来开发后台,需要学习以下的技术vue + element-plus + mongodb + koa。后台管理系统是带有前端与后端,后端开发环境也是node。但数据库是mongodb所以开发之前一定要先把环境准备好。

1.安装相关环境

见文档 http://template.guiplan.com/apiword/N1bTqaJs/idFkWEjB#%E6%9C%AC%E5%9C%B0%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

2.下载代码并安装好项目所需的插件

详情见文档 http://template.guiplan.com/apiword/bN6pjtPt/idAuNb3F

3.手写vue页面代码转可视化

只有把环境安装好,项目启动好了,我们才能可视化开发。

文件列表中直接双击vue文件即可将手写代码转为可视化,当元素节点下面能看到节点则说明转可视化成功了。

4.预览器查看页面

虽然vue代码转为了可视化但看不到效果,这里要注意代码与预览是分开的。
这块与静态页面不同的是,由于有些项目启动服务之后的端口是不断变化的,路由地址也是手动配置的,所以guiplan无法自动生成预览地址。这里就需要大家自己手动将预览地址粘贴进来。
(温馨提示:预览地址就是浏览器能正常打开的地址,我们的预览地址是真实地址,不是模拟的dom结构,并且预览地址必须要与你当前所编辑的页面是一致的。不能是你正在改登录页面,而你的预览地址是注册页面)
比如我正在双击的index首页,则将首页的预览地址粘贴进来即可,当我们随便点击一个节点比如按钮,预览器也会出现红色的边框标记则说明我们正在编辑的页面与预览页面是对应的。


5.视频教程

如果以上从安装项目到启动还是不成功的话,可以看如下视频教程

创建移动端项目


    由于移动端需支持跨平台如小程序,app,h5等,所以我们选uniapp框架或uview框架作为移动端的开发,而该框架不得不依靠hbuilderx开发工具才能正常运行与打包。所以需要安装hbuilderx开发工具。具体如下:

1.安装hbuilderx

通过此链接先下载安装hbuilderx即可https://hx.dcloud.net.cn/Tutorial/install/windows

2.创建项目

创建项目的操作与创建静态页面类似,不过要注意:移动端最好选vue2版本(移动端这块vue3技术暂时还不成熟),框架可选uniapp或uview框架,


3.进入项目

点击项目名称即可进入到项目

4.下载源代码

此时如果项目目录是空的,可以点击下载源代码

下载完之后点击刷新文件列表即可看到所有文件

5.用hbuilderx导入项目并启动项目

也就是将自动下载好的代码,整个目录都导入到hbuilderx中

文档如下
导入完之后hbuilderx项目列表即可查看到项目文件夹

6.启动服务

选择内置浏览器启动服务即可
这样我们就有了一个项目的预览地址

7.手写vue代码转可视化

回到guiplan中文件列表中双击某一个vue文件,即可自动将手写的vue代码转可视化,当出现元素节点则说明转换成功。

8.预览器

最后将hbuildderx中对应vue页面预览地址粘贴到guiplan预览器中即可,这里要注意:不同的vue页面可能对应的不同的预览地址,比如登录页面login.vue预览地址为http://localhost:8080/#/login,需根据自己的项目而定。




自己手写的静态页面转可视化


        手写代码转可视化是guiplan的核心功能也是一大亮点,目前来说市场上还没有那款软件有这么强大的功能。但是正因为代码的可变性太大,所以也可能存在一些转换失败的问题(小概率事件)。需要大家自行处理转换之后的报错问题。

1.手动处理静态html文件格式

对于静态页面,手写要做好代码处理。如果你的静态页面body元素中有script脚本先移动到body外层即可

后面的创建项目与以上创建第一个静态页面的流程一样。

1.创建项目

登录之后进入到guiplan中,然后点击“新建项目”


输入项目名称,选中无框架或者bootstrap框架(目前纯静态页面支持bootstrap与无任何框架搭建)。


选择页面存储路径,这里要选择你当前要转html页面的根目录

最后点击提交。这样我们的项目就创建好了。

2.进入到项目

项目创建好之后只需点击项目即可进入到页面编辑中


此时软件会自动将静态文件下载到当前目录中

3.手写html代码转可视化

进入项目之后只需双击html格式的文件即可自动将手写代码转可视化

vue代码转可视化


        vue转可视化与以上创建一个移动项目的流程类似,其实也就是双击vue文件即可自动转可视化。

1.创建项目

创建项目的操作与创建静态页面类似,不过要注意:移动端最好选vue2版本(移动端这块vue3技术暂时还不成熟),框架uniapp或uview框架,element以及vue版本,需要根据自己的项目而定。如果你是下载的网上的开源代码,没有用到uview框架就只需选uniapp框架即可。 如果你的项目是后台项目,并且框架在guiplan中没有,比如你的项目是iview框架,或者ant-disgn框架,可以暂时选择element框架。(注意:如果你的项目所用的框架在guiplan中没有,同样是可以用guiplan进行可视化开发,只是组件库没有,需要手动复制组件库代码转可视化开发)

项目的目录则是选择你自己项目代码的根目录,而不是随便找个空文件夹。


2.进入项目

点击项目名称即可进入到项目


3.文件列表

进入之后会自动获取项目的文件列表


4.启动服务

你自己的项目用什么命令启动服务的,先将项目服务启动好。如果你是uniapp项目可参考http://template.guiplan.com/apiword/Ln3VgSnR/idVNbTaG 来启动服务。 如果是其他框架的项目或网上的开源项目,请查找开源项目的文档来启动服务。启动服务之后会有预览地址。

5.手写vue代码转可视化

回到guiplan中文件列表中双击某一个vue文件,即可自动将手写的vue代码转可视化,当出现元素节点则说明转换成功。

6.预览器

最后将你启动服务之后的预览地址粘贴进来即可。



进群学习:
请加微信号guiplan
文字