vant 按需引入安装 babel.config.js中plugins数组中加入： src/components/com

安装

npm i vant@latest-v2 -S
npm i babel-plugin-import -D

babel.config.js中plugins数组中加入：

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

src/components/common/vantUI.js中写入以下内容（没写全，用到的时候再加）

import Vue from 'vue'
import { Button, Cell, CellGroup, Icon, Image as VanImage } from 'vant'

// Vue.use(Button).use(Cell).use(CellGroup).use(Icon).use(VanImage)

const vantUIList = [Button, Cell, CellGroup, Icon, VanImage]

for (const item of vantUIList) Vue.use(item)

main.js中引入

import './components/common/vantUI'

使用

    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>

    <van-icon name="chat-o" />
    <van-image width="100" height="100" src="https://img01.yzcdn.cn/vant/cat.jpeg" />