Vant
made with Vuejs

Vant

这是一个轻量、可靠的移动端 Vue 组件库。

简介及使用教程

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);

示例

image.png image.png

作者

有赞前端团队

相关项目

这是Bootstrap框架的Vue实现。
这是一个轻巧和模块化的Vue UI组件库。
这是一款高质量且免费的Vue UI套件。
这是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
这是一个UI组件库。
Buefy是一个响应性UI组件的轻量级库。
这是基于Vue制作的简单但一致的用户界面。