vue3移动端 --- vant ui库使用

一、Vant安装

1. 安装：npm i vant

二、按需引入

1. 安装按需引入插件：npm i babel-plugin-import -D

2. 在babel.config.js中配置
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      "plugins": [
        [
          "import",
          {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
          },
          "vant-ui"
        ]
      ]
    }

三、使用

1. 新建目录 library / index.js
     例如：使用 Button 组件
     注意：使用那个组件 要先引入哦  
        import { Button } from 'vant';
        const components = [ Button ];
        // vant库 按需引入
        export default {
          install: app => {
            components.forEach(component => {
              app.use(component);
            });
          }
        };
        
2. 在 main.js 中引入
        import libraryUI from './library/index'
        const app = createApp(App)
        app.use(libraryUI)
        
3. 在组件中使用
        <van-button type="primary" size="mini">主要按钮</van-button>
        <van-button type="success" size="small">成功按钮</van-button>
        <van-button type="default" size="large">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>

四、插件会自动将代码转化为按需引入的形式

原始代码
import { Button } from 'vant'; 

编译后代码 
import Button from 'vant/es/button'; 
import 'vant/es/button/style';