移动端Vant-UI库的使用

1. 第一步：安装插件

安装 Vant-UI 库

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

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

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

配置 babel.config.js

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

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

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

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

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

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

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

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