A front-end UI component library built by individual developers in their spare time, based on Vue3 and Vite, looks pretty good, it is worth paying attention to and understanding.
About Vexip UI
Vexip UI is a freshly released front-end UI component library , based on the latest Vue3 development, mainly used for web project UI interface development. The author is qmhc, a developer from Guangzhou. He has no background in a big factory and developed this set of component libraries in his spare time.
Vexip UI provides a series of out-of-the-box components, and is written using the new Vue3.0 combined Api. The development scaffolding is the latest Vite 2.0. It was recommended by Ruan Yifeng's blog shortly after its release. It is a worthy attention Vue 3 UI component library.
Technical Features of Vexip UI
- 70+ commonly used components and functions, saving a lot of time for development
- Based on Vue3 + Vite2 + full TypeScript development
- Support tree shaking optimization, reduce package size and improve loading performance
- Provides highly customizable property values
- Completely written using combined API, with good performance and scalability
Develop hands-on experience
Vexip UI is very easy to use. The official website also has a detailed user guide, easy-to-understand language, excellent browsing experience, excellent document layout and playground-based code examples. In terms of access experience on the official website, it is not inferior to major manufacturers such as element and antDesign . Produced component library.
Vexip UI uses the management idea of monorepo, which makes it possible to start an independent development service and create a separate development file for each component. It is an attempt of a new generation of Vue component library projects, and it is quite interesting to use.
The official recommendation is to use pnpm to install, but you can also use npm or cnpm:
It should be noted that Vexip UI is completely developed using the latest Vue 3 and Vite 2, and these technical foundations are required before use.
Vexip UI itself has the ability of tree-shaking optimization (tree-shaking), we can directly import the components where we need to use them, so that only the used components will be packaged.
However, in this way, you need to introduce style files for each component separately, which is cumbersome. Since the compression ratio of styles is relatively high, considering the convenience of development, all styles can be directly introduced at the top level:
Of course, if you don't care about the package size of js at all, or use almost all components, then you can choose to import the entire component library globally:
We can also import them automatically through Vite or Webpack, which are not listed here, but you can refer to the official website for detailed configuration methods.
Vexip UI provides more than 70 components, almost all common components are available, the use of components is also very simple, and the documentation is also very convenient.
Generally, we use a lot of certain components in the application, such as Button. Generally, its size defaults to 'default', but what you need is 'large'. At this time, you will need to set a Add a size="large", and Vexip UI provides a way to directly modify a certain attribute of a component through configuration when the component is registered, which is very convenient. However, due to limited energy, there is currently no unit test in the component library, but the author said that the writing of unit tests is already in the development plan, and this should be considered for projects with high stability requirements.
At present, the author's update frequency is very high, and it can be seen that he is determined to create a new generation of high-quality front-end component library , which is worthy of attention.
Free Open Source Commercial Instructions
Vexip UI is a free and open source front-end UI component library . The author is qmhc, a developer from Guangzhou. The whole project is open source based on the MIT open source agreement . Any individual or company can download and use it for free, including commercial projects.
Original link: https://www.thosefree.com/vexip-ui