Vant (\ˈvænt\) is a Vue component library implemented by the front end team based on the unified specification of Uzan, which provides a set of BASIC UI components and business components. With Vant, you can quickly build a unified style of the page, improve the efficiency of development. Currently there are nearly 50 components, which are widely used in various mobile applications with great popularity. We will continue to improve on this basis and develop more practical components.

Our goal is to develop beautiful, easy-to-use mobile sites based on Vue faster and easier. If you need to develop a mobile mall, Vant is a great option.

A, features,

  • Components are from the praised micro mall business, and after the test of the praised business, more reliable
  • Complete and detailed Chinese documents
  • A dedicated team of designers maintain visual standards, unity and elegance
  • Support the Babel – plugin – import
  • Single test coverage is over 90%

Recommended with WebPack, Babel uses Vant to take advantage of the rich plug-ins and personalization provided by WebPack. Vant supports babel-plugin-import, which optimizes code volume and improves front-end performance by using Vant through the Babel plug-in.

Vant provides detailed documentation, with detailed descriptions and code examples for each component’s various function points. If you want to use the functionality, just copy the code on the document.

Of course, this only makes Vant a good Vue UI component. So what’s Vant’s advantage over other Vue UI component libraries?

Second, rich and practical business components

Vant doesn’t just provide basic UI components. To make it easier for developers to quickly build mobile stores, Vant adds many business components that are commonly used in mobile stores. Similar to SKU selection, coupon selection, city and county selection.

Vant will continue to enrich the business components. As can be seen from the incomplete planning diagram below, we will sort out the components suitable for different business scenarios and gradually perfect them into a large e-commerce mall component system. Most of the components listed are already being sorted out and will be added to Vant in the near future.

1. SKU selects components

On the product page, it is a common business scenario to select product specifications for purchase. Products can have multiple levels and types of SKUs. Considering the common functions such as purchase limit, inventory display, purchase message, skUS corresponding display pictures and so on, the whole product specification selection process will become very complicated. The Sku component provided by Vant satisfies all of these requirements by specifying that data comes in.

In a common purchase process, quantity selection only supports adding or subtracting to change the purchase quantity. However, in the case of mass purchase, it is more convenient for users to manually enter the purchase quantity. We support users to directly enter the purchase quantity of Sku components. At the same time, when the user enters, it will automatically judge whether the purchase can be made according to the limited purchase quantity and adjust the purchase quantity.

For product message, Sku component provides various forms of product message support, including ID card, text, phone, date, time, email. Display and verify mandatory product messages.

2. Select Area provinces and counties

Vant provides the common function of selecting provinces and counties. After passing in the list of provinces and counties in a specified data format, you can display it. Area supports less than three columns. The columnsNum parameter specifies the number of columns to be displayed in Area. In special scenarios, only the province or province needs to be selected.

The Area provides events such as Cancel and confirm. By listening for this event in your code, the developer can capture the user’s actions and process them accordingly.

3. Coupon picker

Coupon Picker provides coupon cells and coupon selection.

The coupons cell simply passes in a list of coupons and the coupons currently in use to display correctly. The editable parameter controls whether the coupon cell displays the right arrow, which can be used to alert the user to switch coupons.

Coupon selection module has more functions. Coupon selection supports coupon code exchange function. After the user fills in the coupon code, click exchange, which will trigger the Exchange event. Developers listen for this event in their code and can implement their own coupon code exchange. At the same time, the coupon selection list supports the display of available and unavailable coupons, and the display of different coupon states, which is more user-friendly.

In the near future, coupon Picker will allow developers to freely change the way each coupon is displayed in the coupon selection list.

Next: Address select the large component Address

In the near future, we will release an address selection component to improve the address management capabilities of the Vant component.

Demo

The following is a vant-based mall demo, data through the mock, to generate a complete shopping process. With promotional offers and user management interface, a simple buyer’s mall is complete.

Three, looking

Vant still has a lot to lose. The business components are still in their infancy and incomplete, and more business components need to be added to Vant. Lack of English documentation and flow/typescript support. We look forward to your criticism and suggestions to build a better Vant together.

Please go to Github for complete code and documentation for instructions.

This article was originally posted on The Uptech blog.