基于 Vue 2.0 的 Mobile 组件库 Vant

深藏阁楼爱情的钟 2022-05-18 05:57 371阅读 0赞

Vant 详细介绍

Vant 是有赞开源的一套基于 `Vue 2.0` 的 Mobile 组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近 50 个组件，这些组件被广泛使用于有赞的各个移动端业务中。

Vant 旨在更快、更简单地开发基于 Vue 的美观易用的移动站点。

![142103_LwYR_2896879.gif][]

### 特性 ###

*  组件都是来源于有赞的微商城业务，并且经过有赞业务的检验，更靠谱
 *  完善详实的 [中文文档][Link 1]
 *  专门的设计师团队维护视觉规范，统一而优雅
 *  支持 [babel-plugin-import][]
 *  单测覆盖率超过90%

建议搭配 webpack，babel 使用 Vant，这样可以使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 [babel-plugin-import][]，通过 babel 插件使用 Vant，可以优化代码体积，提高前端性能。

### 丰富实用的业务组件 ###

Vant 不只是提供基础的UI组件，为了方便开发者快速构建移动商城，Vant 增加了许多移动商城内常用的业务组件。类似于[sku选择][sku]，[优惠券选择][Link 2]，[省市县选择][Link 3] 等。

Vant 之后会不断丰富业务组件，逐渐完善成一个大的电商商城组件体系。不完整规划图如下：

![142243_D1lq_2896879.png][]

[142103_LwYR_2896879.gif]: https://static.oschina.net/uploads/space/2017/0929/142103_LwYR_2896879.gif
[Link 1]: https://www.youzanyun.com/zanui/vue/component/quickstart
[babel-plugin-import]: https://github.com/ant-design/babel-plugin-import
[sku]: https://www.youzanyun.com/zanui/vue/examples/component/sku
[Link 2]: https://www.youzanyun.com/zanui/vue/examples/component/coupon
[Link 3]: https://www.youzanyun.com/zanui/vue/examples/component/area
[142243_D1lq_2896879.png]: https://static.oschina.net/uploads/space/2017/0929/142243_D1lq_2896879.png