# 一、初识 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