2024年Web前端最全Vue基础-搭建Vue运行环境，中高级Web前端面试中你不得不会的知识点

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

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

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

成功显示版本说明安装成功。

---

3、环境配置

a、配置安装目录和缓存目录

我们需要设置全局安装包的目录路径、设置 npm 包的缓存路径

安装目录下新建 “node_global”和 “node_cache” 文件夹

创建完毕后，使用管理员身份打开cmd命令窗口，输入：

npm config set prefix "C:\Program Files\nodejs\node_global" //设置全局安装包的目录路径
npm config set cache "C:\Program Files\nodejs\node_cache" //设置 npm 包的缓存路径

b、配置环境变量

首先我们检查刚刚的配置：

命令行输入：

npm config list

可以看到我们刚刚设置的配置：

cache=”C:\ProgramFiles\nodejs\node_cache”
prefix=”C:\ProgramFi1es\nodejs\node_g1oba1″
registry=”https://registry.npm.taobao.org”

复制prefix的值：C:\ProgramFi1es\nodejs\node_g1oba1

此电脑右键>属性>高级系统设置>环境变量，
将prefix的值复制到环境变量系统变量的Path。

---

4、测试是否安装成功

配置完成后，全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

出现以下界面即为配置成功。

---

5、安装淘宝镜像源

将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，现在用的都是淘宝镜像源（https://registry.npm.taobao.org），使用淘宝镜像源方式：

npm安装淘宝镜像

npm config set registry https://registry.npm.taobao.org

查看是否成功：

npm config get registry

---

二、安装 Vue 及 Vue CLI 工具

Vue CLI 是一个基于 Vue.js 的官方脚手架工具，用于创建和管理 Vue.js 项目。当执行 npm install @vue/cli 时，它会安装 Vue CLI 的最新版本，并且这个版本中包含了 Vue.js 的依赖。

Vue CLI 除了包含 Vue.js 本身，还提供了一套项目搭建和开发的工具，例如项目初始化、开发服务器、构建工具等。一旦安装完成，您可以使用 vue create 命令来创建新的 Vue.js 项目，并且可以通过 Vue CLI 提供的各种命令和配置来进行项目开发和管理。

简单来说，就是安装Vue CLI工具时包含Vue的安装，不需要单独安装Vue。

命令行输入：

npm install -g @vue/cli

检验是否安装成功：

npm list vue -g  #全局查找安装的vue

全局搜索能搜索到Vue，就说明安装成功。

---

三、安装 Webpack 模板

Webpack 是一个模块打包工具，主要用于将各种前端资源（如JavaScript、CSS、图片等）打包成一个或多个静态文件，以便于浏览器加载。

使用 Webpack 的优势：

• 模块化开发： Webpack 支持模块化开发，能够将项目拆分成小的模块，使代码更易维护和组织。
• 资源打包： 可以将多个资源文件打包成一个或多个文件，减少网络请求次数，提高页面加载性能。
• 代码分割： 支持将代码拆分成多个块，实现按需加载，优化应用的加载速度。
• 自动化任务： Webpack 提供了强大的插件系统，可以自动执行各种任务，例如代码压缩、图片优化等。
• 开发服务器： 提供了一个开发服务器，支持热模块替换（Hot Module Replacement），使开发过程更高效。
• 预处理器支持： 可以集成各种预处理器（如Babel、Sass、Less等），使开发更灵活。

命令行安装webpack，输入：

npm install webpack -g

再安装webpack-cli，命令行输入：

npm install --global webpack-cli

接下来，我们配置环境变量，类似于上面的环境变量设置，我们依然是往系统变量的path里添加我们webpack的安装路径，我们先查看安装路径。

看到webpack的安装路径是：C:\Program Files\nodejs\node_global\node_modules

接着我们添加环境变量：

然后我们检查webpack是否安装成功，命令行输入：

webpack -v

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

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

[外链图片转存中…(img-a5PsrdBj-1715382608901)]