vue2 - 22.vant 组件库

vant 组件库

vant2下载：

npm i vant@latest-v2 --legacy-peer-deps

目标：认识第三方 Vue组件库 vant-ui

组件库：第三方 封装 好了很多很多的 组件，整合到一起就是一个组件库。

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

---

其他 Vue 组件库

目标：了解其他 Vue 组件库

Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。

一般会按照不同平台进行分类：

① PC端：

element-ui

(element-plus)

ant-design-vue

② 移动端：

vant-ui

Mint UI (饿了么)

Cube UI (滴滴)

vant 全部导入 和 按需导入

目标：阅读文档，掌握 全部导入 的基本使用

官网：vant-ui

全部导入：

① 安装 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-ui (已安装)

② 安装插件

③ babel.config.js 中配置

yarn add vant@latest-v2npm i babel-plugin-import -Dmodule.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]}

④ main.js 按需导入注册

⑤ 测试使用

⑥ 提取到 vant-ui.js 中，main.js 导入

import Vue from 'vue';import { Button } from 'vant';Vue.use(Button);van-button type="primary">主要按钮van-button>van-button type="info">信息按钮van-button>// 导入按需导入的配置文件import '@/utils/vant-ui'