50 - 综合案例 - 智慧商城-02 - vant组件库

一. vant 组件库

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

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

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

1. vant 导入区别

   

2. 导入基本使用

目标: 阅读文档，掌握 全部导入 和 按需导入 的基本使用

        (1). 全部导入

                ①.  安装 vant-ui

npm i vant@latest-v2 -S

// 如果报错,就执行以下代码安装
// npm i vant@latest-v2 -S --legacy-peer-deps

                ②. 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>

                   ④. 代码演示

 

        (2). 按需导入(推荐)

                  ①.  安装 vant-ui(已安装)

npm i vant@latest-v2 -S

// 如果报错,就执行以下代码安装
// npm i vant@latest-v2 -S --legacy-peer-deps

                ②. 安装插件

npm i babel-plugin-import -D

// 如果报错,就执行以下代码安装
// npm i babel-plugin-import -D --legacy-peer-deps

                ③. babel.config.js 配置 

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

              ④. main.js按需导入注册

// 组件多的话会导致main.js冗余
import Vue from 'vue'
import {Button} from 'vant'

Vue.use(Button);


// 可以新建js文件:  utils / vant-ui.js ; 将内容提取到里面

              ⑤. 测试使用

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

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

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

              ⑦. 代码示例

二. 其他 Vue组件库

目标: 了解其他 Vue 组件库

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

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

        (1). PC端: element-ui (element-plus)    ant-design-vue

        (2). 移动端: vant-ui    Mint UI(饿了么)    Cube Ul(滴滴)