Web前端最全vue项目初始化和部署，pdd前端面试

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

4. 创建一个新的Vue项目… 6

5. 在阿里云虚拟机安装和配置Nginx. 9

6. 将Vue项目打包部署到Nginx下… 14

7. 访问部署的项目… 14

1. 技术简介

Vue.js**（通常简称为Vue****）是一个用于构建用户界面的现代JavaScript框架。它是由尤雨溪（Evan You）在2014年创建的，并于同年首次发布。Vue被设计为易于学习、灵活且高效，使开发者可以快速构建交互性强、响应式的单页面应用（SPA****）以及动态Web****界面。**

主要特点：

1. 响应式数据绑定：Vue使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新，使得开发者不需要手动操作DOM。
2. 组件化开发：Vue****采用了组件化的开发方式，将应用拆分为多个组件，每个组件都有自己的状态和视图，可以重用和组合，使得应用的开发和维护更加简单和高效。
3. 虚拟DOM**：Vue通过虚拟DOM机制，将对DOM的操作转化为对虚拟DOM的操作，然后将虚拟DOM与真实DOM进行比对，最终只更新发生变化的部分，从而提高性能。**
4. 简洁优雅：Vue的API设计简洁明了，学习曲线较为平缓，易于上手。同时，Vue****也提供了丰富的功能和扩展性，满足了各种规模的项目需求。
5. 社区支持：Vue拥有一个庞大而活跃的社区，提供了大量的插件、工具和解决方案，帮助开发者解决各种问题，并不断推动Vue生态系统的发展。

应用场景：

Vue适用于构建各种类型的Web应用，包括单页面应用（SPA**）、多页面应用（MPA****）、移动应用、桌面应用等。它广泛应用于各行各业的项目中，包括企业级应用、个人项目、开源项目等。**

Node.js:

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它可以用于构建高性能的网络应用程序，特别是服务器端应用程序。Node.js使用事件驱动、非阻塞I/O模型，使得它非常适合构建实时应用程序、API和服务端渲染的网页。

在Node.js中，你可以使用JavaScript语言编写服务器端的代码，处理HTTP请求、数据库操作、文件操作等。Node.js提供了丰富的模块和库，使得开发者可以轻松构建各种类型的后端应用。

Vue.js与Node.js之间的关系：

1. 前后端分离开发: 在现代Web开发中，通常采用前后端分离的架构。Vue.js用于构建前端用户界面，而Node.js用于构建后端服务器和API。Vue.js发送HTTP请求到Node.js****后端，后端处理请求并返回数据，前端再将数据渲染到页面上。
2. 全栈开发: 有些开发者同时具备前端和后端开发的能力，他们可以在同一个项目中使用Vue.js和Node.js。例如，使用Vue.js构建前端界面，同时使用Node.js构建后端服务和API**，这样可以更好地协同开发和部署。**
3. 构建SSR**（服务器端渲染）应用: Vue.js和Node.js也可以一起用于构建服务器端渲染（SSR****）的应用。Node.js作为后端服务器，用于渲染Vue组件并返回已渲染的HTML页面给客户端，这种方式可以提高应用的首屏加载速度和SEO优化。**

阿里云虚拟机（ECS**）：**

阿里云虚拟机，也称为Elastic Compute Service**（ECS****），是阿里云提供的一种弹性计算服务，它可以让你在云端轻松创建和管理虚拟机实例，以运行各种类型的应用程序。**

主要特点：

1. 弹性和可扩展性：你可以根据实际需求随时增加或减少虚拟机实例的数量，以应对流量的变化和应用的需求。
2. 灵活的配置选项：阿里云虚拟机提供了各种不同类型和规格的实例供选择，以满足不同应用场景的需求。你可以选择CPU**、内存、存储等配置来配置虚拟机实例。**
3. 安全可靠：阿里云虚拟机提供了安全加固、网络隔离、数据加密等安全功能，保障你的应用数据的安全和隐私。
4. 弹性网络：你可以灵活配置网络规则、访问控制和安全组等网络设置，以确保你的虚拟机实例能够安全、高效地与其他资源通信。
5. 全球部署：阿里云虚拟机支持全球范围内的多个地域和可用区，你可以根据用户分布和应用需求选择合适的地域来部署虚拟机实例，提供更快的访问速度和更稳定的服务。

Nginx**：**

Nginx是一个高性能的开源HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器。它被设计用来处理高并发的网络流量，并提供了许多高级功能和配置选项，使其成为构建可靠、安全和高效的Web服务的理想选择。

主要特点：

1. 高性能：Nginx采用了事件驱动、异步非阻塞的架构，能够高效处理大量并发请求，适用于高负载的Web服务场景。

2. 反向代理：Nginx可以作为反向代理服务器，接收客户端的请求并转发到后端的应用服务器，提供负载均衡、缓存、SSL终端等功能，从而提高网站的性能和可靠性。

3. 静态文件服务：Nginx****可以直接提供静态文件的服务，无需转发请求到应用服务器，加快了静态资源的访问速度。

4. 高度可定制性：Nginx****提供了丰富的配置选项和模块化的架构，使得用户可以根据自己的需求灵活定制和扩展服务器功能。

5. 负载均衡：Nginx支持基于轮询、IP哈希、最少连接等算法的负载均衡，可以将请求分发到多个后端服务器上，提高系统的稳定性和可用性。

6. 动态模块加载：Nginx支持动态模块加载，用户可以根据需要动态加载或卸载模块，而无需重新编译和部署Nginx服务器。

7. 高级的安全功能：Nginx提供了许多安全功能，如访问控制、防盗链、DDoS防护等，可以保护Web****服务器免受各种网络攻击。

8. 安装Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，用于构建服务器端应用程序。

步骤：

1. 访问Node.js****官网: 打开浏览器并访问Node.js官网。

1. 下载安装程序: 根据你的操作系统选择适用的安装程序。一般情况下，Node.js提供了适用于Windows、macOS和Linux的安装程序。选择与你操作系统相匹配的版本，并点击下载。

在这里我根据自己电脑的情况选择在winodws下的64位安装包

这里的下载过程一般会比较慢，需要耐心等待，也可以选择通过其他方式下载vue.js的安装包，但需要注意其安全性。

1. 运行安装程序: 下载完成后，运行安装程序。在Windows上，你将看到一个安装向导；在macOS上，你将看到一个.pkg文件；在Linux上，你可能需要使用包管理器（如apt或yum）进行安装。

2. 按照提示安装: 安装过程中，你可能需要接受许可协议、选择安装路径等。根据向导的提示逐步完成安装过程。

3. 验证安装: 安装完成后，打开命令行终端（Windows用户可以使用PowerShell或命令提示符），输入以下命令来验证Node.js和npm（Node.js包管理器）是否成功安装：

node -v npm -v

如果成功安装，将会显示Node.js和npm的版本号。

3. 全局安装Vue CLI (脚手架工具)

Vue CLI是Vue.js的官方脚手架工具，用于快速搭建Vue.js项目。

步骤：

1. **打开命令行/**终端: 打开命令行终端。

1. 执行全局安装命令: 在命令行中输入以下命令，以全局安装Vue CLI：

npm install -g @vue/cli

这会将Vue CLI安装到全局环境中，使其可以在任何目录下使用。

1. 等待安装完成: 安装过程可能需要一些时间，取决于你的网络连接速度和计算机性能。

当出现added等等消息的时候就是已经安装好了

1. 验证安装: 安装完成后，你可以输入以下命令来验证Vue CLI是否成功安装：

vue --version

如果成功安装，将会显示Vue CLI的版本号。

4. 创建一个新的Vue项目

使用Vue CLI可以快速创建一个新的Vue.js项目。

步骤：

1. 执行创建命令: 在命令行中执行以下命令来创建新的Vue项目：

vue create my-vue-app

其中，my-vue-app是你想要创建的项目名称，你可以根据实际情况修改。

1. 选择配置选项: 执行命令后，Vue CLI会提示你选择一些配置选项。你可以使用上下箭头键来浏览选项，并使用回车键来选择。通常，你可以选择默认配置，但也可以手动选择特性和插件。

这个警告是因为你正在使用的Node.js版本中的"punycode"模块已经被弃用了。你可以选择使用一个"用户地"的替代方案来替代它。不过，这个警告不会影响你创建Vue应用程序。

至于npm registry连接速度较慢的提示，这是因为你当前连接的npm registry可能速度较慢。提示建议你切换到一个更快的镜像站点来加快安装速度。通常情况下，使用提供了更快速度的镜像站点是一个好主意。

如果你愿意切换到更快的npm registry镜像，你可以按照提示输入"Y"，然后按下回车。这样npm将使用提供更快速度的镜像站点来安装依赖。如果你不想切换，可以输入"N"，然后按下回车。

所以，你可以根据你的偏好选择"Y"或者"N"来继续。

在这里，Vue CLI 提供了几个预设选项供你选择，以便快速设置你的 Vue 项目。以下是每个选项的简要说明：

1. Default ([Vue 3] babel, eslint):
   • 这是默认的预设选项，使用 Vue 3 版本。它包含了 Babel 和 ESLint 插件，用于将 Vue 代码编译成向后兼容的 JavaScript 代码，并进行代码风格检查。
2. Default ([Vue 2] babel, eslint):
   • 同样是默认的预设选项，但使用的是 Vue 2 版本。它也包含了 Babel 和 ESLint 插件，用于编译和检查 Vue 2 代码。
3. Default (Vue 3) Manually select features:
   • 与第一个选项类似，但提供了手动选择功能的选项。这使你可以在下一步中手动选择你想要的功能和插件。

你可以使用键盘的上下箭头键选择你想要的预设选项，然后按下回车键确认选择。根据你的选择，Vue CLI 将会为你创建一个相应配置的 Vue 项目。

完成选择之后就会开始安装。

1. 等待项目创建: 选择完配置选项后，Vue CLI会开始创建项目并安装依赖。这可能需要一些时间，取决于你的网络连接速度和计算机性能。

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

[外链图片转存中…(img-uDNMRasG-1715871075299)]
[外链图片转存中…(img-kOjERpqK-1715871075300)]