1.vant 的安装

npm安装

在现有项目中使用vant时,可以通过npm或yarn进行安装。vue2和vue3安装方法基本相同

npm i vant -S # 安装最新版

npm i vant@latest-v2 -S # vue2项目，安装vant2

通过脚手架的UI安装

如果你是通过vue官方提供的脚手架Vue Cli 创建项目的话

可以在如下位置安装

引入组件

引入方式分为三种分别是

• 自动按需引入
• 手动按需引入
• 引入全部

1.自动按需引入组件

官方推荐

需要安装一个插件：

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。 可以通过npm 的方式安装：npm i babel-plugin-import -D 使用 babel7可以在 babel.config.js 中配置

module.exports = { 
    plugins: [ 
        ['import', { 
            libraryName: 'vant',
            libraryDirectory: 'es',
            style: true 
          }, 'vant'] 
        ] 
      };

在 main.js 中引入想要的组件。（使用button做介绍）

import { Button } from 'vant' // 引入Button组件
Vue.use(Button) // 全局注册

（不理解可以看图）

这样你就可以在组件或页面里使用 button 组件了

2.手动按需引入组件

在不使用插件的情况下，可以手动引入需要的组件，同样使用button举例

在main.js中引入

import Button from 'vant/lib/button'; 
import 'vant/lib/button/style';
Vue.use(Button) // 全局注册button

3.导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

同样在main.js中引入

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

注意：配置按需引入后，不允许直接导入所有组件。

将babel.config.js中的代码注释

2 vant的简单使用

在vant的官方文档中详细介绍了各种组件的使用方式。

button 按钮

按钮支持 default、primary、info、warning、danger 五种类型，默认为 default。

<van-button type="primary">主要按钮</van-button> 
<van-button type="info">信息按钮</van-button> 
<van-button type="default">默认按钮</van-button> 
<van-button type="warning">警告按钮</van-button> 
<van-button type="danger">危险按钮</van-button>

朴素按钮

通过 plain 属性将按钮设置为朴素按钮

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>

除了这些样式以外还提供了很多其他的功能

网页导航

可以通过 url 属性进行 URL 跳转，或通过 to 属性进行路由跳转。

<van-button type="primary" url="/vant/mobile.html">URL 跳转</van-button> 
<van-button type="primary" to="index">路由跳转</van-button>

详细的props Events Slots 以及样式变量（less) 可以在对应组件文档的下面找到

总结

• vant 安装
• vant 简单使用

本文简单介绍了vant在vue2的简单安装和简单使用。更多组件的使用方法可以在vant官方文档中查看