Vant component library

install ：

npm i [email protected] -S

 1. Complete introduction

//plugins/vant/index.js

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

//  plugins/index.js
 
import './vant'
import './tailwind'
import './element'
import './echarts'

//main.js
 
import Vue from 'vue'
import App from './App.vue'
import './plugins'

2. Introduce on demand

Installing a plug-in

npm i babel-plugin-import -D

# stay  babel.config.js  Middle configuration 
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: (name) => `${name}/style/less`
      },
      'vant'
    ]
  ]
}

// plugins/vant/index.js
 
import Vue from 'vue';
import { Button, Select } from 'element-ui';
 
 Vue.use(Button)

// plugins/index.js
 
import './tailwind';
import './element';
import './echarts';

//main.js
 
import Vue from 'vue'
import App from './App.vue'
import './plugins

For convenience , Import all

// plugins/index.js

import Vue from 'vue'

import {
  Button,
  Swipe,
  SwipeItem,
  Lazyload,
  Sticky,
  Loading,
  List,
  Form,
  Field,
  Uploader,
  RadioGroup,
  Radio,
  Toast,
  Tag,
  Skeleton,
  Cell,
  CellGroup,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Sku,
  Checkbox,
  CheckboxGroup,
  SubmitBar,
  Badge,
  Empty,
  Image,
  ContactCard,
  Tab,
  Tabs
} from 'vant'

const components = [
  Button,
  Swipe,
  SwipeItem,
  Lazyload,
  Sticky,
  Loading,
  List,
  Form,
  Field,
  Uploader,
  RadioGroup,
  Radio,
  Toast,
  Tag,
  Skeleton,
  Cell,
  CellGroup,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Sku,
  Checkbox,
  CheckboxGroup,
  SubmitBar,
  Badge,
  Empty,
  Image,
  ContactCard,
  Tab,
  Tabs
]

for (const component of components) {
  Vue.use(component)
}