©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>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";