一、初识 nuxt

1、Nuxt 简介

  Nuxt 是一个构建于 Vue 生态系统之上的全栈框架，它为编写 Vue SSR 应用提供了丝滑的开发体验。

  当然跟随时代，当前笔记记录的是 Nuxt3。

• Nuxt2 (opens new window)（Vue2）
• Nuxt3 (opens new window)（Vue3）

  可以看下图感受一下 nuxt 的发展 (opens new window)：

2、与 Vue 生态

  在我们常用的 Vue 库或工具中，大多都要关于 SSR 的相关描述：

• vue3：服务端渲染 (SSR) (opens new window)
• vue-rotuer@4：新的 history 配置取代 mode (opens new window)
• pinia：服务端渲染 (SSR) (opens new window)

3、Vue3 SSR 🎈

  根据 vue3 官网对 SSR 的相关支持描述，可以写一个示例应用完整 🎈：vue3-express-webpack (opens new window)

下图就展示了 vue3 中实现 SSR 的两个重要组成：rendering(渲染)、hydration(水合)

• rendering 渲染：浏览器会在下载在服务端渲染好的 HTML 文档
• hydration 水合：使浏览器中的静态页面具有交互性称为“Hydration”

注意

  为了保持 SPA 的优点（动态界面和页面转换），浏览器会在下载 HTML 文档后在后台加载在服务器上运行的 JavaScript 代码代码，浏览器再次解释它，Vue.js 控制文档并启用交互性

二、Nuxt 框架

1、安装

  执行以下命令（可能会报错，具体查看issue (opens new window)）：

官方成员的查出的原因是：@Pi0 (opens new window)，可能后续会解决吧 🤔

临时解决方案

  查看报错原因（@danielroe (opens new window)）：

node -e "require('https').get('https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json')"

  在电脑的 hosts 文件中追加：

185.199.108.133 raw.githubusercontent.com

  然后执行 nuxt 安装命令即可（注意：如果你使用了 VPN 的话，请先关闭）。

npx nuxi@latest init nuxt-demo  # 要求node版本不低于 v18.0.0

2、项目结构

  按照 Nuxt 的规定，完整的项目文件结构如下：

Directory Structure
├─ .nuxt
├─ .output
├─ assets
├─ components
├─ composables
├─ content
├─ layouts
├─ middleware
├─ modules
├─ node_modules
├─ pages
├─ plugins
├─ public
├─ server
├─ utils
├─ .env
├─ .gitignore
├─ .nuxtignore
├─ app.config.ts
├─ app.vue
├─ nuxt.config.ts
├─ package.json
└─ tsconfig.json

3、认知路线 ✨

• Configuration

配置/变量：nuxt.config.ts、.env、app.config.ts

• Views