1. Project Overview

FrontendBlocks

One Tool in Hand, Front-End Development Made Easy! A Powerful FLEX Layout Tool!

A powerful WYSIWYG front-end page designer that allows designers to easily create front-end code without writing a single line of code. Accurately reproducing design mockups is no longer a dream.

This software is open source under the Apache 2.0 license and can be used commercially for free. If you have any questions or feedback, you are welcome to contribute so that we can build this open-source project together. Outstanding code contributors will have their names added to README.md. Contributions are welcome.

2. Open Source License

Licensed under Apache-2.0

3. Screenshots

Software Screenshots

   

4. Feature Overview

This software is a powerful WYSIWYG front-end page designer and a fundamental tool for low-code development. The generated code does not depend on any framework. Actual tests show that it can reduce front-end layout development time by more than 80%. Most importantly, it makes the dream of allowing anyone to create front-end pages a reality.
A powerful tool that allows designers and front-end developers to easily create front-end code without writing a single line of code. Reproducing design mockups with 100% accuracy is no longer a dream. It is particularly well suited for Uniapp development and can quickly generate components and pages.
This software can generate HTML5 code, mobile VUE code at 2x scale, desktop VUE code at 1x scale, and JSON strings for further processing by other development tools, including custom-developed tools.

Quick start

Download the ZIP package from the Releases section on the right side of this project, then run it locally using VSCode's Live Server.
The release package includes several simple design mockup examples for quick testing and verification.
For production deployment, it can run under any Nginx, IIS, or Apache server.

Recent Changelog

July 31, 2024 (Version 4.0):

1. Major upgrade: Introduces a uvue code generation tool for Uniapp-X, fully embracing the Android, iOS, and HarmonyOS ecosystems.

5. Tech Stack

Software Architecture

Developed using VUE2.0 and ready to use out of the box. The generated code uses Flex and fluid layouts, providing excellent responsiveness. Absolute positioning and fixed positioning layouts are also supported for special requirements.
For Uniapp mobile developers, styles using the rpx unit can be generated directly.
For images, we recommend maintaining your own image hosting service. If you want image assets to be maintained alongside your design mockups, you can search online for "Image to BASE64 Encoding" and paste the encoded string as the image address. (This will result in larger generated files.)

Installation Guide

1. npm install

2. npm run serve

3. Open [http://localhost:9000/frontendBlocks/](http://localhost:9000/frontendBlocks/) in your browser.

Standalone Deployment Tutorial

1. npm run build

2. Copy the files in the dist directory to your server. Use frontendBlocks as the deployment directory. (Copy files in the 'dist' directory to your server, deploy in Apache/Nginx, and use a folder called 'frontendBlocks'.)

Usage instructions

Detailed content please refer to README.md document