移动端Vant-UI库的使用

1. 第一步：安装插件

1. 安装 Vant-UI 库

   npm i vant -S
   // 运行时依赖
   

2. 安装按需导入插件babel-plugin-import

   npm i babel-plugin-import -D
   // 开发时依赖
   // babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
   

3. 配置 babel.config.js

   module.exports = {
          
     plugins: [
      ['import', {
          
       libraryName: 'vant',
       libraryDirectory: 'es',
   	  style: true
     	}, 'vant']
     ]
   }
   

2. 第二步：封装vant组件模块

1. 创建plugins文件夹，与vant.js文件

   // 1. 导入 Vue 
   import Vue from 'vue'
   
   // 2. 按需导入 Vant 的组件
   import {
           Swipe, SwipeItem } from 'vant'
   
   // 3. 注册组件
   Vue.use(Swipe)
   Vue.use(SwipeItem)
   

2. 在main.js中导入封装的vant.js模块

   import './plugins/vant'
   // 根据路径导入
   

3. 在main.js中导入Vant-UI的css样式文件

   import 'vant/lib/index.css'
   
   // 或者在App.vue的style标签中导入
   @import "../node_modules/vant/lib/index.css";