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>