由于我的服务器是真的辣鸡，就迫使我优化项目提高项目加载速度。减少代码体积迫在眉睫，好在vantUI可以按需引入，而我项目又不需要这么多组件。vantUI按需引入真香，嘿嘿。

vantUI按需引入

1、安装vantUI

npm i vant -S

2、安装babel-plugin-import

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

3、根目录babel.config.js添加如下代码

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  // 从这里开始--------------------------
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
  // 这里结束----------------------------
}

4、在plugins文件夹里创建vant.js，在vant.js里写组件引入代码。3.5.1版本部分引入如下：

如没有引入可以去官网找：vant

import Vue from 'vue';
import {
    Button,
    Cell,
    CellGroup,
    ConfigProvider,
    Icon,
    Image as VanImage,
    Col,
    Row,
    Popup,
    Toast,
    Calendar,
    Cascader,
    Checkbox,
    CheckboxGroup,
    DatetimePicker,
    Form, Field,
    NumberKeyboard,
    PasswordInput,
    Picker,
    RadioGroup,
    Radio,
    Rate,
    Search,
    Slider,
    Stepper,
    Switch,
    Uploader,
    ActionSheet,
    Dialog,
    DropdownMenu,
    DropdownItem,
    Loading,
    Notify,
    Overlay,
    PullRefresh,
    ShareSheet,
    SwipeCell,
    Badge,
    Circle,
    Collapse, CollapseItem,
    CountDown,
    Divider,
    Empty,
    ImagePreview,
    Lazyload,
    List,
    NoticeBar,
    Popover,
    Progress,
    Skeleton,
    Step, Steps,
    Sticky,
    Swipe, SwipeItem,
    Tag,
    ActionBar, ActionBarIcon, ActionBarButton,
    Grid, GridItem,
    IndexBar, IndexAnchor,
    NavBar,
    Pagination,
    Sidebar, SidebarItem,
    Tab, Tabs,
    Tabbar, TabbarItem,
    TreeSelect,
    AddressEdit,
    AddressList,
    Area,
    Card,
    ContactCard,
    ContactEdit,
    ContactList,
    CouponCell, CouponList,
    SubmitBar,
} from 'vant';

Vue.use(Button),
Vue.use(Cell),
Vue.use(CellGroup),
Vue.use(ConfigProvider),
Vue.use(Icon),
Vue.use(VanImage),
Vue.use(Col),
Vue.use(Row),
Vue.use(Popup),
Vue.use(Toast),
Vue.use(Calendar),
Vue.use(Cascader),
Vue.use(Checkbox),
Vue.use(CheckboxGroup),
Vue.use(DatetimePicker),
Vue.use(Form), 
Vue.use(Field),
Vue.use(NumberKeyboard),
Vue.use(PasswordInput),
Vue.use(Picker),
Vue.use(RadioGroup),
Vue.use(Radio),
Vue.use(Rate),
Vue.use(Search),
Vue.use(Slider),
Vue.use(Stepper),
Vue.use(Switch),
Vue.use(Uploader),
Vue.use(ActionSheet),
Vue.use(Dialog),
Vue.use(DropdownMenu),
Vue.use(DropdownItem),
Vue.use(Loading),
Vue.use(Notify),
Vue.use(Overlay),
Vue.use(PullRefresh),
Vue.use(ShareSheet),
Vue.use(SwipeCell),
Vue.use(Badge),
Vue.use(Circle),
Vue.use(Collapse), 
Vue.use(CollapseItem),
Vue.use(CountDown),
Vue.use(Divider),
Vue.use(Empty),
Vue.use(ImagePreview),
Vue.use(Lazyload),
Vue.use(List),
Vue.use(NoticeBar),
Vue.use(Popover),
Vue.use(Progress),
Vue.use(Skeleton),
Vue.use(Step),Vue.use(Steps),
Vue.use(Sticky),
Vue.use(Swipe),Vue.use(SwipeItem),
Vue.use(Tag),
Vue.use(ActionBar), 
Vue.use(ActionBarIcon), 
Vue.use(ActionBarButton),
Vue.use(Grid),Vue.use(GridItem),
Vue.use(IndexBar),Vue.use(IndexAnchor),
Vue.use(NavBar),
Vue.use(Pagination),
Vue.use(Sidebar),Vue.use(SidebarItem),
Vue.use(Tab),Vue.use(Tabs),
Vue.use(Tabbar),Vue.use(TabbarItem),
Vue.use(TreeSelect),
Vue.use(AddressEdit),
Vue.use(AddressList),
Vue.use(Area),
Vue.use(Card),
Vue.use(ContactCard),
Vue.use(ContactEdit),
Vue.use(ContactList),
Vue.use(CouponCell),
Vue.use(CouponList),
Vue.use(SubmitBar)

5、main.js里引入vant.js

// 按需引入element组件
import './plugins/vant.js'

注意！！！

按需引入不需要单独引入样式！！！
写了下面这句

import 'vant/lib/index.css'

打包后代码大小：