2024年Web前端最新vue项目初始化和部署(1)，Web前端岗大厂面试官常问的那些问题

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

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

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会开始创建项目并安装依赖。这可能需要一些时间，取决于你的网络连接速度和计算机性能。

现在我们的第一个vue项目成功的安装好了。

这就是咱们第一个vue项目的结构。

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

Nginx是一个高性能的HTTP和反向代理服务器，用于将请求转发到后端服务器或处理静态资源。

首先，我们需要先在阿里云平台上拥有一台虚拟机。

第一步，登录阿里云官网

选择免费试用，点击第一个云服务器ECS，立即试用

这一步需要进行身份验证，在这里我选择个人验证。

点击授权之后使用支付宝扫码登录即可。

之后再次点击试用，就可以开始配置界面了。

这里我选择了2核4G，ubuntu操作系统，

之后点击立即试用即可，需要等待一段时间。

成功！

之后登录到虚拟机，更新包列表: 执行以下命令来更新系统的包列表，以获取最新的软件信息：

sudo apt update

1. 安装Nginx: 执行以下命令来安装Nginx：

sudo apt install nginx

1. 验证安装: 安装完成后，Nginx会自动启动。你可以使用以下命令检查其状态：

sudo systemctl status nginx

如果Nginx正在运行，状态将显示为active（运行）。

1. 配置Nginx: Nginx的主要配置文件通常位于**/etc/nginx/nginx.conf**，而服务器块（用于定义网站配置）通常位于**/etc/nginx/sites-available/**。你需要编辑这些文件来配置Nginx以服务你的Vue应用。

2. 将Vue项目打包部署到Nginx下

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-TJHFH4vZ-1715441013220)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-XZanQvnC-1715441013220)]