Vant移动端组件库的使用

1.组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。比如按钮组件、导航栏组件、下拉菜单组件、日历组件、键盘组件、打分组件等。

2.全部导入

• 安装vant2

yarn add vant@latest-v2

• 在main.js中

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

Vue.use(Vant)

• 即可使用，具体使用看官网介绍 - Vant Weapp

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>

3.全部导入的特点

• 全部导入会引起项目打包后的体积变大，进而影响用户访问网站的速度和性能
• 使用方便，一次引入，全局可用

4.按需引入

• 安装vant2

yarn add vant@latest-v2

• 安装一个插件

yarn add babel-plugin-import -D

• 在babel.config.js中配置

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

• 把引入组件的步骤抽离到单独的js文件中， utils/vant-ui.js，不要在main.js中引入，防止main.js人口文件内容过多，功能复杂

import { Button, Icon } from 'vant'
​
Vue.use(Button)
Vue.use(Icon)

• main.js中进行导入

// 导入按需导入的配置文件
import '@/utils/vant-ui'

• app.vue中进行测试

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

5.按需引入的特点

• 按需导入只会在项目中导入你所使用的组件，进而节约了资源，提高了性能
• 使用相对复杂

6.开发中结合实际情况进行两种引入方式的选择