CN110597506A - 一种前端应用可视化开发工具和使用方法 - Google Patents

Abstract

本发明公开了一种前端应用可视化开发工具和使用方法，属于互联网前端开发技术领域。所述前端应用可视化开发工具包括ECoder软件和物料/模板库，ECoder软件具有用户登录模块、初始化模块、项目管理编辑模块、页面编辑模块、区块编辑模块、本地服务模块、自动更新模块。使用方法为：开发者登陆、浏览并选择模版初始化项目、根据项目需求对不同页面进行自定义编辑、选择下载云端区块或者本地自定义区块进行ui和逻辑步骤编辑后进行内容填充，经过以上实时可视的操作后，该发明会生成对应项目代码并允许再次编辑，随后可通过工具中git面板push到代码仓库或者关联应用地址进行发布应用。

Description

一种前端应用可视化开发工具和使用方法

技术领域

本发明属于互联网前端开发技术领域，更具体地说，涉及一种前端应用可视化开发工具和使用方法。

背景技术

前端开发是创建 Web页面或App等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户交互界面。纵观整个前端开发史，自有前端工程师这个称谓以来，在日新月异的技术发展过程中，前端开发越来越工程化和标准化，一个较完备的前端项目开发流程需要从规范化、组件化构建模板开始，经过代码编写，代码调试检测，编译打包，最后到发布上线，每个新项目都需要前端工程师重新经历一遍这样的流程。然而，企业级开发中经常会遇到很多交互简单但页面很多的需求，例如报表页面、工单页面，特别当开发同一个行业的多个项目时，会有更多大量同质化的开发需求，耗费了开发人员大量的精力重复规范化、组件化构建模板，学习和适应新的代码范式编写代码。因此，在目前的前端开发技术领域，如果发明一种开发工具，能够在集成前端工程化能力的同时降低前端学习门槛、项目流整体操作复杂度，解决前端业务上手耗时、重复开发等问题，从而实现代码的快速复用，并具有一定程度的逻辑功能编辑能力，使得开发者可以极速构建出一个个不同的前端应用，从根本上提高前端开发的工作效率，具有重要意义。

发明内容

针对现有技术存在的上述问题，本发明所要解决的技术问题在于提供一种前端应用可视化开发工具，实现前端页面的可视化拖拽生成、相关功能区块逻辑可视编写以及实时预览、保存后自动生成页面代码的开发方式，并提供规范化的项目、页面和区块模板，集成前端工程化能力的同时降低前端学习门槛、项目流整体操作复杂度，解决前端业务上手耗时、重复开发等问题，从而实现代码的快速复用，使得开发者可以极速构建出一个个不同的前端应用，从根本上提高前端应用开发的工作效率。本发明所要解决的另一技术问题在于提供所述前端应用可视化开发工具的使用方法，实现前端应用的可视化开发。

为了解决上述技术问题，本发明所采用的技术方案如下：

一种前端应用可视化开发工具，包括ECoder软件和物料/模板库，所述ECoder软件具有初始化模块、项目管理编辑模块、页面编辑模块、区块编辑模块、本地服务模块、自动更新模块，所述物料/模板库为ECoder 软件提供模板和属性可编辑的ui，所述模板包括项目模版、页面模版和区块模版。

优选地，所述的项目模版、页面模版和区块模版全部遵循同一个项目开发规范，即拥有统一的目录结构、代码规范约定、组件输出格式、页面布局文件格式。

优选地，所述的区块编辑模块提供区块可视化编辑功能：在区块编辑界面上，根据设计需求，可以将不同ui 自由拖拽组合，并对每个 ui 对外暴露的属性按需进行自定义编辑和数据绑定，从而形成静态页面，其后通过对相关 action 和 event 的可视步骤编辑，完成逻辑能力的实现，形成一个独立的前端业务功能组件，即区块。

优选地，所述的页面编辑模块提供前端页面可视化编辑功能：在 Ecoder 中，基于页面模版的统一规范，提供统一的渲染组件读取配置文件生成显示页面，该组件允许通过拖拽、勾选方式筛选区块实现前端页面的布局和内容编辑，布局修改可以更新页面内区块的增删、大小长宽、位置信息，内容编辑允许在区块内替换或者嵌套多个自定义区块内容；当修改页面完毕后点击保存，ECoder 软件就会根据所读取的当前编辑前端页面的路径，把对应操作转换成代码写进项目并更新本地服务中所对应的代码，随后自动重启本地服务及发送相关通知，实时展示页面预览。

优选地，所述项目管理模块提供当前用户所有本地项目和云端项目的罗列展示，并显示可用操作：对于本地项目管理提供新建项目、查看启动项、关联代码仓库、删除文件功能，对于云端项目提供模版初始化、git 面板、代码发布、启动项查看功能，本地项目和云端项目都拥有页面编辑功能入口，新建项目允许用户筛选模版在工作目录建立应用工程，并自动安装所有依赖文件；启动项包含所有 ECoder 在项目的 package.json 文件中扫描的 npm script 项；关联代码仓库允许用户为当前应用绑定云端仓库，并通过 git 面板提供后续操作，git 面板包含分支处理、推送、抓取等git 基础命令的可视操作。

优选地，所述本地服务模块集成 xterm/Terminal、node-pty，用于前端模拟终端效果并可以屏蔽不同操作系统下不同指令的代码不同带来的运行差异，如斜杠、目录、全局变量等，它会按需执行任务，包括拉取模版、启动项目、文件监听、生成文件、更新目录等，并保证本地开发环境的配置及依赖无误，最终根据默认或自定义端口启动服务，执行预设模版路由，通过监听文件改变及文件改变带来的服务构建发送事件通知，与其他进程/服务通讯。

优选地，所述初始化模块可以让用户首次打开应用可以关联开发者账号，可以自动下载默认模版、自动更新依赖文件、检查版本更新、设置工程目录、设置依赖工具、设置依赖下载源、设置编辑器启动命令，同时保证用户再次打开、或者更新应用时自动检查更新默认模版、保证基础设置不改变。

优选地，所述自动更新模块自动检查云服务器上ECoder的版本信息，保证在有新版本发布时提示用户更新并展示更新信息，用户可以选择下载新版本或者忽略，新版本下载完毕后，ECoder 会自动关闭静默完成所有更新，并自动以新版本打开。

所述的前端应用可视化开发工具的使用方法，包括：

1）安装ECoder软件，打开应用，使用开发者账号登录，登陆后ECoder 软件自启动本地服务模块执行预设模版行为，包括拉取模版、安装前端依赖、启动预设模版路由；

2）选择文件目录作为本地项目仓库，ECoder自动拉取账号关联项目列表或者新建项目以便管理或编辑操作；

3）选择模版对新建项目初始化，ECoder软件会在对应目录添加模版文件，并读取相关配置，显示当前项目的可操作选项；

4）选择在已有项目或新建项目下对页面进行可视化编辑操作，ECoder软件会读取相关项目代码显示编辑区域，通过编辑区的对应操作可以实时可视地对页面布局和区块填充编辑调整，包括：移动区块位置，改变区块大小、更换区块内容，ECoder软件将会把对应的编辑内容转换成代码写入进该页面所属项目中；

5）通过ECoder软件的区块可视化编辑功能可以自由配置出不同样式不同功能的前端区块或者直接在云端下载符合需要的区块，这些区块会被自动扫描到前端页面可视化编辑区以供填充编辑页面；

6）完成项目的开发后，通过ECoder项目管理功能为项目关联应用发布地址和相关仓库地址，打开 git 可视化操作面板把定制过的前端项目push到仓库，或者直接关联发布地址发布应用，完成前端应用开发。

本发明中相关术语说明：

图形用户界面(Graphical User Interface，简称GUI，又称图形用户接口)是指采用图形方式显示的计算机操作用户界面，本发明对外公开的软件名称为 ECoder，是一款 GUI软件。

ui 即 User Interface (用户界面) 的简称，此处特指构成区块界面的不同组件。

Git (读音为/gɪt/。) 是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理

push 为 git 中的一条命令，此处指将本地版本库推送到远程服务器

Internet Explorer 9浏览器，简称IE9。

.eslintrc.js 是ESLint 的配置文件。

git hook 可以在git的执行过程中触发某些操作。

ESLint是一个开源JavaScript linting实用程序。代码linting是一种静态分析，经常用于查找不符合某些样式指南的有问题的模式或代码。大多数编程语言都有代码链接，编译器有时会在编译过程中加入linting。

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

Action是把数据从应用传到 model store 的有效载荷，它是 mdoel store 数据的唯一来源，可以把它理解为一条需要执行的任务。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，可以在状态改变时执行函数，比如执行一个 action。

services 指代所有异步的网络请求被封装后的函数。

models state 指代当前区块中的状态数据源，状态数据源提供不同的数据内容给 ui 组件来表示不同的显示内容和状态。

view指代组件的显示部分。

有益效果：相比于现有技术，本发明的优点为：

（1）本发明提供的前端应用可视化开发的工具，可供前端开发人员通过拖拽的方式可视化编辑前端页面的内容和布局，软件自动根据前端页面生成代码保存到项目中并可实时预览；工具还提供区块编辑的功能，生成区块用于填充前端页面；该工具还集成了前端所有开发环节，提高了开发人员开发前端应用的效率；

（2）本发明提供的前端应用可视化开发的工具，使用方法方便，集成前端工程化能力的同时降低前端学习门槛、项目流整体操作复杂度，解决前端业务上手耗时、重复开发等问题，从而实现代码的快速复用；

（3）本发明提供的前端可视化开发的工具，适合于具有很多交互简单但页面很多，或大量同一个行业的具有大量同质化的开发需求的需求企业级开发中应用，也可应用于简单项目的快速页面开发。

附图说明

图1为Ecoder首页示意图；

图2为Ecoder开发者登陆界面示意图；

图3为基础设置界面示意图；

图4为创建项目库界面示意图；

图5为项目管理界面示意图；

图6为新建本地项目界面示意图；

图7为新建项目自动下载模版、安装依赖过程界面示意图；

图8为项目启动项查看界面示意图；

图9为项目其它操作项查看界面示意图；

图10为云端项目展示界面示意图；

图11为选择一个云端项目自动更新并启动项目页面编辑相关的本地服务过程界面示意图；

图12为通过本地服务进入项目编辑对页面进行调整界面示意图；

图13为更新区块大小、位置界面示意图；

图14为替换区块内容操作界面示意图；

图15为页面改变区块位置大小内容后界面示意图；

图16为云端空项目选择模版填充操作界面示意图；

图17为区块功能区域界面示意图；

图18为新建区块操作界面示意图；

图19为编辑区块内 ui 属性界面示意图；

图20为编辑区块内所有的异步请求界面示意图；

图21为编辑区块内model state界面示意图；

图22为编辑区块内action界面示意图；

图23为编辑区块内event界面示意图；

图24为在项目中增加自定义区块后页面示意图；

图25为项目git操作面板界面示意图。

具体实施方式

下面结合具体实施例对本发明进一步进行描述。

实施例1：

一种前端应用可视化开发工具，包括 ECoder 软件和物料/模板库，ECoder 软件具有用户登录模块、初始化模块、项目管理编辑模块、页面编辑模块、区块编辑模块、本地服务模块、自动更新模块，所述物料/模板库为 ECoder 软件提供模板和属性可编辑的 ui，模板包括项目模版、页面模版和区块模版。

项目模版、页面模版和区块模版全部遵循同一个项目开发规范，即拥有统一的目录结构、代码规范约定、组件输出格式、页面布局文件格式。在所有项目模版中统一做了ie9 兼容处理，可在 ie9 下流畅运行，并规定项目的 config 目录存放项目运行配置，.eslintrc.js文件记录统一约定的代码规范并由 githook通过 ESLint 约束，src/page目录为所有路由页面存放目录，其中每个页面目录遵循页面模版规范，必须拥有 block 文件夹存放构成页面布局的所有区块文件，必须拥有 config 目录存放和路由页同名的页面布局描述文件，其中区块文件由 ECoder 生成或者由用户遵循区块规范书写，其规范为必须拥有入口 index.js 文件，必须拥有 src 目录， index 文件用来输出描述性对象数据来描述区块基础信息，如最小宽高、中文描述、是否拥有头部栏等；src 目录用来存放工程代码，其结构包含为：blockData 目录存放区块构成信息，components 目录存放区块构成所需 ui，models 目录存放区块数据源，services 目录存放异步请求的封装；页面布局描述文件同样由 ECoder 生成或者由用户遵循规范书写，必须按照格式用 JSON的方式描述出页面内每一个区块的位置信息、组成内容。同时项目内页面入口必须安装本发明提供的页面渲染插件，页面内区块入口必须使用本发明提供的区块渲染插件，两款插件的目的都是负责把 ECoder 生成或定制的对应描述文件渲染成正式的可视页面。

区块编辑模块提供区块可视化编辑功能：在区块编辑界面上，根据设计需求，可以将本发明提供的种类丰富的 ui 自由拖拽组合，并对每个 ui 对外暴露的属性按需进行自定编辑和数据绑定，从而形成静态页面，其后通过对相关action 和 event 的可视步骤编辑，完成逻辑能力的实现，这样就可以形成一个独立的前端业务功能组件，即区块，区块设计完成后会保存到本地缓存库以供前端页面使用，同时用户可以选择将设计好的区块上传到云端区块仓库，经过审核代码审核后，所有 ecoder 用户都可以下载使用其他用户共享出的区块构成配置。

区块编辑模块将提供不同 ui的编辑功能，其特征在于每个ui 组件通过必须的type.js 文件声明自己可供编辑的属性，如 title、text、disable、url、options、loading等，同时每个属性必须规定所属类型（string、object、array、select、color、objectArray、boolean、number），区块编辑模块为每一种类型的编辑提供方便的可视调整方式，如string 类型可直接通过输入框键入修改，select 类型可通过下拉框筛选修改，array 类型可通过icon 点击增加数量逐条编辑，另外每个 ui 组件允许设置是否允许嵌套以及布局方式和盒模型大小，嵌套规定 ui 内是否允许存在子 ui，布局方式允许设置 ui 内是块级元素、内联元素、行内块元素或者弹性布局，盒模型大小允许调整内外编剧大小。每个区块内 ui 会生成唯一标识码，为方便管理允许用户为 ui 设置别名用来区分。本发明提供通用、布局、导航、数据录入、数据展示、反馈 6 大类共 43 个基础可编辑 ui，覆盖通用行业、政府、企业、门户等 web 站点的常见功能。

action 和 event 编辑，依赖用户编辑出的 services和 model state，ECoder会给出清晰的任务、事件相关逻辑步骤以供编辑，其中 action 可以用来编辑一项任务，本发明为每个任务提供了六种抽象步骤（models 取值、异步请求、异步结构、执行 action、修改 model、代码块），event 用来决定你在某一事件发生时做什么事、触发什么任务（即action），event 有四种抽象步骤（models 取值、执行 action、修改 models 、代码块）；action 和 event 编辑区域通过 canvas 画图实现，你可以在编辑区域内随意生成、拖拽每条抽象步骤的具象图块，然后通过在步骤图块之间随意连线来组合、嵌套定义步骤顺序，然后点击每一条步骤图块来编辑步骤内容，以此来编辑从简单到复杂的种种任务流程，实现区块的某一项功能目的，如在合适的时机更新数据并同步更新显示内容。

在 services 中定义了所有需要异步发送的网络请求，本发明通过表格的方式填写每一个异步请求必须的组成部分，如函数名、请求地址、请求方式、请求需要携带的参数等，从而生成特定的代码提供给不同的 action 和 event 使用；model state 用来定义当前区块中的状态数据源，状态数据源提供不同的数据内容给 ui 组件来表示不同的 view内容和状态，通过 event 和 actuin 来改变 model state 的值，就可以达到动态更新区块内容的目的；本发明提供可视的 JSON 编辑器来使用户更方便的编辑数据源。

页面编辑模块提供前端页面可视化编辑功能：基于页面模版的统一规范，提供统一的渲染组件来读取配置文件生成显示页面，在 Ecoder 中，该组件允许用户通过拖拽、勾选方式筛选区块实现前端页面的布局和内容编辑，布局修改可以更新页面内区块的增删、大小长宽、位置信息，内容编辑允许用户在区块内替换或者嵌套多个自定义区块内容；除了页面本身编辑，该模块还提供 debugger、重置修改、路由管理（新增、删除页面）、页面刷新操作，方便用户调试使用，当用户修改页面完毕后点击保存，ECoder 软件就会根据所读取的当前编辑前端页面的路径，把对应操作转换成代码写进项目并更新本地服务中所对应的代码，随后自动重启本地服务及发送相关通知，实时展示页面预览。

项目管理模块提供当前用户所有本地项目和云端项目的罗列展示，并显示可用操作，对于本地项目管理提供新建项目、查看启动项、关联代码仓库、删除文件功能，对于云端项目提供模版初始化、git 面板、代码发布、启动项查看功能，本地项目和云端项目都拥有页面编辑功能入口。新建项目允许用户筛选模版在工作目录建立应用工程，并自动安装所有依赖文件；启动项包含所有 ECoder 在项目的 package.json 文件中扫描的 npmscript 项；关联代码仓库允许用户为当前应用绑定云端仓库，并通过 git 面板提供后续操作，git 面板包含分支处理、推送、抓取等git 基础命令的可视操作。

本地服务模块集成 xterm/Terminal、node-pty，用于前端模拟终端效果并可以屏蔽不同操作系统下不同指令的代码不同带来的运行差异，如斜杠、目录、全局变量等，它会按需执行任务，包括拉取模版、启动项目、文件监听、生成文件、更新目录等，并保证本地开发环境的配置及依赖无误，最终根据默认或自定义端口启动服务，执行预设模版路由，通过监听文件改变及文件改变带来的服务构建发送事件通知，与其他进程/服务通讯。

初始化模块可以让用户首次打开ECoder可以关联开发者账号，可以自动下载默认模版、自动更新依赖文件、检查版本更新、设置工程目录、设置依赖工具、设置依赖下载源、设置编辑器启动命令，同时保证用户再次打开、或者更新应用时自动检查更新默认模版、保证基础设置不改变。

自动更新模块提供云端服务器用来发布 ECoder 的新版本，ECoder 软件会自动检查服务器上的版本信息，保证在有新版本发布时提示用户更新并展示更新信息，用户可以选择下载新版本或者忽略，新版本下载完毕后，ECoder 会自动关闭静默完成所有更新，并自动以新版本打开。

该前端应用可视化开发工具，基本使用方法如下：

1）安装ECoder软件，并点击打开，显示首页，如图1所示；

2）输入开发者账号和密码后登陆，如图2所示；

3）在基础设置页面，完成依赖下载工具和依赖下载源的设置，例如：设置依赖下载工具为yam，设置依赖下载源为一个可用的依赖仓库地址，如图4所示；

4）在项目管理页面，点击“创建项目库”菜单进行创建项目库，如图3所示；选择文件目录作为本地项目仓库后，ECoder软件自启动本地服务模块执行预设模版行为，包括拉取模版、安装前端依赖、启动预设模版路由、扫描本底目录等，管理页会展示所有本地符合条件的项目和所有开发者相关的云端i应用项目，如图5所示；

5）在项目管理页面，可以选择新建本地项目，如图6所示；输入项目名和项目描述后，ECoder自动拉取模版、更新依赖，如图7所示；

6）点击新建的项目，展示项目相关操作：查看启动项、页面编辑、其它、gitLab相关、代码发布等等，选中查看启动项，页面展示该项目启动项内容，如图8所示；选中其它，页面展示该项目的其它操作功能，包括：移除该应用、更新/下载项目依赖、使用编辑器启动命令打开该应用，如图9所示；

7）查看云端项目，ECoder自动扫描云端项目并展示操作项，如图10所示；

8）选择需要编辑的云端项目，如图10中的政策中心项目，在操作项中选择页面编辑后，应用自动拉取云端项目、更新依赖、更新编辑服务，如图11所示；

9）编辑服务更新完毕后，ECoder自动在新窗口打开项目编辑页面，可自由切换路由、Debugger、增删区块、更改区块位置、替换区块内容，亦可以新建路由，并对所有路由进行增删管理，如图12所示；

10）通过页面内区块右上角十字操作图标可以对页面内区块大小、位置进行实时更新，如图13所示；

11）通过区块右上角笔记操作图标可以对页面内区块内容进行实时更新，如图14所示；

12）完成大小位置内容更新后页面布局如图15，点击页面上方保存按钮，即可把对应代码生成到对应项目位置，完成该云端项目的编辑开发工作；

13）如果新建一个空白云端或本地项目，可以选择项目模版填充，如图16所示；

14）新项目缺少功能区块，可点击区块自定义按钮，进入区块功能区，该区域显示新建区块、缓存区块、当前编辑项目内区块的基础信息，如图17所示；

15）点击新建区块进入区块编辑页，可在左侧拖拽 ui 自由组合静态区块，如图18所示；

16）区块编辑的左侧区域可对当前选中的 ui 进行属性和事件编辑，如图19所示，ui属性包括键值别名、布局、盒模型及每个 ui 设置的不同属性；

17）通过关键词可以自定义出不同的 services，如图20所示；

18）通过 JSON 编辑器可以自定义出 model state，如图21所示；

19）点击 action 编辑，进入当前区块的任务编辑区，通过拉取不同的任务框和勾线连接，组成了一条简单的任务流，并在任务流的特定步骤框内筛选了以上自定义的 services和 model state，如图22所示；

20）点击事件编辑，我们可以进入当前的区块的 ui 的 event 编辑区，如图 23所示，通过拉取不同的任务框和勾线连接，组成了一条简单的事件执行流，并在执行流的特定步骤框内筛选了以上自定义的 action；

21）完成一个区块的功能编辑后，点击保存，相应代码会保存在软件的缓存目录，可以在页面编辑区选择该区块进行填充，如图24所示，刚刚编辑的区块显示在第一列，并自动请求了一条数据在表格内展示，点击查询按钮时会自动更新表格内数据；

22）当我们对页面编辑进行保存后，项目代码更新，随后可以选择通过git操作面板对完成开发的前端项目进行后续处理，如图25，或者点击代码发布按钮进行发布代码操作。

Claims (9)

1.一种前端应用可视化开发工具，其特征在于，所述前端应用可视化开发工具包括ECoder软件和物料/模板库，所述ECoder软件具有初始化模块、项目管理编辑模块、页面编辑模块、区块编辑模块、本地服务模块、自动更新模块，所述物料/模板库为ECoder 软件提供模板和属性可编辑的ui，所述模板包括项目模版、页面模版和区块模版。

2.根据权利要求1所述的前端应用可视化开发工具，其特征在于，所述的项目模版、页面模版和区块模版全部遵循同一个项目开发规范，即拥有统一的目录结构、代码规范约定、组件输出格式、页面布局文件格式。

3. 根据权利要求1所述的前端应用可视化开发工具，其特征在于，所述的区块编辑模块提供区块可视化编辑功能：在区块编辑界面上，根据设计需求，可以将不同ui 自由拖拽组合，并对每个 ui 对外暴露的属性按需进行自定义编辑和数据绑定，从而形成静态页面，其后通过对相关 action 和 event 的可视步骤编辑，完成逻辑能力的实现，形成一个独立的前端业务功能组件，即区块。

4. 根据权利要求1所述前端应用可视化开发工具，其特征在于，所述的页面编辑模块提供前端页面可视化编辑功能：在 Ecoder 中，基于页面模版的统一规范，提供统一的渲染组件读取配置文件生成显示页面，该组件允许通过拖拽、勾选方式筛选区块实现前端页面的布局和内容编辑，布局修改可以更新页面内区块的增删、大小长宽、位置信息，内容编辑允许在区块内替换或者嵌套多个自定义区块内容；当修改页面完毕后点击保存，ECoder 软件就会根据所读取的当前编辑前端页面的路径，把对应操作转换成代码写进项目并更新本地服务中所对应的代码，随后自动重启本地服务及发送相关通知，实时展示页面预览。

5. 根据权利要求1所述前端应用可视化开发工具，其特征在于，所述项目管理模块提供当前用户所有本地项目和云端项目的罗列展示，并显示可用操作：对于本地项目管理提供新建项目、查看启动项、关联代码仓库、删除文件功能，对于云端项目提供模版初始化、git 面板、代码发布、启动项查看功能，本地项目和云端项目都拥有页面编辑功能入口，新建项目允许用户筛选模版在工作目录建立应用工程，并自动安装所有依赖文件；启动项包含所有 ECoder 在项目的 package.json 文件中扫描的 npm script 项；关联代码仓库允许用户为当前应用绑定云端仓库，并通过 git 面板提供后续操作，git 面板包含git 基础命令的可视操作，包括：分支处理、推送、抓取。

6. 根据权利要求1所述前端应用可视化开发工具，其特征在于，所述本地服务模块集成 xterm/Terminal、node-pty，用于前端模拟终端效果并可以屏蔽不同操作系统下不同指令的代码不同带来的运行差异，按需执行任务，包括拉取模版、启动项目、文件监听、生成文件、更新目录，并保证本地开发环境的配置及依赖无误，最终根据默认或自定义端口启动服务，执行预设模版路由，通过监听文件改变及文件改变带来的服务构建发送事件通知，与其他进程/服务通讯。

7.根据权利要求1所述前端应用可视化开发工具，其特征在于，所述初始化模块可以让用户首次打开应用可以关联开发者账号，可以自动下载默认模版、自动更新依赖文件、检查版本更新、设置工程目录、设置依赖工具、设置依赖下载源、设置编辑器启动命令，同时保证用户再次打开、或者更新应用时自动检查更新默认模版、保证基础设置不改变。

8. 根据权利要求1所述前端应用可视化开发工具，其特征在于，所述自动更新模块自动检查云服务器上ECoder的版本信息，保证在有新版本发布时提示用户更新并展示更新信息，用户可以选择下载新版本或者忽略，新版本下载完毕后，ECoder 会自动关闭静默完成所有更新，并自动以新版本打开。

9.权利要求1所述的前端应用可视化开发工具的使用方法,其特征在于：

1）安装ECoder软件，打开应用，使用开发者账号登录，登陆后ECoder 软件自启动本地服务模块执行预设模版行为，包括拉取模版、安装前端依赖、启动预设模版路由；

2）选择文件目录作为本地项目仓库，ECoder自动拉取账号关联项目列表或者新建项目以便管理或编辑操作；

3）选择模版对新建项目初始化，ECoder软件会在对应目录添加模版文件，并读取相关配置，显示当前项目的可操作选项；

4）选择在已有项目或新建项目下对页面进行可视化编辑操作，ECoder软件会读取相关项目代码显示编辑区域，通过编辑区的对应操作可以实时可视地对页面布局和区块填充编辑调整，包括：移动区块位置，改变区块大小、更换区块内容，ECoder软件将会把对应的编辑内容转换成代码写入进该页面所属项目中；

5）通过ECoder软件的区块可视化编辑功能可以自由配置出不同样式不同功能的前端区块或者直接在云端下载符合需要的区块，这些区块会被自动扫描到前端页面可视化编辑区以供填充编辑页面；

6）完成项目的开发后，通过ECoder项目管理功能为项目关联应用发布地址和相关仓库地址，打开 git 可视化操作面板把定制过的前端项目push到仓库，或者直接关联发布地址发布应用，完成前端应用开发。