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