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 文件修改任意一个即可