Vant - 有赞移动端 Vue 组件库


logo



logo


A Vue.js 2.0 Mobile UI at YouZan

Build Status
downloads
Coverage Status
npm version
license

特性

  • 50+ 个经过有赞线上业务检验的组件
  • 单元测试覆盖率超过 90%
  • 完善的中英文文档和示例
  • 支持 babel-plugin-import
  • 支持 TypeScript
  • 支持 SSR

安装

  1. npm i -S vant

快速上手

方式一. 使用 babel-plugin-import (推荐)

  1. # 安装 babel-plugin-import 插件
  2. npm i babel-plugin-import -D
  1. // 在 .babelrc 或 babel-loader 中添加插件配置
  2. // 注意:webpack 1 无需设置 libraryDirectory。
  3. {
  4. "plugins": [
  5. ["import", {
  6. "libraryName": "vant",
  7. "libraryDirectory": "es",
  8. "style": true
  9. }]
  10. ]
  11. }

接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为方式二中的按需引入形式。

  1. import { Button } from 'vant';

方式二. 按需引入组件

  1. import Button from 'vant/lib/button';
  2. import 'vant/lib/vant-css/base.css';
  3. import 'vant/lib/vant-css/button.css';

方式三. 导入所有组件

  1. import Vue from 'vue';
  2. import Vant from 'vant';
  3. import 'vant/lib/vant-css/index.css';
  4. Vue.use(Vant);

CDN

  1. <!-- 引入样式 -->
  2. <link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
  3. <!-- 引入组件 -->
  4. <script src="https://unpkg.com/vant/lib/vant.min.js"></script>

更多内容请参考 快速上手.

贡献代码

修改代码请阅读我们的 开发指南

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR

浏览器支持

现代浏览器以及 Android 4.0+, iOS 6+.

手机预览

可以手机扫码以下二维码访问手机端 demo:

qrcode

链接

开源协议

本项目基于 MIT 协议,请自由地享受和参与开源。

文章不错, 赏你二两银子

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续努力!