Maintenance of the classic layui has not stopped, and a Vue 3 version has been released. It is still easy to use, so I would like to share it with everyone.
Layui Vue
Before introducing Layui Vue, it is necessary to introduce Layui first. Layui is a set of classic open source Web UI component libraries . The author is the famous front-end god Xianxin. Layui adopts lightweight modular specifications and follows the original HTML/CSS/JavaScript development model, making it easy to get started and ready to use. Before front-end development frameworks such as Vue /React became popular, Layui was once the most popular front-end component library among front-end developers. In the early years, it was widely used in various web communities, websites and back-end management systems.
With the emergence of new and more efficient front-end frameworks, Layui was gradually replaced, and later the Layui official website was offline at the end of 2021, which was very sad. Note that only the official website is offline, Layui is still under maintenance. Since Layui is a UI framework, it can be used with Vue , so developers who love layui combined them to create a component library based on Vue 3 . What I want to recommend to you today is Layui Vue, the front-end UI framework that inherits Layui.
Layui Vue is a set of Vue 3.0 desktop component library, which follows the classic design specifications of layui and can be used out of the box. Layui Vue will release version 1.0 in 2022 and version 2.0 based on Vue 3 in 2023. It is a UI component library that is simple to use, stable and reliable, and has a classic design.
Technical features of Layui Vue
- Classic design: CSS based on Layui, retaining beautiful and elegant component styles
- Lightweight and simple, taking up little space
- Provide theme configuration variables to support dark mode that layui does not have
- Provide VS code plug-in for elegant development
- Support Vue3 setup syntax development mode
- Support i18n internationalization
- The official ecosystem includes the same out-of-the-box admin management backend Pear Admin Next
Getting Started and Advice
I was also a loyal user of the layui framework many years ago. I used it to develop many projects in the early years. To learn layui, you only need to be familiar with basic css+html and javascript to use it. Even a novice can get started with development through popular documents. , I miss the days of coding very much. The component design of layui was very trendy and elegant at the time, and it is still not outdated even now. Especially the classic layer pop-up layer component is a classic among classics.
Use the npm tool to install layui vue. If the installation is slow, you can try pnpm or other mirror sources.
Register globally to Vue
Layui Vue supports automatic on-demand import and manual on-demand import, which can greatly reduce the packaging volume. When only a small number of components are referenced, they can be introduced manually on demand. The configuration is as follows:
If you use a lot of components, it is recommended to install plug-ins to automatically introduce them on demand, eliminating the trouble of manual configuration.
The most classic thing about layui is to directly introduce js and css files into html. Layui Vue also supports:
Pear Admin Next
Layui Vue is a desktop UI component library, which is very suitable for developing admin management backend. The official has helped us make the best practice, which is Pear Admin Next. This is the upgrade of Pear Admin that I recommended on the website before . Version, characterized by many page templates, simple and easy to use:
- A universal front-end template implemented based on Layui Vue. Integrate the latest technology for efficient and rapid development, front-end and back-end separation mode, and can be used out of the box;
- The core module includes: login, workspace, form page, list page, result page, exception page and other functions;
- Small amount of code, easy to learn, powerful, lightweight, easy to expand, easy and efficient development.
Free open source instructions
Layui Vue is a free and open source Vue 3 component library. It adopts the MIT open source license. We can download and use it for free, and it can also be used for commercial purposes. In general, this is a new generation UI component library created by many developers who love layui for inheritance. It is maintained and updated frequently, and version 2.0 is stable enough to understand and use.
Finally, thanks to the many development contributors of Layui Vue!
Original link: https://www.thosefree.com/layui-vue