2024年前端最全vue+vant搭建移动端框架，进阶加薪全靠它

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的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