vant全局引入和按需加载

青衣

1、下载vant

npm i vant -S

2、main.js中全局引入

import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

3、使用

<van-button type="primary" @click="()=>{this.$toast.success('成功文案')}">主要按钮</van-button>
  <van-cell is-link @click="show=true">展示弹出层</van-cell>
  <van-popup v-model="show">内容</van-popup>

按需引入（推荐）：
1、下载插件

npm i babel-plugin-import -D

2、在 .babelrc 中添加配置（如果没有该文件则创建，放在根目录下）

{
  "plugins": [
  ["import", {
    "libraryName": "vant",
    "libraryDirectory": "es", // webpack 1 无需设置 libraryDirectory
    "style": true
  }]
  ]
}

3、对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
  [
    'component',
    {
    libraryName: 'element-ui',
    styleLibraryName: 'theme-chalk'
    }
  ],
  [
    'import',
    {
    libraryName: 'vant',
    libraryDirectory: 'es',
    style: true
    },
    'vant'
  ]
  ]
}

4、main.js中按需引入

import { Button, Toast, Cell, Popup } from 'vant'
Vue.use(Button).use(Toast).use(Cell).use(Popup)

5、使用

<van-button type="primary" @click="()=>{this.$toast.success('成功文案')}">主要按钮</van-button>
  <van-cell is-link @click="show=true">展示弹出层</van-cell>
  <van-popup v-model="show">内容</van-popup>

tip：
1、如果用全局引入的方式，不要修改 .babelrc 或 babel.config.js 文件，会造成报错
2、.babelrc 文件可以放在src目录下也可以放在根目录下，修改即生效；babel.config.js 文件是配置文件，需要重启服务
3、按需引入时 .babelrc 或 babel.config.js 文件修改任意一个即可