5 Star 27 Fork 3

yumeisoft / frontend-blocks

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

FrontendBlocks

一软在手,前端无忧!超强FLEX布局工具!

简介

本软件是一款强大的所见即所得前端页面设计器,是低代码开发领域的基础建设,生成的代码不依赖于任何框架,实测可以将前端布局工作的耗时减少80%以上,最关键的是,它实现了人人都可以写前端页面的梦想。
不用写一行代码即可让设计师、前端开发人员轻松设计出前端代码的利器,100%还原设计稿不再是梦。对于Uniapp开发非常友好,可以快速生成组件和页面。
本软件可以生成HTML5代码、按2x生成手机端VUE代码、按1x生成电脑端VUE代码,也可以直接生成JSON串,供其他开发工具(包括自主研发的)进行二次加工。
本软件采用Apache 2.0协议开源,可以免费商用。如有任何问题欢迎反馈,让我们共同建设好该开源项目。突出代码贡献者将会把名字写入README.md中,欢迎贡献。

最近更新日志

写在前面:因为这个项目纯为爱发电,本人没有从本项目获得任何收入,所以只能靠各位大佬的996来撑起这个项目,帮忙测测也是爱。有需要付费定制集成需求的朋友也可以联系我。

2024年03月31日(3.9版本):

  1. 智能父子连字符关联:支持CSS名称连字符的父子关系关联,生成产物的命名更加省心 我们可以用连字符命名各个块,并且支持在块中嵌套块,这样我们就可以很方便的实现复杂的页面布局。 比如icon-btn,下面分别有icon-btn-image和icon-btn-text两个子元素, 那么在生成的时候会自动生成下面的这种代码:
<div class="icon-btn" onclick="iconBtnClick()">
    <img class="image"/>
    <div class="text">图标文字</div>
</div>
<style>
    .icon-btn{
        box-sizing:border-box;
        border-bottom:1px solid rgba(229, 229, 229, 1);
        border-right:1px solid rgba(229, 229, 229, 1);
        text-align:left;
        display:flex;
        position:relative;
        height:92px;
        width:33%;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    .icon-btn{
        user-select: none;
    }
    .icon-btn:hover{
        opacity: 0.8;
    }
    .icon-btn:active{
        opacity: 0.5;
    }
    .icon-btn>.image{
        background-image:url(https://www.yumeisoft.com/demo-icon.jpg);
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        text-align:left;
        width:32px;
        height:32px;
    }
    .icon-btn>.text{
        font-size:14px;
        color:rgba(102, 102, 102, 1);
        text-align:left;
        display:flex;
        position:relative;
        width:100%;
        flex-direction:column;
        align-items:center;
    }
</style>
  1. 智能CSS精简:精简了生成的CSS代码,原来数千行的代码现如今只需几十行。对于结构相同并且所有子元素样式一模一样的,不会再生成新的block样式,而是直接复用之前的样式。
  2. 对于名称为-btn、-button结尾的元素自动加上点击效果,并且自动添加点击事件,写业务代码更方便,生成完几乎直接就可以开写!
  3. 增加了7个常用模板,可以更快速的构建布局。
  4. 极速设置面板里增加了一键“设置随机占位图”按钮,立即就能给当前块加背景,快速获得图文并茂的效果。
  5. 重写了导出vue和html的代码,现在导出规则已经和ToolsBar解耦,你可以更方便的写你想要的任何导出规则。
  6. 导出界面增加了一键复制功能,粘贴到代码里就能用!更贴心。

历史更新日志:

2023年02月19日(3.7版本):增加了大家非常急需的Ctrl+Z撤销功能,调整了一下模板,给一个后台模板和表单模板

软件美照

alt alt alt alt

在线演示地址: Online presentation address: http://39.104.17.92/frontendBlocks/

软件架构

使用VUE2.0开发,开箱即用。所生成的代码采用Flex布局和流式布局,具备良好的自适应性,特殊需求下也可以支持绝对定位布局、固钉布局。
对于Uniapp移动端开发者而言,可以直接生成rpx单位的样式。
对于图片,建议自建图床进行维护,如果有图片素材希望随着设计稿而维护,可以上网搜索“图片转BASE64编码”,把编码当做图片地址粘过去也是一样的(生成的文件会较大)。

安装教程

  1. npm install
  2. npm run serve
  3. 用浏览器打开 http://localhost:9000/frontendBlocks/

独立部署教程

  1. npm run build
  2. 把dist目录中的文件拷贝到服务器上,部署目录为frontendBlocks即可(copy files in 'dist' directory to your sever, deploy in apache/nginx and folder called 'frontendBlocks')

使用说明

  1. 左侧图层面板可以点击“添加”按钮添加子元素
  2. 设计时高度和设计时内距用来方便观察父子元素之间的关系,
  3. 左侧面板的“在内部插入”功能是来源于public下的tools.json,其中填写的blocks节点源于“代码生成”菜单下的“生成可二次加工的JSON串”
  4. 中间面板可以调整自适应宽度,如果是设计手机端,建议使用375px
  5. 右侧面板当点选某个块时可以调整其属性,高级面板里可以设置元素类型的表达,支持表达成input
  6. 文件可以新建、保存、读取,可以跨页签复制粘贴(复用设计稿的利器)
  7. 当前的设计会被自动保存,待下次打开时可继续上次的设计稿继续设计,非常的人性化
  8. 点击块上的小加号,可以很方便的追加新的块

疑难解答

  1. 布局用不明白怎么办?
    建议使用者先了解一下Flex布局。如果没有Flex布局基础可以先从这几步开始:设置父容器的“子元素排列”->设置子元素的宽度和高度->如果子元素的宽度和高度是百分比,则需要设置父容器的宽度和高度->给子元素设置一些可视化的效果,比如背景颜色、文本内容等等
  2. 元素排列太紧密了,点不上怎么办?
    可以把“设计时高度”和“设计时内距”拉大一点点,这样就能看到元素了,这两个设置不会影响输出效果。而且强烈建议在左侧“图层”面板中进行元素的点选,这样会更加精确
  3. 为什么我设置了宽度或高度但实际上不是按我设置的值显示?而且为什么当我添加元素多起来的时候,所有元素都挤在一起了?
    这是因为Flex布局下元素呈弹性效果,如果要保持一个元素固定宽度或高度,另一个元素自适应,请在固定宽高的元素上勾选“布局”->“弹性”->“钢化”。如果要实现一个可滚动的列表区,请将父元素勾选“布局”->“弹性”->“关闭弹性”
  4. 有的元素里面子元素过多,导致页面出现滚动条或者影响了其他元素的布局怎么办?
    可以尝试设置“高级”->“子元素溢出设置”->“滚动条”,只要不是“未设置”,都会触发BFC机制,成为独立渲染区域,这样就不会出现溢出或影响其他元素布局的情况了。
  5. 我的设计稿崩溃导致FrontendBlocks打不开,怎么办?
    尽管我极力避免软件出现崩溃,但事实上软件操作环境复杂,可能出现无法预料的BUG。可以按下F12,在应用(Application)->存储(Storage)->本地存储空间(Local Storage)中,把tempSave删掉,重新刷新界面即可。如果不涉密的话,可以将tempSave中的值复制出来提一个Issue,社区会尽快解决这个BUG。

二次开发说明

  1. “在内部插入”功能的扩展是在public/tools.json中完成,手动编写可以参照第4条。
  2. 想要增加新的属性,可以修改src/components/layout/PropertiesPanel.vue文件,data里的defaultForm是默认值,每一次更新都会用它来初始化,当前编辑的元素样式都会存在在propForm对象里。fromBlock方法会将选中元素的样式进行解析,回显到界面上。而toBlock方法则会将填写好的属性赋予给选中元素,使之生效。(如果你需要和业务系统相结合,可以在这里加点东西,比如接口地址、数据来源之类的)
  3. 生成代码的功能都放在了src/components/layout/ToolsBar.vue里,想生成其他语言的(比如Android的XML、React、甚至Winform,可以根据逻辑自行实现)
  4. 每一个元素所对应的Object里,properties代表了附加属性,id代表全局唯一编码,style代表该元素的样式,blocks代表该元素的子元素集合,domType是元素的类型(默认是div,即使表达成view也是写成div),text是指元素内部的文字
  5. 上下文在src/components/layout/WorkSpace.vue里,它是充血的,可以扩展方法,而且几乎在整个项目的任何地方都能找到它的引用,其中的createNewBlock定义了创建一个新元素的初始属性。
  6. 总的来说,实现逻辑就是:模板创建->用户自定义属性->上下文连锁更新->Block.vue预览表达->ToolsBar.vue生成代码->CodePreview.vue预览并下载代码

快捷键

  1. Ctrl+C 复制选中的块
  2. Ctrl+V 在所选中块的内部进行追加粘贴
  3. Delete 删除选中的块
  4. Ctrl+Z 撤销

参与贡献

  1. 黑龙江省瑜美科技发展有限公司 杨若瑜 2020年 创建 1.0

其他

  1. 我的博客:yangruoyu.blog.csdn.net
Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

一款强大的所见即所得前端页面设计器,不用写一行代码即可让设计师轻松设计出前端代码的利器,百分百还原设计稿不再是梦。 展开 收起
JavaScript 等 4 种语言
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/yumeisoft/frontend-blocks.git
git@gitee.com:yumeisoft/frontend-blocks.git
yumeisoft
frontend-blocks
frontend-blocks
master

搜索帮助