<>1. The first step ： Install plug-ins
*
install Vant-UI library
npm i vant -S // Runtime dependencies
*
Install the on demand import plug-in babel-plugin-import
npm i babel-plugin-import -D // Development time dependence // babel-plugin-import It's one babel
plug-in unit , It will be updated during compilation import The way of writing is automatically converted to the way of introducing on demand .
*
to configure babel.config.js
module.exports = { plugins: [ ['import', { libraryName: 'vant',
libraryDirectory: 'es', style: true }, 'vant'] ] }
<>2. Step two ： encapsulation vant Component module
*
establish plugins folder , And vant.js file
// 1. Import Vue import Vue from 'vue' // 2. Import on demand Vant Components of import { Swipe,
SwipeItem} from 'vant' // 3. Register components Vue.use(Swipe) Vue.use(SwipeItem)
*
stay main.js Import encapsulated vant.js modular
import './plugins/vant' // Import by path
*
stay main.js Import from Vant-UI Of css Style file
import 'vant/lib/index.css' // Or in App.vue Of style Import from tag @import
"../node_modules/vant/lib/index.css";
Technology