读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

npm I vant -S

参考vant官网快速上手教程： https://youzan.github.io/vant/#/zh-CN/quickstart

3.引入组件

自动按需引入(推荐)

3.1安装babel-plugin-import插件

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

#安装插件

npm i babel-plugin-import -D

3.2添加配置

在babel.config.js 中添加配置

{ "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ]}

3.3引入vant组件

如在全局引入懒加载组件

src/main.js

//引入组件import {Lazyload} from 'vant'Vue.use(Lazyload)

引入组件后发现报错：是因为项目开启了eslint检查

解决办法： 在项目根目录新建vue.config.js文件，去除在保存的时候检查代码的功能, 配置完后记得重新npm run serve启动。

vue.config.js

module.exports = { lintOnSave: false //eslint-loader 是否在保存的时候检查 }

vue.config.js是vue-cli3之后新增的一个功能，再这个版本里面如果要配置webpack相关的属性，就需要自己在项目根目录新建vue.config.js这个文件，然后在该文件里面去写入你需要的配置。

后面再对vue.config.js进行更详细配置。

4.rem适配

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：

postcss-pxtorem 是一款 postcs