02.智慧商城——vant组件库使用和vw适配

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

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

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

比如日历组件、键盘组件、打分组件、下拉筛选组件等

组件库并不是唯一的，常用的组件库还有以下几种：

pc: element-ui element-plus iview ant-design

移动：vant-ui Mint UI (饿了么) Cube UI (滴滴)

02. 全部导入和按需导入的区别

目标：明确 全部导入 和 按需导入 的区别

区别：

1.全部导入会引起项目打包后的体积变大，进而影响用户访问网站的性能

2.按需导入只会导入你使用的组件，进而节约了资源

03. 全部导入

• 安装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提供了很多的组件，全部导入，会导致项目打包变得很大。

04. 按需导入

• 安装vant-ui

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']
  ]
}

• 按需加载，在main.js

import { Button, Icon } from 'vant'

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

• 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>

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

import { Button, Icon } from 'vant'

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

main.js中进行导入

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

05. 项目中的vw适配

官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage

yarn add postcss-px-to-viewport@1.1.1 -D

• 项目根目录， 新建postcss的配置文件postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

viewportWidth:设计稿的视口宽度

1. vant-ui中的组件就是按照375的视口宽度设计的
2. 恰好智慧商城项目中的设计稿也是按照375的视口宽度设计的，所以此时 我们只需要配置375就可以了
3. 如果设计稿不是按照375而是按照750的宽度设计，那此时这个值该怎么填呢？