Vant组件库的按需导入和导出

vant组件库及Vue周边的其他组件库

• 组件库并不是唯一的，常用的组件库还有以下几种：
  • pc: element-ui(支持v2) element-plus(支持v3) iview(v2,v3均支持) ant-design(v2,v3均支持)
  • 移动：vant-ui Mint UI (饿了么) Cube UI (滴滴)

全部导入和按需导入以及两者区别

区别：
1.全部导入会引起项目打包后的体积变大，进而影响用户访问网站的性能
2.按需导入只会导入你使用的组件，进而节约了资源

全部导入

• 安装vant-ui

yarn add vant@latest-v2

• main.js中导入

import Vant from 'vant';
import 'vant/lib/index.css';
// 把vant中所有的组件都导入了
Vue.use(Vant)

• 使用

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

按需导入

自动按需引入

手动按需引入

• 安装vant
• 安装一个插件
• 在babel.config.js中配置
• 在main.js中按需加载
• 使用

升级写法

把引入组件的步骤抽离到单独的js文件中(utils/vant-ui.js)

import { Button, Icon } from 'vant'

Vue.use(Button)
Vue.use(Icon)

main.js中导入该文件即可

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