Crayon management template is a learning management template, take this opportunity to learn some of the latest front-end frameworks, and hope that some like-minded friends join us to learn and improve their skills. Why are they called crayons? Crayons can be used to add color to a painting, symbolizing a good life and career.

The Crayon management template is based on Vue3+, vex4 +, Ant Design2 and is ready to use REST apis as data communication standards and Vite as a build tool.

At present, I take advantage of my business time to learn and promote the iteration of the project. In terms of interaction, I design according to my own experience to achieve a clear and concise management template for interaction.

Crayon management template

Project address: github.com/QuintionTan…

The project is still in the initial stage, so some functions are not perfect enough. We have completed the login function and basically completed the theme page framework (menu and breadcrumbs). In order to get closer to the actual practice, the data in the later project will be interacted in the form of REST Api interface.

Interface Project Address: github.com/QuintionTan…

Introduction to Technology Stack

Now I will briefly introduce the technology stack used in the whole management template. Since it is a business learning practice, the project may progress slowly. Here I set a goal to make a small step forward every week. In the later stage, I will study the technology used in the project in detail and output study notes to deepen my understanding of the technology.

vue3

Vue3 is an upgrade of VUe2, and it is a clipboard update. Using VUe3 requires jumping out of the familiar vue2 ecology, which means that many concepts need to be re-understood. Personally, I think this is the feature that front-end programmers should have, and they should always accept the new framework.

Let’s see what Vue3 has done to improve performance:

  • Optimization of source volume
  • Upgrade of responsive systems
  • Code compilation optimization

What is the vite

Vite is a web development tool developed by VUE author Yu Yuxi. It has the following features:

  • Quick cold start
  • Instant module hot update
  • True on-demand compilation

Ant Design of Vue

Ant – Design-Vue is the VUE implementation of Ant Design. The style of the component keeps in sync with Ant Design

The HTML structure is consistent with the CSS style, true to style 0, and the component API is as consistent as possible.

Completed interface