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'
