2024年最新前端开发3年了，竟然不知道什么是 Vue 脚手架？（上）(1)，前端开发哪个教程好

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

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

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

2、安装 webpack

对所有的资源都会压缩等优化操作，在开发过程中，提供了一套完整的功能，能够使开发效率更高。

使用命令进行安装

npm install webpack -g //全局安装

npm install webpack --save //当前目录安装

3、安装脚手架

npm install @vue-cli -g //全局安装

安装完成之后，输入 vue 回车，就能看到 vue 中的命令行，如图：

官网文档介绍 vue-cli 安装时，可以使用的命令有两种：

yarn 工具，类似 npm 的基本使用，在性能上比 npm 更好。相同意义命令可能不同。

二、Vue CLI 2.x 初始化项目

---

vue-cli 3 已经发布一段时间了，现在安装脚手架，都会安装 Vue-cli 3.x 版本，如果我们想要使用 vue-cli 2.x 版本时，需要拉去 vue-cli 2.x 的模板，使用命令如下：

npm intstall -g @vue/cli-init

此时，就可以开始使用 vue-cli 2 创建项目了。

1、创建项目文件夹 vue-cli 2

2、在文件夹内打开 cmd 窗口，输入命令：

vue init webpack learn

此时已经开始下载模板。

根据提示信息，输入对应的信息内容，如图：

vue 项目打包的时候，Runtime+compiler 与 Runtime-only 是有区别的，第一个解释，该命令适用大多数用户，所以我们先选择第一个，后边讲解区别。

回车继续创建项目：

提示是否使用 vue-router（路由）、Eslint（代码规范化检测工具），最后提示我们选择使用什么命令进行项目管理，最后一个是手动处理，我们选择大家熟悉的 npm 就好了。

现在等着项目创建完成之后，会提示我们进入项目，然后使用命令运行环境。

三、Vue-cli 2.x 项目结构解析

---

首先从 配置文件 webpack.json 文件入手：寻找 scripts ，scripts 中存放的都是一些项目运行、打包、测试等脚本。代码如下：

“scripts”: {

“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”,

“start”: “npm run dev”,

“build”: “node build/build.js”

}

3.1、为什么使用 npm run dev 启动服务？

webpack-dev-server 是启动一个webpack本地服务。

–inline 运行本地命令

–progress 进度

–config build/webpack.dev.conf.js 配置执行脚本入口文件

所以我们执行 npm run dev 的时候，其实执行的是：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

启动一个本地服务。启动服务的时候，展示项目进度。如果把 --progress 去掉之后，启动服务的时候就不会显示进度了。

3.2、项目运行后，为啥端口号是8080

找到 config 文件夹内的 index.js 文件，查找 dev中的配置项，就是专门为 npm run dev 执行时的配置项。

dev: {

//编译输出的二级目录

assetsSubDirectory: ‘static’,

//编译发布的根目录，可配置为资源服务器或cdn域名

assetsPublicPath: ‘/’,

//使用 proxyTable代理的接口

proxyTable: {},

// 开发时候的访问域名，可通过环境变量自己设置

host: ‘localhost’,

//开发时候的端口号，如果被占用会随机分配

port: 8080,

//浏览器是否自动打开项目

autoOpenBrowser: false,

//是否使用eslint loader检查代码

useEslint: true,

//在浏览器展示错误蒙层

errorOverlay: true,

// 是否展示错误

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

devtool: ‘cheap-module-eval-source-map’,

cacheBusting: true,

cssSourceMap: true

}

3.3、为何使用 npm run build 能够自动打包项目？

npm run build 运行时，其实执行的是： “node build/build.js”。

我们之前开发的网页，执行 js 文件的时候，必须引入 某个 html 文件内，浏览器访问 html 文件，渲染的时候才会执行js文件。

在node中：node 为 js 执行提供了环境，node 是 C++ 开发的 V8引擎，可以直接把 js 文件运行成二进制代码，所以运行起来很快。node 中执行 js 的时候，直接使用：node xx.js 文件就可以运行了。

所以打包项目的时候，执行的是 build 文件夹内的 build.js 文件。

四、项目其他文件介绍

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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