An excellent domestic mobile UI component library, based on Vue3, has also been recommended by You Yuxi and is worthy of attention.
About Varlet
Varlet is a Material-style mobile component library developed based on Vue3 . Since the 1.0 version was officially released on April 21, 2020, it has been continuously maintained for nearly a year.
The author of Varlet is a front-end developer who graduated from college and worked in Wuxi from Sichuan. Because his company planned to develop a component library related to Vue3 , he volunteered to take over the job. Later, the company did not plan to continue to provide support due to reasons such as cost and return on investment. The author and two friends continued to improve it. So far, there have been more than ten small partners who have maintained their interests and pursuits together. Love can last a long time, which may be the charm of open source.
Later, Varlet was not only recommended by Mr. Ruan Yifeng, but also recognized by the open source technology community at home and abroad. Among them, the god Antfu of the Vite core team also accepted the PR of this component library. At Vue3's 2021 annual summary and sharing meeting, Varlet was also recommended by You Yuxi, the author of Vue.js , and is a front-end open source project worth paying attention to.
Varlet Technical Features
- Provides 50 high-quality, lightweight general-purpose components
- Developed by Chinese and provides complete Chinese/English documentation
- Support on-demand introduction and theme customization, support dark mode
- Support internationalization
- Support webstorm, component attribute highlighting of vscode editor
- Support for SSR server-side rendering
- Typescript support
- Ensure more than 90% unit test coverage
Material Design style mobile component library
Varlet is a mobile UI component library suitable for developing mobile web applications or developing Android or iOS applications through Vue Native.
In terms of design appearance, the Varlet component library is designed based on Google's Material Design design specification. When it comes to Material Design, most UI component libraries are foreign. Whether it is documentation or the community, it is a headache for some developers. Varlet development The team made a localized Material Design style component library with reference to the finished products of foreign technical communities and the API construction that domestic developers are interested in.
There are many excellent UI component libraries such as Vant and uView UI on the mobile side, and there are relatively few mobile-side component libraries in the Material Design style. If you want to have a distinctive product style, care about the details of interactive effects, or you want to put on the Google Store application , Varlet are worth choosing.
Develop hands-on experience and feelings
The official documents of Varlet are written by developers whose native language is Chinese, which is unmatched by foreign component libraries. The code examples are rich, clear and easy to understand, and the development experience is good.
Installing Varlet is very simple. Introducing the varlet.js file through CDN contains all the styles and logic of the component library:
Of course, Webpack / Vite engineering is also supported:
The official website also provides online code editing tools, which is convenient for us to quickly experience Varlet.
Varlet has dozens of commonly used mobile components, such as skeleton screen, navigation bar, index bar and other complex and difficult to write components, and the experience is very good. At the same time, it supports the introduction of components on demand, which can greatly reduce the packaging size, which is very important for mobile projects.
Varlet also has many good features, such as support for Vue2 , you can visit the official website for details.
Free Open Source Instructions
Varlet is a free and open source mobile UI component library. The source code is hosted on Github based on the MIT open source agreement . Any individual or company can download and use it for free, including commercial projects.
The icon library referenced by Varlet is the Material Design Icon of the same style .
Original link: https://www.thosefree.com/varlet-ui