Vue - vant安装(引用babel-plugin-import实现自动按需引入组件)

demo 地址: https://github.com/iotjin/jh-vue-demo

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

以Vant 为例：

1、安装

首先安装vant

# Vue 2 项目，安装 Vant 2：
npm i vant -S

# Vue 3 项目，安装 Vant 3：
npm i vant@next -S

安装 babel-plugin-import 插件

npm i babel-plugin-import -D

也可以通过图形化界面安装

2、配置babel.config.js

module.exports = {
    
    
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  // 配置vant按需引入
  plugins: [
    ['import', {
    
    
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ],
}

3、mian.js全局注册vant组件

import {
    
     Button } from 'vant';
Vue.use(Button);

4、页面使用

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>