Vant组件库安装详解

一、安装Vant

Vant是基于Vue.js的组件库，提供了60多个可复用的UI组件，可以帮助开发人员快速构建企业级移动WEB应用，Vant的安装也十分简单。可以通过NPM或Yarn安装。

1. NPM安装

npm i vant -S

在项目中引入需要的组件即可

import { Button } from 'vant';
Vue.use(Button);

如果需要按需引入，可以通过babel-plugin-import插件实现

npm i babel-plugin-import -D

然后在babel.config.js中进行配置，如下例所示

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
};

2. Yarn安装

yarn add vant

在项目中引入需要的组件即可

import { Button } from 'vant';
Vue.use(Button);

如果需要按需引入，可以通过babel-plugin-import插件实现

yarn add babel-plugin-import -D

然后在babel.config.js中进行配置，如下例所示

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
};

二、使用 Vant

1. 在组件中使用 Vant

在Vue组件中使用 Vant十分简单，只需要在组件中引入需要的组件，在template中使用即可：

<template>
  <div>
    <van-button>按钮</van-button>
    <van-icon name="star-o" />
  </div>
</template>

<script>
import { Button, Icon } from 'vant';

export default {
  components: {
    'van-button': Button,
    'van-icon': Icon
  }
};
</script>

2. 在页面中使用 Vant 的组件

如果在Vue的页面中使用 Vant ，只需要在main.js中引用 Vant ，并将引用的方式挂载到Vue上，然后就可以在页面中使用 Vant 的任何组件了：

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

Vue.use(Vant);

三、优雅的使用Vant样式变量

在使用 Vant 时，我们有时候想要对组件的样式进行修改，这时候可以通过改变 Vant 的样式变量来实现。

1. 获取组件的默认样式变量

首先，需要查看组件的 默认样式变量，然后复制相应的变量，更改后导入。

/* 改变 button 主色 */
$--color-primary: #07c160;

/* 改变 button 激活态背景色 */
$--button-primary-active-bg-color: #009143;

/* 导入 Vant 样式变量 */
@import "~vant/lib/style/var.less";

/* 引入组件样式 */
@import "~vant/lib/style/index.less";

2. 在 Vue 组件中使用样式变量

在Vue组件中，可以通过 $vant 替代流程导入样式变量，在style中使用即可：

<style lang="less" scoped>
  .my-button {
    /* 更改 button 主色 */
    color: $--color-primary;

    /* 更改 button 激活态背景色 */
    &:active {
      background-color: $--button-primary-active-bg-color;
    }
  }
</style>

四、Vant常用组件

1. Button 按钮

Button 按钮组件可以方便地创建不同样式和功能的按钮，用于触发操作。

示例代码如下：

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

<script>
import { Button } from 'vant';

export default {
  components: {
    'van-button': Button
  }
};
</script>

2. Icon 图标

Icon 图标组件内置了 1500 多个图标，可以方便地创建一个图标。

示例代码如下：

<template>
  <van-icon name="success" />
  <van-icon name="search" />
  <van-icon name="settings" />
  <van-icon name="delete" />
  <van-icon name="more" />
</template>

<script>
import { Icon } from 'vant';

export default {
  components: {
    'van-icon': Icon
  }
};
</script>

3. Cell 单元格

Cell 单元格组件可以在列表中展示多种类型的内容，包括文字、图标、输入框等。

示例代码如下：

<template>
  <van-cell
    title="单元格"
    value="内容"
    is-link
  />
  <van-cell
    title="单元格"
    value="内容"
    label="描述信息"
    is-link
  />
  <van-cell
    title="单元格"
    value="内容"
    label="描述信息"
    icon="location-o"
    is-link
  />
</template>

<script>
import { Cell } from 'vant';

export default {
  components: {
    'van-cell': Cell
  }
};
</script>

4. List 列表

List 列表组件用于向用户展示一列信息，常见的使用场景是展示商品列表、订单列表或其他列表型信息。

示例代码如下：

<template>
  <van-list>
    <van-cell
      v-for="item in list"
      :key="item.id"
      :title="item.title"
      :value="item.value"
      :icon="item.icon"
    />
  </van-list>
</template>

<script>
import { List, Cell } from 'vant';

export default {
  components: {
    'van-list': List,
    'van-cell': Cell
  },
  data() {
    return {
      list: [
        {
          id: 1,
          title: '单元格1',
          value: '内容1',
          icon: 'location-o'
        },
        {
          id: 2,
          title: '单元格2',
          value: '内容2',
          icon: 'like-o'
        }
      ]
    };
  }
};
</script>

5. Popup 弹出层

Popup 弹出层组件用于向用户展示特定的信息，通常在模态框或菜单中使用。

示例代码如下：

<template>
  <van-popup
    v-model="showPopup"
    position="bottom"
    :style="{ height: '200px' }"
  >
    <div style="height: 200px; background-color: #fff;">这里是弹出层内容</div>
  </van-popup>
</template>

<script>
import { Popup } from 'vant';

export default {
  components: {
    'van-popup': Popup
  },
  data() {
    return {
      showPopup: false
    };
  }
};
</script>

五、总结

以上就是关于 Vant 组件库的安装和使用的详细介绍，Vant在企业级移动WEB应用开发过程中，为开发人员提供了丰富的组件和丰富的样式变量可以自由定制，当然这只是Vant强大功能的一部分。相信通过这篇文章，你已经了解了如何快速搭建本地开发环境、快速接入Vant组件库，以及Vant常用组件的使用方法，如果遇到任何问题，欢迎留言，我们一起探讨。