Vant在項目中自動按需引入

1.安裝Vant

// 通過 npm 安裝 npm i vant -S // 通過 yarn 安裝 yarn add vant

2.安裝所需插件

// babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式 npm i babel-plugin-import -D

3.配置

// 在.babelrc 中添加配置 // 注意：webpack 1 無需設置 libraryDirectory { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } // 對於使用 babel7 的用戶，可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };

4.1 在組件里按需引入

<template> <div class="home"> <Button type="default">默認按鈕</Button> </div> </template> <script> import { Button } from 'vant' export default { name: 'home', components: { Button } } </script>

4.2 全局按需引入

4.2.1 在src/plugins目錄下（沒有plugins文件夾需新建一個），然后建一個vant.js文件，在該文件中做引入操作。

import Vue from 'vue' // 在這里引入你所需的組件 import { Button, Skeleton } from 'vant' // 按需引入UI組件 Vue.use(Button) Vue.use(Skeleton)

然后在組件里正常使用就OK

<template> <div class="home"> <van-button type="default">默認按鈕</van-button> <van-skeleton title :row="3" /> </div> </template> <script> export default { name: 'home' } </script>