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常用組件的使用方法，如果遇到任何問題，歡迎留言，我們一起探討。