This software is a powerful WYSIWYG front-end page designer, which is the basic construction in the field of low code development. The generated code does not depend on any framework. The actual measurement can reduce the time consumption of front-end layout work by more than 80%. The most important thing is that it realizes the dream that everyone can write front-end pages.
Designers and front-end developers can easily design front-end code without writing a line of code. It is no longer a dream to 100% restore the design draft. It is very friendly to uniapp development and can generate components and pages quickly.
This software can generate HTML5 code, generate mobile phone Vue code by 2x, generate computer Vue code by 1X, or directly generate JSON string for secondary processing by other development tools (including self-developed).
This software is open source with Apache 2.0 licence and can be used for free in business. If you have any questions, please feedback. Let's build this open source project together. Outstanding code contributors will write their names in readme.md, welcome to contribute.
Developed with vue2.0, ready to use. The generated code adopts flex layout and streaming layout with adaptability. Sometimes in your project, it can also support absolute positioning layout and fixed layout.
For uniapp mobile developers, rpx unit can be directly generated instead of px.
For pictures, it's recommended to build a picture cloud server. If you need picture embed in your design file, you can search the Internet for "picture to Base64 code", and paste the code as the picture address (the generated file will be large).
#### 安装教程 How to Install
#### 安装教程
1. npm install
2. npm run serve
3. 用浏览器打开(Open this url in Chrome) http://localhost:9000/frontendBlocks/
3. 用浏览器打开 http://localhost:9000/frontendBlocks/
#### 独立部署教程
#### 独立部署教程 How to Deploy
1. npm run build
2. 把dist目录中的文件拷贝到服务器上，部署目录为frontendBlocks即可(copy files in 'dist' directory to your sever, deploy in apache/nginx and folder called 'frontendBlocks')
#### 使用说明 How to Use
#### 使用说明
1. 左侧图层面板可以点击“添加”按钮添加子元素
2. 设计时高度和设计时内距用来方便观察父子元素之间的关系，
...
...
@@ -52,45 +114,19 @@ For pictures, it's recommended to build a picture cloud server. If you need pict
7. 当前的设计会被自动保存，待下次打开时可继续上次的设计稿继续设计，非常的人性化
8. 点击块上的小加号，可以很方便的追加新的块
1. On the left layer panel, click "add" to add sub element in target
2. The design-time height and the design-time internal distance are used to facilitate the observation of the relationship between parent and child elements,
3. The "InsertInto" tab of the left panel is derived from 'public/tools.json', where the filled blocks node is from the "generate reusable JSON string" under the "code generation" menu
4. The middle panel can adjust the adaptive width. If the mobile phone is designed, it is recommended to use 375px
5. On the right panel, when a block is selected, its attributes can be adjusted. In the advanced panel, the type of element can be set, and supported generate as 'input'
6. Your frontend design can be created, saved and read, and can be copied and pasted across tabs (very useful for reusing design drafts)
7. The current design will be automatically saved. When you open in browser at next time, you can continue the design of the previous design draft. It is user-friendly.
8. Click the small plus button on the block to easily add a new block
(English version needs someone to contribute i18n module or function)
Unlike traditional design software, this software produces real code in memory, so adding undo will increase the pressure on front-end runtime.
2. What can I do with the layout?
It is recommended that users first understand the Flex layout. If you don't have a Flex layout knowledge, you can start with these steps: Set the "child element arrangement" of the parent container - > Set the width and height of the child element - > If the width and height of the child element are a percentage, you need to set the width and height of the parent container - > Set some visual effects for the child element, such as background color, text content, and so on.
3. The elements are so tightly arranged that cannot click accurately?
You can increase the Design-Time Height and Design-Time Interval a little so that you can see the elements, which do not affect the output. It is also strongly recommended that elements be selected in the Layers panel on the left for more precision
4. Why did I set the width or height but not actually display it at the value I set? And why are all the elements crowded together when I add more?
This is because elements under the Flex layout have an elastic effect. To keep one element fixed width or height and the other element adaptive, check Layout -> Elasticity -> Tempering on elements with fixed width and height. To achieve a scrollable list area, check the parent element Layout -> Elasticity -> Turn Elasticity off
5. What if there are too many sub-elements in some elements that cause scrollbars on the page or affect the layout of other elements?
You can try setting Advanced-> Subelement Overflow Settings-> Scrollbar, which triggers the BFC mechanism to become a stand-alone rendering area as long as it is not Set-Up, so that no overflow or impact on the layout of other elements will occur.
6. What can I do when my design crash prevents FrontendBlocks from opening?
Despite my best efforts to avoid software crashes, the reality is that the software is operating in a complex environment with unexpected BUGs. You can press F12 to delete tempSave and refresh the interface in Application->Storage->Local Storage. If not, you can copy the values in tempSave to raise a question and the community will resolve the BUG as soon as possible.
1. The extension of the "insert inside" function is completed in public/tools.json. Please refer to Article 4 for manual writing.
2. To add new properties, you can modify src/components/layout/PropertiesPanel.vue file, the defaultform in the data is the default value. It will be used to initialize each update. The currently edited element style will exist in the propform object. The fromblock method will parse the style of the selected element and echo it to the interface. The toblock method will assign the filled attributes to the selected element to make it effective. (if you need to integrate with the business system, you can add something here, such as interface address, data source, etc.)
3. The function of generating code is placed in src/components/layout/ToolsBar.vue, you want to generate other languages (such as Android XML, react, and even WinForm, which can be implemented according to logic)
4. In the object corresponding to each element, properties represents the additional attribute, ID represents the globally unique code, style represents the style of the element, blocks represents the collection of sub elements of the element, domtype is the type of the element (default is div, even if expressed as view, it is also written as DIV), and text refers to the text inside the element
5. The context is in src/components/layout/WorkSpace.vue, it is congested and can be extended. Its reference can be found almost anywhere in the whole project. The createnewblock defines the initial attribute of creating a new element.
6. In general, the implementation logic is: template creation - > user-defined attributes - > context chain update - > block.vue preview expression - > toolbar.vue generate code - > codepreview.vue preview and download code
#### 快捷键 Shortcut Keys
1. Ctrl+C 复制选中的块 Copy selected block
2. Ctrl+V 在所选中块的内部进行追加粘贴 Paste copied block in selected block
3. Delete 删除选中的块 Delete selected block
4. Ctrl+Z 撤销 Undo
#### 参与贡献 Contributors
#### 参与贡献
1. 黑龙江省瑜美科技发展有限公司 杨若瑜 2020年 创建 1.0
Heilongjiang Yumeisoft Co., Ltd Ruoyu Yang in 2020 ver 1.0
