The paper
This is a Vue3 UI that you can install NPM install SUNi-UI.
What are the characteristics of that? It’s simple, good-looking, and easy to develop yourself.
Reference documents are mounted on the code cloud Gitee Pages and Github Pages
The source code is also available in the cloud: gitee.com/YYsuni/suni and Github: github.com/YYsuni/suni
The reason
Try to write your own url, need to use a good UI component, save development time. So after a long search, I settled on Vuesax 4.0, which is a great UI and pleasing to the eye. The first bug, however, is that the < VS-tooltip > component does not disappear when a single file page changes. Check Github. The author has been silent for a long time.
At first, I tried to change the source code, but the UI tool kit was still a bit strange and failed to fix it.
So I thought of porting my own UI as my own toolkit.
process
The first step
The source code for Vuesax is vuesax-next, not a common component file, but a vue-property-decorator that is more like writing a rendering function plus a decorator. But you can tell what it says without looking too closely. So, the first step is to open a new project, and then directly transplant components to a single file component, Vite build test site project directly to use, display.
In the first step, much of the template structure remains intact, and the style file’s less is translated into SCSS, etc., with minor changes. Mainly for porting to Vue3 single file components.
The second step
All components would be packaged, so a direct reference to a local project would definitely not work, so I tried webPack packaging, but was frustrated. So I chose Rollup, and finally I had to develop while packaging.
The third step
Optimize and thoroughly parse the project into the result I want. Clean and reconstruct the structure, style and logic of the document. Keep referring to Element-Plus to be professional.
The fourth step
A decent reference site. I didn’t want to do so much at first, but in the course of a little exploration, I found the feasibility, so I spent a few more weeks perfecting, to mount the static site.
tips
The time span for migration and development is very long, several months. In the past few months, with the increasing complexity of my work, I have changed my mind a lot. I have changed my mind in the process and become more calm. More to later, found that many problems are not so dare not touch before, become familiar with the road.
What it means to everybody
Writing an article is to provide a new insight for everyone and provide more help for newcomers. There is a different logic running in everyone’s head. There is no right way to say it. Every article gives the person on the road an opportunity to understand.
The SUNI project has an MD folder with a lot of notes in it, process. I hope I can give you some help on the way forward.