2024年最全Nuxt(2)，2024Web前端高级面试题总结

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

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

HTML 和 CSS：

• 创建项目，确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：

$ npx create-nuxt-app <项目名>

$ npm create nuxt-app <项目名>

$ yarn create nuxt-app <项目名>

或者用 yarn ：

$ yarn create nuxt-app <项目名>

我这里用 npx 创建一个测试项目，例如：

$ npx create-nuxt-app nuxt-test

// 进入到文件夹，执行创建项目命令

dengzemiaodeMacBook-Pro:test dengzemiao$ npx create-nuxt-app nuxt-test

create-nuxt-app v3.5.2

✨ Generating Nuxt.js project in nuxt-test

// 项目初始配置，自己看着选，用什么选什么 不懂就选 None，后面也可以装的。

? Project name: nuxt-test

? Programming language: JavaScript

? Package manager: Npm

? UI framework: None

? Nuxt.js modules: Axios - Promise based HTTP client

? Linting tools: (Press to select, to toggle all, to invert sele

ction)

? Testing framework: None

? Rendering mode: Universal (SSR / SSG)

? Deployment target: Server (Node.js hosting)

? Development tools: jsconfig.json (Recommended for VS Code if you’re not using

typescript)

? What is your GitHub username? dengzemiao

? Version control system: None

…等待一段时间，就会提示创建项目成功

🎉 Successfully created project nuxt-test

// 如果是开发中，运行 npm run dev 就可以，开发者模式

To get started:

cd nuxt-test

npm run dev

// 如果是需要发布到线上了，需要先 build 在 start 才能正式发布

To build & start for production:

cd nuxt-test

npm run build

npm run start

四、Nuxt.js 本地运行

• 这篇文章只讲 创建项目 到 发布服务器，以及服务器怎么部署才能通过服务器访问，其他项目细节配置放在其他文章中去写。

• 创建完成项目之后，可以先运行项目一下，用上面 To get started 或 To build & start for production 中的方式运行起来项目，只是前者是 development 模式，后者是 production 模式。

dengzemiaodeMacBook-Pro:test dengzemiao$ cd nuxt-test

dengzemiaodeMacBook-Pro:nuxt-test dengzemiao$ npm run dev

nuxt-test@1.0.0 dev /Users/dengzemiao/Desktop/Project/web/test/nuxt-test

nuxt

╭───────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: development │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Listening: http://localhost:3000/ │

│ │

╰───────────────────────────────────────╯

然后通过上面的 http://localhost:3000/ 打开浏览器进行访问，但是这个是开发环境。

• 在 pages 里面的 .vue 文件都会被自动转成路由，文件夹也是一样。

• 例如：项目 pages 文件夹里面有个 index.vue 文件，它会被编译成 index.html，在路由中也就是 /index，可以尝试修改 index.vue 里面的内容，或者新建一个 .vue 文件进行测试内容。

• 例如：我在 pages 里面创建一个测试文件 dzm.vue，运行起来项目，访问的路径就是 http://localhost:3000/dzm

dzm 测试页面 {{ env }}

五、Nuxt.js 直接 ip 访问项目(正式和测试都适用)

• 运行开发环境 $ npm run dev

╭───────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: development │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Listening: http://localhost:3000/ │

│ │

╰───────────────────────────────────────╯

• 运行正式环境 $ npm run build + $ npm run start

╭──────────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: production │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Memory usage: 29.1 MB (RSS: 73.1 MB) │

│ │

│ Listening: http://localhost:3000/ │

│ │

╰──────────────────────────────────────────╯

• 通过上面的两个运行的结果，得到的地址都是 http://localhost:3000/，这个是固定本地 localhost:3000 才可以进访问，需要改成支持本地 ip 也能访问，也就是你拿到本机电脑的 ip 加上端口也能进行访问到，例如: http://10.0.93.169:3000

• 找到 nuxt.config.js，添加下面代码：

export default {

head: {…},

css: […],

// 配置服务器（主要是这个配置）

server: {

// port: 8000, // default: 3000

host: ‘0.0.0.0’, // default: localhost (推荐)

// host: ‘0’, // 等于 host: ‘0.0.0.0’ 这样配置，在mac上这么配置没问题，但是在window上这么配置有报错。

timing: false

},

再次运行项目，正式或测试都行，访问地址就会变成本机的 ip 地址加端口：

╭─────────────────────────────────────────╮

│ │

│ Nuxt @ v2.14.12 │

│ │

│ ▸ Environment: development │

│ ▸ Rendering: server-side │

│ ▸ Target: server │

│ │

│ Memory usage: 29.4 MB (RSS: 74 MB) │

│ │

│ Listening: http://10.0.93.169:3000 │

│ │

╰─────────────────────────────────────────╯

本地运行项目就到这里结束了，下面需要将项目发布到服务器运行起来。

四、Nuxt.js 上传服务器（Nginx + Node + PM2）

• 下面的这些操作如果需要测试，可以放在本地机器上进行搭建，把本地电脑当服务器使使。

• 服务器 安装 Nginx + Node + PM2。

• Nuxt.js 是依赖 Node，所以 服务器 需要安装 Node，装了 Node 就会自带 NPM，然后通过 NPM 安装 PM2:

$ npm install -g pm2

// 可以通过 -h 查询使用方式

$ pm2 -h

PM2 是 Node 的进程管理工具。为啥用这个？举个例子：运行项目之后，命令行窗口是不能关闭的，如果关闭了就无法访问这个项目地址了，所以需要支持关闭命令行窗口，运行的项目依然能够访问，也就是后台挂起进程，PM2 就可以做到这个事情。

• 安装好上面环境，在 Nginx 根目录里面通过 Git 拉下来 Nuxt.js 源码，可以新开文件夹存放也是可以的，随你自己

$ git clone xxxxx.git

// 如果存在代码就拉一下代码 保持最新

$ git pull

这里说一下，在网上搜一下会搜到很多只需要导入几个文件就可以运行项目的文章，但是这种方式有时候会出现 编译函数找不到、资源文件找不到 之类的问题，所以如果不是特别熟悉 Nuxt.js 的话，直接将整个项目拉下来使用，不需要去单独导入某些文件，这样也完美的避开一些细节上的坑，网上的文章一般都是推荐导入下面几个文件：

.nuxt

static

nuxt.config.js

package.json

package-lock.json

• 将代码拉到服务器后，需要先走一遍 npm 安装，安装一下依赖包

$ npm install

• 然后编译项目

$ npm run build

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容