A front-end Component Management Platform developed based on the Vue family bucket and a vue family bucket Management Platform

A front-end Component Management Platform developed based on the Vue family bucket and a vue family bucket Management Platform

Project Background

The background of the project is that in an outsourcing website construction company, a large number of reusable components are precipitated in the design process. Designers usually just need to fine-tune the components to piece together the pages and deliver them to the front-end, theoretically, these components can also be reused at the front end, but the front end needs to re-implement the entire page every time, which wastes a lot of manpower.

Functional requirements

The idea of this project is to develop and manage all components on a single platform. Designers can select components on the platform and preview and adjust the components in real time, what you see is what you get in the whole process. The platform will generate a series of codes based on the adjustment results. As long as the code is handed over to the front-end, you can use the code to reproduce the modified component on the platform, you can also copy the html, css, and js Code of the component with one click to quickly apply the Code to the project, so that the front-end development cost of the component is close to zero. The platform must implement the following functions:

* The management component supports classification, search, and sorting.

* Displays components and supports online preview/editing of components.

* Component handover: allows you to generate component code and reproduce components based on code.

* Statistics are used to collect statistics on the usage of components for further component optimization.

Technology Stack

Vue + Vue-router + Vuex

Project Preview

Front-end Component Management Platform

Source code

Github