# 一、初识 nuxt

# 1、Nuxt 简介

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

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

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

# 2、与 Vue 生态

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

# 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.envapp.config.ts

  • Views
更新于 : 8/7/2024, 2:16:31 PM