vue3引入vant3配置整合详情（按需引入）

一、 安装 Vue Cli

npm install -g @vue/cli

二、创建一个项目，hello-world为你定义的项目名称

vue create hello-world

三、安装vant依赖

npm i vant@next -S

四、按需引用

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']
  ]
}

六、配置文件，在src下新建config目录 新建vant.config.js文件，可以将需要使用到的vant组件在这里引入：

import { Button, List, Cell, CellGroup } from 'vant';

export function vant(app) {
    app.use(Button);
    app.use(List)
    app.use(Cell);
    app.use(CellGroup);
}

七、修改main.js文件：

import { createApp } from 'vue'
import App from './App.vue'
import { vant } from '@/config/vant.config.js'

const app = createApp(App);
vant(app)
app.mount('#app')

八、导入组件

 <van-button icon="plus" type="primary">按钮</van-button>

成功显示，一箭三联，感谢！