vant的全局以及单个引入

# Vue 3 项目，安装最新版

npm i vant

# 通过 yarn 安装

yarn add vant

Vant3全局安装vant

 // 在main.js中

import Vant from 'vant';

import 'vant/lib/index.css';

app.use(Vant);

全局引入缺点

一次性加载文件过多，会导致首次加载事件过长，添加冗余代码

全局引入优点

所有组件一次性引入，写法简单

Vant3 局部 安装 vant

1. 安装插件

           npm i babel-plugin-import -D

  yarn add babel-plugin-import -D

2.配置插件   在.babelrc 或 babel.config.js 中添加配置：

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

如：

 

3.  引入自定义

 比如 引入 button组件

 

4.如需引入多个如：