vue-design

Develop the best page visualization builder with Vue and Electron

Your star is the greatest encouragement to me.

function

  • A desktop application built using ELECTRON
  • Introduce the UI component library through simple configuration
  • Design pages with draggable, editable components
  • Editable page CSS
  • Save as a. Vue file
  • Save/import a project

✨ download

  • Windows: Baidu web disk
  • Mac:

review

The original intention of this project is twofold:

  • Is to reduce the development cost of background applications
  • Through the axure function, let the designer design draft to generate preliminary. Vue file code, get through the barrier between the designer and the front end

On the first point, I believe that many large companies have a lot of practice. For example, Ali open source ICE tool is code block reuse ideas, very worthy of reference.

On the second point, there are many open source projects, but they are all Web-based. In my opinion, visual builds require strong interaction with files, so I chose Vue and Electron to develop a desktop application.

At present, this project is still embryonic form, but has the basic function, in the code implementation in the current vUE several projects is the most concise (this is also much previous experience). I will follow up this project for a long time, please pay attention to it if you are interested 🙂

RoadMap

  • More built-in layouts, blocks and components (2018/03-2018/04)
  • Detect.vue file changes and automatically synchronize them to the project (2018/04)
  • Materials Market (2018/04)
  • Custom Plug-ins and The Plug-in Market (2018/05)

The last

I will apply for a job in April, guangzhou area, if there is a good pit, for introduction 🙂

Making: L – Chris

If you are interested in building visualizations for vue/ React, you can refer to the following open source projects:

Vue

  • Vue-design: project address, find star:
  • Vuep: Edit and preview component code in real time
  • Vue-layout: drag, modify, preview code and other basic functions, the idea is easier to understand, you can understand when the entry
  • Esview: In addition to the basic functions, combined with the backend for component upload/download function, relatively high code quality

React

  • Ice: An official project of Ali, mainly based on the idea of material reuse
  • Gaea-editor: the author has more in-depth research on the implementation of the editor, you can go to see