vant-ui 全局导入和按需导入

1. 安装vant-ui

npm 安装

npm i vant -S 

yarn 安装

yarn add vant -S

2. 全局导入
在 main.js 文件下

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

Vue.use(vant)

3. 按需导入

安装插件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式，安装按需引入的插件 命令

npm i babel-plugin-import -D

在 babel.config.js 中添加如下代码

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

创建 plugins 文件夹，在文件夹下创建 vant.js

import Vue from 'vue'
import {Button} from 'vant'

Vue.use(Button)

在 main.js 文件配置 vant 组件

import '@/plugins/vant'