2024年Web前端最新webpack打包优化-vant按需映入(2)，2024年最新前端处理数据渲染页面的方式

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

先说下vant按需引入

---

---

• -S 就是–save 将插件安装到生产环境 在package,json中的dependencies 打包会打包到dist中,就是上线也需要用

• -D就是dev将插件安装到开发环境 devDependencies

• 配路由官方推荐首字母大写且两个单词驼峰命名法

1.下载vant

---

// Vue 2 项目，安装 Vant 2：

npm i vant -S

// Vue 3 项目，安装 Vant 3：

npm i vant@next -S

// 通过 yarn 安装

yarn add vant

2.下载所需插件

---

// babel-plugin-import 是一款 babel 插件，

//它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

3.在babel.config.js配置

---

// 在.babelrc 中添加配置

// 注意：webpack 1 无需设置 libraryDirectory

{

“plugins”: [

["import", {

  "libraryName": "vant",

  "libraryDirectory": "es",

  "style": true

}]

]

}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {

plugins: [

['import', {

  libraryName: 'vant',

  libraryDirectory: 'es',

  style: true

}, 'vant']

]

};

4.在页面注册使用

---

分为页面注册组件使用,和全局按需引入使用

<Button type="default">默认按钮</Button>

<Button loading type="primary" loading-type="spinner" />

import { Button } from ‘vant’

export default {

name: ‘home’,

components: {

Button

}

}

4.1 全局使用按需引入

---

在根目录下新建plugins文件,里面新建index.j(名字自己取,如果不引入其他就index就可以)

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题