Nuxt.js 详解一Vue 开发者为什么要关注 Nuxt这是 Nuxt 系列的第一篇。如果你已经在用 Vue 开发但对要不要上 Nuxt还有疑问这篇文章帮你把认知理清楚。一、从一个真实场景说起假设你用 Vue 写了一个内容站——博客、电商商品页、文档站都行。项目跑起来了功能没问题。然后你遇到三个怎么也绕不过去的坎首屏白屏用户打开页面先盯着空白屏幕看两秒等 JS 加载完才渲染出内容。SEO 糟糕百度、Google 的爬虫来抓页面看到的是一个空div idapp/div内容全靠 JS 渲染爬虫根本抓不到。想写个接口得另起后端前端 Vue 后端 Express/Node两个项目两套部署维护成本翻倍。这三个问题Nuxt 全都帮你解决了。而且解决的方式不是给你一个插件而是从框架层面重新设计。二、Nuxt 究竟是什么一句话定义Nuxt 是基于 Vue 的全栈框架。它在 Vue 之上封装了服务端渲染、路由系统、布局系统、自动导入、后端接口能力让你用一个项目就能搞定从前端到后端的完整 Web 应用。打个比方Vue 是发动机Nuxt 是整辆车。你当然可以自己买发动机、配底盘、装轮子用 Vite Vue Vue Router Pinia 手搭但 Nuxt 直接给你一辆装配好的车钥匙一拧就能开。目前主流版本是Nuxt 3底层基于 Vite 构建服务端引擎用 Nitro。三、Nuxt 的核心能力1. 服务端渲染SSRVue 默认是客户端渲染CSR浏览器下载空 HTML JS bundle在浏览器里执行 JS 渲染页面。Nuxt 开启 SSR 后用户请求 URL服务器先把 Vue 组件渲染成 HTML 字符串直接返回一个有内容的页面。浏览器拿到 HTML 就能立刻显示然后再注水hydration把交互事件绑定上去。效果首屏从白屏两秒变成秒开爬虫抓到的是完整 HTMLSEO 直接解决。2. 静态站点生成SSG如果你的内容不常变博客、文档站Nuxt 可以在构建时把每个页面预渲染成静态 HTML 文件。部署到任何静态服务器Nginx、CDN即可性能极好成本极低。3. 混合渲染这是 Nuxt 最灵活的地方——同一个项目里不同路由可以用不同渲染模式。比如首页、商品详情页走 SSR需要 SEO、实时数据关于我们走 SSG静态内容后台管理走 CSR不需要 SEO某些页面走 ISR增量静态再生定时更新// nuxt.config.tsexportdefaultdefineNuxtConfig({routeRules:{/:{prerender:true},// 静态预渲染/products/**:{swr:3600},// 1小时增量缓存/admin/**:{ssr:false},// 纯客户端/news/**:{isr:true},// 增量静态再生}})一段配置搞定不用为不同渲染模式维护多个项目。4. 约定式路由Vue 里你要手动写路由配置// Vue Router 手动配置constroutes[{path:/,component:()import(./views/Home.vue)},{path:/about,component:()import(./views/About.vue)},{path:/user/:id,component:()import(./views/User.vue)},]Nuxt 里你只要在pages/目录放文件路由自动生成pages/ ├── index.vue → / ├── about.vue → /about └── user/ └── [id].vue → /user/:id删掉一整块路由配置代码少维护一个文件。5. 自动导入在 Vue 里你每个文件都要 import!-- Vue每个文件都要 import -- script setup import { ref, computed } from vue import MyButton from /components/MyButton.vue import { useUserStore } from /stores/user /scriptNuxt 自动导入 Vue API、components/下的组件、composables/下的组合式函数!-- Nuxt直接用不用 import -- script setup const count ref(0) // ref 自动导入 const double computed(() count.value * 2) // computed 自动导入 const user useUserStore() // composables/ 下自动导入 /script template MyButton clickcount / !-- components/ 下自动导入 -- /template少打字多干活。6. 全栈能力server/apiNuxt 项目自带server/目录直接写后端接口不用单独起 Express// server/api/users.get.tsexportdefaultdefineEventHandler(async(event){constusersawaitdb.user.findMany()returnusers})前端调用const{data}awaituseFetch(/api/users)一个项目前后端通吃。部署也只需要一个进程。7. SEO 与 head 管理script setup // 自动设置页面 title、meta 标签SSR 时渲染到 HTML useSeoMeta({ title: 商品详情 - 我的商城, ogTitle: 商品详情, description: 这是一款优质商品, ogImage: https://example.com/cover.jpg }) /script爬虫和社交分享都能拿到正确的 meta 信息。四、渲染模式对比模式全称首屏速度SEO服务器成本适用场景CSR客户端渲染慢差无后台管理系统SSR服务端渲染快好高电商、内容站SSG静态生成最快好无博客、文档站混合Hybrid按需按需按需大型应用五、Nuxt vs 纯 VueVite Vue维度纯 VueNuxt渲染仅 CSRSSR / SSG / CSR / 混合路由手动配置文件约定式组件导入手动 import自动导入后端接口需另起服务内置 server/apiSEO差好首屏慢快学习成本低中灵活度高约定优先简单说小项目、后台管理用纯 Vue 就够了内容站、对 SEO 和性能有要求的项目Nuxt 值得用。六、Nuxt vs Next.jsNuxtVue 生态语法是 Vue 的.vue单文件组件Next.jsReact 生态JSX 语法两者设计理念类似都是全栈 SSR 框架选哪个主要看你团队用 Vue 还是 React。七、什么时候用 Nuxt推荐用内容驱动型网站博客、新闻、文档电商网站需要 SEO 首屏快需要前后端一体的小到中型项目对首屏性能有要求的 C 端应用没必要用内部后台管理系统不需要 SEO首屏要求不高纯工具型 Web App如在线编辑器、设计工具团队完全不想碰 Node 服务端部署八、结语Nuxt 不是要取代 Vue而是在 Vue 之上加了一层工程化封装。你的 Vue 知识在 Nuxt 里完全用得上——.vue组件、Composition API、script setup语法全都一样。Nuxt 做的是把你自己要搭的那些东西提前帮你装好了。下一篇我们会从零开始搭建一个 Nuxt 项目走完从创建到部署的完整流程。本系列共三篇第一篇Vue 开发者为什么要关注 Nuxt本文第二篇从零搭建一个 Nuxt 项目第三篇迁移踩坑与最佳实践
Nuxt.js 详解（一）：Vue 开发者为什么要关注 Nuxt
Nuxt.js 详解一Vue 开发者为什么要关注 Nuxt这是 Nuxt 系列的第一篇。如果你已经在用 Vue 开发但对要不要上 Nuxt还有疑问这篇文章帮你把认知理清楚。一、从一个真实场景说起假设你用 Vue 写了一个内容站——博客、电商商品页、文档站都行。项目跑起来了功能没问题。然后你遇到三个怎么也绕不过去的坎首屏白屏用户打开页面先盯着空白屏幕看两秒等 JS 加载完才渲染出内容。SEO 糟糕百度、Google 的爬虫来抓页面看到的是一个空div idapp/div内容全靠 JS 渲染爬虫根本抓不到。想写个接口得另起后端前端 Vue 后端 Express/Node两个项目两套部署维护成本翻倍。这三个问题Nuxt 全都帮你解决了。而且解决的方式不是给你一个插件而是从框架层面重新设计。二、Nuxt 究竟是什么一句话定义Nuxt 是基于 Vue 的全栈框架。它在 Vue 之上封装了服务端渲染、路由系统、布局系统、自动导入、后端接口能力让你用一个项目就能搞定从前端到后端的完整 Web 应用。打个比方Vue 是发动机Nuxt 是整辆车。你当然可以自己买发动机、配底盘、装轮子用 Vite Vue Vue Router Pinia 手搭但 Nuxt 直接给你一辆装配好的车钥匙一拧就能开。目前主流版本是Nuxt 3底层基于 Vite 构建服务端引擎用 Nitro。三、Nuxt 的核心能力1. 服务端渲染SSRVue 默认是客户端渲染CSR浏览器下载空 HTML JS bundle在浏览器里执行 JS 渲染页面。Nuxt 开启 SSR 后用户请求 URL服务器先把 Vue 组件渲染成 HTML 字符串直接返回一个有内容的页面。浏览器拿到 HTML 就能立刻显示然后再注水hydration把交互事件绑定上去。效果首屏从白屏两秒变成秒开爬虫抓到的是完整 HTMLSEO 直接解决。2. 静态站点生成SSG如果你的内容不常变博客、文档站Nuxt 可以在构建时把每个页面预渲染成静态 HTML 文件。部署到任何静态服务器Nginx、CDN即可性能极好成本极低。3. 混合渲染这是 Nuxt 最灵活的地方——同一个项目里不同路由可以用不同渲染模式。比如首页、商品详情页走 SSR需要 SEO、实时数据关于我们走 SSG静态内容后台管理走 CSR不需要 SEO某些页面走 ISR增量静态再生定时更新// nuxt.config.tsexportdefaultdefineNuxtConfig({routeRules:{/:{prerender:true},// 静态预渲染/products/**:{swr:3600},// 1小时增量缓存/admin/**:{ssr:false},// 纯客户端/news/**:{isr:true},// 增量静态再生}})一段配置搞定不用为不同渲染模式维护多个项目。4. 约定式路由Vue 里你要手动写路由配置// Vue Router 手动配置constroutes[{path:/,component:()import(./views/Home.vue)},{path:/about,component:()import(./views/About.vue)},{path:/user/:id,component:()import(./views/User.vue)},]Nuxt 里你只要在pages/目录放文件路由自动生成pages/ ├── index.vue → / ├── about.vue → /about └── user/ └── [id].vue → /user/:id删掉一整块路由配置代码少维护一个文件。5. 自动导入在 Vue 里你每个文件都要 import!-- Vue每个文件都要 import -- script setup import { ref, computed } from vue import MyButton from /components/MyButton.vue import { useUserStore } from /stores/user /scriptNuxt 自动导入 Vue API、components/下的组件、composables/下的组合式函数!-- Nuxt直接用不用 import -- script setup const count ref(0) // ref 自动导入 const double computed(() count.value * 2) // computed 自动导入 const user useUserStore() // composables/ 下自动导入 /script template MyButton clickcount / !-- components/ 下自动导入 -- /template少打字多干活。6. 全栈能力server/apiNuxt 项目自带server/目录直接写后端接口不用单独起 Express// server/api/users.get.tsexportdefaultdefineEventHandler(async(event){constusersawaitdb.user.findMany()returnusers})前端调用const{data}awaituseFetch(/api/users)一个项目前后端通吃。部署也只需要一个进程。7. SEO 与 head 管理script setup // 自动设置页面 title、meta 标签SSR 时渲染到 HTML useSeoMeta({ title: 商品详情 - 我的商城, ogTitle: 商品详情, description: 这是一款优质商品, ogImage: https://example.com/cover.jpg }) /script爬虫和社交分享都能拿到正确的 meta 信息。四、渲染模式对比模式全称首屏速度SEO服务器成本适用场景CSR客户端渲染慢差无后台管理系统SSR服务端渲染快好高电商、内容站SSG静态生成最快好无博客、文档站混合Hybrid按需按需按需大型应用五、Nuxt vs 纯 VueVite Vue维度纯 VueNuxt渲染仅 CSRSSR / SSG / CSR / 混合路由手动配置文件约定式组件导入手动 import自动导入后端接口需另起服务内置 server/apiSEO差好首屏慢快学习成本低中灵活度高约定优先简单说小项目、后台管理用纯 Vue 就够了内容站、对 SEO 和性能有要求的项目Nuxt 值得用。六、Nuxt vs Next.jsNuxtVue 生态语法是 Vue 的.vue单文件组件Next.jsReact 生态JSX 语法两者设计理念类似都是全栈 SSR 框架选哪个主要看你团队用 Vue 还是 React。七、什么时候用 Nuxt推荐用内容驱动型网站博客、新闻、文档电商网站需要 SEO 首屏快需要前后端一体的小到中型项目对首屏性能有要求的 C 端应用没必要用内部后台管理系统不需要 SEO首屏要求不高纯工具型 Web App如在线编辑器、设计工具团队完全不想碰 Node 服务端部署八、结语Nuxt 不是要取代 Vue而是在 Vue 之上加了一层工程化封装。你的 Vue 知识在 Nuxt 里完全用得上——.vue组件、Composition API、script setup语法全都一样。Nuxt 做的是把你自己要搭的那些东西提前帮你装好了。下一篇我们会从零开始搭建一个 Nuxt 项目走完从创建到部署的完整流程。本系列共三篇第一篇Vue 开发者为什么要关注 Nuxt本文第二篇从零搭建一个 Nuxt 项目第三篇迁移踩坑与最佳实践
