Vant
made with Vuejs

Vant是一个基于Vue.js轻量、可靠的移动端组件库，由有赞前端团队开发维护。

有以下特点：

• 60+ 高质量组件
• 90% 单元测试覆盖率
• 完善的中英文文档和示例
• 支持按需引入
• 支持主题定制
• 支持国际化
• 支持 TS
• 支持 SSR

安装

Npm

npm i vant -S

Yarn

yarn add vant

浏览器

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@2.6/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.6/lib/vant.min.js"></script>

使用

自动按需引入

安装babel-plugin-import

npm i babel-plugin-import -D

在.babelrc 中添加配置

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

在代码中直接引入组件

import { Button } from 'vant';

手动按需引入

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

全局引入

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

示例