Vant-UI组件库的使用

Vant官方网址：Vant 2 - Mobile UI Components built on Vue

Vant2下载命令：

npm i vant@latest-v2 -S

Vant-自动按需导入

1. 下载 babel-plugin-import 插件

   npm i babel-plugin-import -D

2. 来到 babel.config.js 添加如下配置

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

3. 去main.js导入你想要的组件，并做全局注册，例

   import { Button } from 'vant';
   import { DatetimePicker } from 'vant';
   import { Rate } from 'vant';
   
   Vue.use(Rate);
   Vue.use(DatetimePicker);
   Vue.use(Button);

代码维护：

1. 来到 src新建 utils文件夹，里面放一个 vant.js，在这个文件里放导入vant的代码。
2. 然后来到 main.js，导入这个文件即可 import './utils/vant'。

导入规范：如果从同一个文件里做导入，那么只能写在一行。

import { Button, DatetimePicker, Rate } from 'vant';