Vant is a mobile Vue component library maintained by the front end team, providing a complete set of UI base components and business components. Vant can quickly build a unified style of the page, improve the development efficiency.

Vant

1. About 1.0

It’s been half a year since Vant was first released. In the past six months, the Vant team has absorbed feedback and suggestions from the community, continuously refined and optimized components, and gradually developed Vant into a lightweight and reliable library of Vue components for mobile devices.

At this point in time, we decided to release Vant 1.0 and hope that more people can participate in the development and use of Vant in the future.

GitHub address: github.com/youzan/vant

2. Existing components

Iii. Development concept

lightweight

As a mobile component library, Vant has always had lightness as a core development concept. In order to balance the contradiction between increasingly rich functions and lightweight, we have tried many optimization methods, including supporting component loading on demand, reuse of common modules, component compilation process optimization, etc.

After applying a number of optimizations, the current Vant component average size is only 8.8KB, compared to about 1KB after Uglify + Gzip. For comparison, mint-ui’s component size averages 15.2KB, with some component libraries averaging more than 25KB.

The main reason that Vant keeps its component size so small is due to the unique way we compile components. At present, the mainstream component compilation method is to compile each component through Webpack and vue-Loader, and generate a packaged JS file for each component. This creates a lot of redundant code, such as the modularization code built into WebPack, the normalize function built into vue-Loader, the repeated Babel Helper, and so on, that we don’t want to include in the compilation of the component.

At first we tried to solve this problem by using rollup and rollup-plugin-vue, but we soon found a more straightforward way to compile components using the official vue-template-compiler and Babel. This way is simple and pure, the compiled code is very clean, the details will not be repeated here, interested students can take a look at the Vant build part of the source.

Rapid iteration

Another important concept is rapid iteration. There are dozens of engineers on the front-end team who use the version you see on GitHub every day. We don’t have an “in-house version”. At the same time, out of the value of our own reputation, we do not simply open source it, but to maintain it as a technical product, not only for our own use, but also for others to use, so we will maintain a quick response to the needs of the community, timely follow up and fix bugs.

So far, the total number of project commits has exceeded 1600 times, 300 issues have been solved, 400 Pull requests have been merged, and 90 releases have been made, basically maintaining the release rhythm of once or twice a week. This includes the efforts of many community developers, and we thank them for their contributions to Vant. We will continue this pace of development in the future to deliver better open source products to the community.

ecological

In addition to providing components, we are also making a lot of attempts to enrich the Vant development ecosystem, hoping to cover the development needs of various scenarios and provide convenience for everyone. Here are some of our existing ecologies or capabilities:

  • Vue-cli-based scaffoldingvue-cli-template-vant
  • supportnuxtServer-side rendering
  • supportTypescriptType test
  • supporti18nMulti-language customization
  • Supported bypostcssPlug-ins for theme customization
  • Official Demo repository – Vant – Demo
  • Zanui – Appellate P – Appellate P – Appellate P – Appellate P
  • Mobile mall example project for open source community – Vant – Mobile – Mall

We still have a lot of work to do in terms of ecology, such as providing rem support, vscode hints, etc., which will be the direction of our 18 years of attempts.

Four, the last

The progress of the open source project cannot be achieved without the contribution of the community. I would like to thank all the people who put forward PR and opinions on Vant in the past, especially @Chuangbo, @Qianzhaoyan, @GeoffZhu and other students in the community for their efforts. I hope more students will join in the development of Vant in the future. If you are interested in a good front end team, please join us and play ~ resume mail: [email protected] ^_^

This article was originally posted on The Uptech blog.