前端Vue入门-day08-vant组件库

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

目录

vant 组件库 

安装 

导入

全部导入

按需导入

浏览器配饰

Viewport 布局

Rem 布局适配 

---

vant 组件库 

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

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

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

安装 

通过 npm 安装

在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

（这是官方给出的代码，如果安装失败，请根据我下面导入步骤重新安装）

1.  
   # Vue 3 项目，安装最新版 Vant：
2.  
   npm i vant -S
3.  
    
4.  
   # Vue 2 项目，安装 Vant 2：
5.  
   npm i vant@latest-v2 -S

导入

全部导入

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

① 安装 vant-ui

yarn add vant@latest-v2

② main.js 中注册

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

③ 使用测试

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

Tips: 配置按需引入后，将不允许直接导入所有组件。

按需导入

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

① 安装 vant-ui 

yarn add vant@latest-v2

 ② 安装插件

官方代码： 

1.  
   # 安装插件
2.  
   npm i babel-plugin-import -D

 我自己的代码：

yarn add babel-plugin-import -D

③ babel.config.js 中配置

1.  
   // 在.babelrc 中添加配置
2.  
   // 注意：webpack 1 无需设置 libraryDirectory
3.  
   {
4.  
   "plugins": [
5.  
   ["import", {
6.  
   "libraryName": "vant",
7.  
   "libraryDirectory": "es",
8.  
   "style": true
9.  
   }]
10.  
    ]
11.  
    }
12.  
     
13.  
    // 对于使用 babel7 的用户，可以在 babel.config.js 中配置
14.  
    module.exports = {
15.  
    plugins: [
16.  
    ['import', {
17.  
    libraryName: 'vant',
18.  
    libraryDirectory: 'es',
19.  
    style: true
20.  
    }, 'vant']
21.  
    ]
22.  
    };

 ④ main.js 按需导入注册

1.  
   import Vue from 'vue';
2.  
   import { Button } from 'vant';
3.  
   Vue.use(Button);

⑤ 测试使用

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

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

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

浏览器配饰

Viewport 布局

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

Rem 布局适配 

如果需要使用 rem 单位进行适配，推荐使用以下两个工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

1.  
   // postcss.config.js
2.  
   module.exports = {
3.  
   plugins: {
4.  
   'postcss-pxtorem': {
5.  
   rootValue: 37.5,
6.  
   propList: ['*'],
7.  
   },
8.  
   },
9.  
   };

这篇好文章是转载于：学新通技术网