Web Course 2 - 基础：理论基础、什么是 Nuxt？

Web 开发的历史

这一课的标题叫「什么是 Nuxt ？」，可是在此之前，我想插队一节，关于 Web 开发的技术演进，在此我们可以看一下以前的技术长什么样

有一个关键词，叫做「前端发展史」，已经有很多人总结过了，感兴趣的同学可以搜搜看（比如 https://juejin.cn/post/7116326329313656869、 https://github.com/woai3c/Front-end-articles/blob/master/history.md）

其实「前端」这个岗位，乃至于这个概念，都是比较新的

• 最开始，这一块并未细分，一般是后端工程师的活，页面随便整一下，最多搞个表格，把信息展示了就算完

• 后来，由于对页面的排版或者美观性，有了那么一点点的追求，并且当时的 Photoshop（你没听错），可以切片并导出为 html 页面，所以有了设计师这个岗位（也叫美工），把设计后的导出物压缩打包给后端，放到自己的 jsp、asp、php 等代码 response 结果中套模版，这是个古老的技术，感兴趣的同学可以看这里：https://www.uisdc.com/photoshop-slice-tool。我没想到 2014 年还有类似的教程在产出，也许导出的 html 代码更规范了吧

• 再后来，由于设计师没有任何编码技术，所以切片经常出现不好用，和后端开发人员协调效率较低的情况，于是出现了设计师跟前端开发人员的分离：设计师只出设计稿，不涉及导出为代码；前端根据设计稿，还原为静态 html、css 的代码，之后再给后台人员套模版。到此时，很多前端开发人员的技术仅仅停留在 html（结构）、css（样式）开发，并不涉及 Javascript（页面交互）知识（这一部分也仅仅是为了用户体验做点前端界面上的表单验证和报错信息展示，还是会由后端开发人员来代劳），我们俗称“切图仔”、“页面仔”，也就是最狭义的前端开发人员

• 一个重要的拐点出现在 Ajax 技术大发展以后，代表性的 Web App 是 Gmail，它刚出来的时候实在是惊艳，因为所有的操作都可以在一个页面上完成，而不需要跳转任何页面（到现在，这样的 Web App 大家已经习以为常了） 。一改之前所有的页面都需要重新跳转到一个全新的 url 或者需要刷新整个页面的状况，“用户体验”这个词在此后才经常被提及。从这个时候开始，前后端分离逐渐从最前沿的潮流变成了基本操作

• 此时 Javascript 还是个比较难用的东西，当时浏览器也多，不同品牌、不同版本对 Javascript 的支持度都不一样，直到有个叫做 jQuery 的库出现，一统江湖，jQuery 提供了一个统一的接口，只要你项目中引用了它，就可以只了解 jQuery 提供的语法和 api，而无需太多考虑任何开发和浏览环境的差异（至少从 Javascript 执行本身是如此）。jQuery 一直到现在都是一个使用比较广泛的库，感兴趣的同学可以去它的官网查看：https://jquery.com/

• Chrome 的出现再次改变了格局，特别是其内核 Webkit 逐渐成为了事实标准以后，HTML5、CSS3、ES6、Typescript 标准出来，以及一系列先进的前端开发框架出现，使前端这个最开始可有可无的岗位逐渐发展成了一个产业，前端内部也出现了更详细的分工，比如出现了只写 html、css 和只写 Javascript 的前端

• 基于 Chrome V8 引擎的 nodejs 出现以后，出现了大量工具链。一时间百花齐放，野蛮生长，到了目前，前端框架剩下 React 和 Vue 这两大主要阵营（个人认知，其他框架粉丝勿喷😂），发展到现在，基本上不相上下、各有优劣。我之所以选择以 Vue 技术栈为主，初期的原因是他对 html、css 原生标准相对尊重，侵入性较小，但是到了后期，Vue3 和 React 之间也越来越接近了，也是互相竞争和借鉴的结果吧

• 并且，由于 Nodejs 可以开发后台 service，但是使用的语言却是 Javascript（也可以是 Typescript），以前的前端上手很快，很快，就出现了既可以写前端页面、又能写 Nodejs 服务的「大前端」的概念和岗位，逐渐把（部分）公司中的后端挤到了更加接近底层的开发层面。可能这种大前端，在很多地方更被熟知为「全栈」，不过我个人看法这还只能局限在 Web 开发的层面，只有对整个大的系统都有涉及，并且一个人就可以实现整个前后端架构的设计、开发、测试、交付和维护，才可以称之为全栈（我在个人介绍里说自己是全栈，多少有点吹牛的成分，只能说，实现了一部分吧，毕竟要做点包装，不能太实诚了，还请大家包含😁）

• 而现在，工具链已经非常的完善了，还出现了把前后端耦合到一起的 Nuxt、Next 解决方案，也就是实现了一个前端项目从后台到前端到样式

• ✨ 这是我在 2017 年入职前一家公司时，做的关于自己岗位职责介绍的 PPT，现在看起来，应该能概括那个阶段的技术架构

  keynote.pdf

  keynote.pdf

当时，上述技术栈都需要自己一个个去组合、配置，还没有脚手架和 boilerplate 的概念（或者说还非常的原始）

但到底什么是 Nuxt ？

这个关子卖的太大了，讲到了现在，还是应该言归正传

Nuxt 和 Next 究竟是什么，我觉得应该首先去看他们自己怎么说

• 「Nuxt」官网 https://nuxt.com/

  Nuxt 是一个开源框架，可使 Web 开发变得直观且功能强大。 自信地创建高性能、生产级的全栈 Web 应用和网站

  

  • Routing & Layouts: 基于文件的路由系统，用于构建复杂视图和界面，采用强大而传统的方法。
  • Data Fetching: 在服务器上运行的可组合函数，用于获取组件数据，让您能以不同方式渲染内容。
  • Assets & Style: 内置支持 CSS 模块、Sass、PostCSS、CSS-in-JS 等，用于图像、字体和脚本优化。
  • SEO & Meta Tags: 生产就绪且可被搜索引擎索引，同时为终端用户提供应用般的体验。
  • Middleware: 在渲染页面或一组页面之前运行自定义代码，如身份验证、本地化或 A/B 测试。
  • State Management: Nuxt 提供了一种简单方法来在组件之间共享响应式和 SSR 友好的状态。
  • Transitions: 在布局、页面和组件之间创建流畅过渡，内置支持 Vue 和浏览器过渡。
  • Error Handling: 内置错误处理和日志记录，帮助调试应用并提供更好的用户体验。
  • Layers: 通过另一个 Nuxt 应用扩展您的 Nuxt 应用，以重用组件、可组合项、布局、页面等。
  • Server Routes: 创建 API 端点和服务器路由，安全连接第三方服务并从前端消费。
  • Auto Imports: Nuxt 自动导入辅助函数、可组合项和 Vue API，无需显式导入即可在整个应用中使用。
  • TypeScript: Nuxt 提供有用的快捷方式，确保在编码时可以访问准确的类型信息。

• 「Next」官网 https://nextjs.org/

  用于 Web 的 React 框架。Next.js 被世界上一些最大的公司使用，它使您能够利用 React 组件的强大功能创建高质量的 Web 应用程序

  

  • Built-in Optimizations: 自动优化图像、字体和脚本，以改善用户体验和核心网页性能指标。
  • Dynamic HTML Streaming: 从服务器即时流式传输 UI，与 App Router 和 React Suspense 集成。
  • React Server Components: 添加组件时无需发送额外的客户端 JavaScript。基于最新的 React 特性构建。
  • Data Fetching: 使您的 React 组件异步化并等待数据。Next.js 支持服务器端和客户端数据获取。
  • CSS Support: 使用您喜欢的工具为应用程序设计样式，包括支持 CSS Modules、Tailwind CSS 和流行的社区库。
  • Client and Server Rendering: 灵活的渲染和缓存选项，包括按页面级别的增量静态再生成（ISR）。
  • Server Actions: 通过调用函数运行服务器代码。跳过 API。然后，轻松重新验证缓存数据并在一次网络往返中更新 UI。(https://www.youtube.com/watch?v=dDpZfOQBMaU)
  • Route Handlers: 构建 API 端点以安全地连接第三方服务，用于处理身份验证或监听 webhooks。
  • Advanced Routing & Nested Layouts: 使用文件系统创建路由，包括支持更高级的路由模式和 UI 布局。
  • Middleware: 控制传入请求。使用代码定义路由和访问规则，用于身份验证、实验和国际化。
  • Next.js 14: 将全栈的力量带到前端。阅读发布说明以了解更多。

激动人心的 Hello World 环节

课后作业

• 零基础的同学推荐先学完 《5-基础：开发有关的基本操作》 再做课后作业
• 本地启动一个 Nuxt 官方标准应用（Hello World）

作业心得分享区

这里要注意，安装命令中的 < 或者 > 是要去掉的，应该是类似下面这样的命令

npx nuxi@latest init project-name

上面这一步有时候因为众所周知的网络问题会失败，所以需要按这里配置 https://www.npmmirror.com/

npm config set registry https://registry.npmmirror.com

之后，可以不使用 npx，改用 npm 手动收工安装的方式

# 第一步：
npm install -g nuxi@latest

# 第二步：npm
nuxi init <my-app>

#第三步：
cd my-nuxt-app && npm install

需要注意：githubusercontent.com 这个域名要加到 🪜 的 proxy 列表里（也可以参考这个 https://juejin.cn/post/7364785558800957450）

最终，如果实在不行，大家直接在这里 https://github.com/justincourses/nuxt-base

⚠️ 该仓库可按不同 tag 来下载安装了不通插件的版本（https://github.com/justincourses/nuxt-base/tags）

Tag	Nuxt	Nuxt UI	Nuxt Content	最新扩展
pure-nuxt	✅	🈚️	🈚️	🈚️
nuxt-ui	✅	✅	🈚️	🈚️
nuxt-content	✅	✅	✅	🈚️
latest	✅	✅	✅	✅

下载我初始化好的压缩包 https://github.com/justincourses/nuxt-base/archive/refs/heads/main.zip

解压以后，cd 到目录下，运行 npm install，再运行 git init，就可以进行后续的操作了

如果我们本地没有 git，则可能需要先安装：

• 安装包方式：https://git-scm.com/downloads

• macOS 下安装 Git 的多种方式

  在 macOS 上安装 Git 有多种方式，以下介绍几种常见的方法：

  方法1：通过 Xcode 命令行工具安装（推荐）

  macOS 自带 Git，只需安装 Xcode 的命令行工具即可。

  步骤：

  1. 打开终端 (Terminal)。

  2. 输入以下命令：

  xcode-select --install

  3. 弹出窗口提示是否安装命令行工具时，点击“安装”。

  4. 安装完成后，验证 Git 是否可用：

  git --version

  方法2：通过 Homebrew 安装

  如果你已经安装了 Homebrew，这是最方便的安装方式。

  步骤：

  1. 打开终端。

  2. 更新 Homebrew：

  brew update

  3. 安装 Git：

  brew install git

  4. 验证安装：

  git --version

  方法3：从官网下载安装包

  如果你不想用命令行，也可以从 Git 官网下载并安装。

  步骤：

  1. 前往 Git 官网。

  2. 下载适用于 macOS 的安装包。

  3. 打开下载的 .dmg 文件，并按照提示安装。

  4. 安装完成后，在终端输入以下命令查看版本：

  git --version

  配置 Git 用户信息

  安装完成后，你还需要配置用户信息以正常使用 Git。

  配置命令：

  git config --global user.name "你的名字"

  git config --global user.email "你的邮箱"

  查看配置：

  git config --list

  这几种方法都可以帮助你快速安装和使用 Git。如果你有 Homebrew，第二种方法会更快捷。

• 部分报错问题及解决方案 @Liu Jie

  如果运行“npx nuxi@latest init web-course-1”的时候出现“The requested module 'node:util' does not provide an export named 'aborted'”，可以改变node版本，从18升级到22，报错消失。

  如果访问"http://localhost:3000"时，终端报错“Pre-transform error: path should be a path.relative()d string, but got "e:/dir1/dir2/web-course-1/plugin-vue:export-helper"”，同时浏览器页面报错如图，可以换一个终端执行“npm run dev”，比如更换为PowerShell不会报错，Cmder终端下会报错。

  

• 关于新建 Nuxt 项目时的命令 @博喻

  Q：新建nuxt项目，在终端运行npx nuxi@latest init

• 关于 HTML 标签的补充知识

  https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

  

• Windows 中创建和访问目录的方法

  在 Windows 中通过命令行操作

  创建和访问 D 盘的 projects 目录，并在其下创建 web-course-1 目录的命令：

  1. 打开命令提示符（cmd）：

     • 按下 Win + R 键，输入 cmd，然后按 回车。

  2. 输入以下命令：

     D:
     mkdir projects
     cd projects
     mkdir web-course-1
     
     

     命令的功能解析：

     • D:：切换到 D 盘。
     • mkdir projects：创建名为 projects 的目录。
     • cd projects：进入 projects 目录。
     • mkdir web-course-1：在 projects 目录中创建名为 web-course-1 的目录。

  3. 如果已经存在 projects 目录，可直接跳过第一步 mkdir projects，只需要进入该目录即可。

  ---

  在图形界面操作

  1. 进入 D 盘：
     • 打开文件资源管理器（快捷键 Win + E）。
     • 点击左侧导航栏中的 D 盘。
  2. 创建 projects 目录：
     • 在 D 盘的空白区域右键 → 选择 新建 → 文件夹。
     • 将文件夹命名为 projects。
  3. 进入 projects 目录并创建 web-course-1：
     • 双击打开 projects 文件夹。
     • 再次右键 → 新建 → 文件夹，命名为 web-course-1。

  通过以上方法，可以轻松创建并访问指定的目录。

自学推荐

• 对于零基础的同学，建议先看一下这一篇，主要是需要可以辨识各种不同的数据类型、数据结构，知道他们之间的差异，这样我们后面的课程中一些概念比较容易理解：
  • 核心（必看这一页）：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures
  • 辅助（关于数据类型）：https://wangdoc.com/javascript/types/general
  • 进阶（有余力选看）：https://es6.ruanyifeng.com/#README
• 有基础的同学，可以看一下 Vue 的文档，因为 Nuxt 中写页面会使用到。这个官方 Tutorial（一共只有 15 个小例子，应该很快可以看完）：
  • https://vuejs.org/tutorial/#step-1