一、前言

Nuxt4 现在算是前端非常主流的全栈框架了，基于 Vue3 + Vite 开发，最大的亮点就是约定式开发。用过原生 Vue 的都知道，新项目要配路由、配导入、搭目录，特别繁琐。但 Nuxt4 把这些都帮我们封装好了，固定的目录对应固定功能，新建文件就能自动生效，开发效率直接拉满，不管是做官网、SSR 渲染、还是全栈项目都非常合适。

这是本系列的第一篇入门内容，主打零基础上手。我会带着大家吃透 Nuxt4 的整体架构、常用目录作用、Vue3 核心语法和页面生命周期，完全贴合日常开发规范，新手也能轻松看懂。至于更细、更深的 TypeScript 语法，我后面会单独更一篇专项教程，专门补 TS 基础，本篇先专注学好 Nuxt4 本身。

二、Nuxt4 底层技术栈与核心设计思想

1. 底层技术栈

核心依托Vue3 + Vite：继承Vue3组合式API、TS类型约束优势，结合Vite极速编译、热更新特性，开发体验、打包性能远超传统Vue2项目。

2. 核心设计思想：约定式开发

Nuxt4 之所以快、好用、体验好，核心就是底层依托Vue3 + Vite + TS这套技术栈。Vue3 的组合式写法更灵活、代码更规整，TS 能帮我们规避很多类型报错，再加上 Vite 的极速热更新、秒启动，不管是开发体验还是打包性能，都比以前 Vue2 + Webpack 好太多。

而 Nuxt4 最精髓、和原生 Vue 最大的区别，就是约定大于配置。简单说就是：目录名是固定的、功能是固定的，不用自己手写各种复杂配置。你只要按照它的规则建文件夹、建文件，路由、导入、功能全部自动生效。这样最大的好处就是，团队所有人的项目结构统一，不会出现每个人写法、目录风格不一样的问题，非常适合团队协作开发。

这里顺带说下新手最舒服的学习顺序，循序渐进不容易踩坑：这里顺带说下新手最舒服的学习顺序，循序渐进不容易踩坑：先练基础响应式语法，再学自动路由，接着掌握组件封装、布局复用，然后自己封装通用逻辑，最后尝试写服务端接口，完成完整的前后端联调。

三、Nuxt4 项目基础核心结构

刚接触 Nuxt4 不用死磕复杂配置，只要把目录结构搞懂，就已经入门一半了。Nuxt4 的目录非常规范，每个文件夹各司其职，我简单通俗给大家讲清楚。

下面是完整的项目核心结构，日常开发 99% 的工作都在这些目录里完成：

nuxt4项目根目录 ├── app/ # 唯一核心业务文件夹 │ ├── pages/ # 页面 & 自动路由 │ ├── components/ # 全局组件 │ ├── layouts/ # 页面布局模板 │ ├── composables/ # 通用逻辑函数 │ ├── middleware/ # 路由守卫 │ ├── plugins/ # 全局插件 │ ├── assets/ # 样式资源 │ └── app.vue # 根入口文件 ├── server/ # 服务端接口目录 ├── shared/ # 前后端共用类型/工具 ├── public/ # 静态资源 └── nuxt.config.ts # 项目配置

各文件夹作用详解:

四、Script Setup + TS 基础核心语法

现在 Nuxt4 项目统一都用<script setup lang="ts">写法，也是官方推荐写法。最大的好处就是自动导入，ref、reactive、watch、useFetch 这些常用 API，完全不用手动导入，直接写就能用，日常开发省超多重复代码。

页面数据驱动，主要靠四个核心响应式 API：

ref主要用来存基础数据，比如数字、字符串、布尔值。定义之后在脚本里修改需要加 .value，页面模板里直接使用变量就行。

const count = ref<number>(0) count.value = 10

reactive用来存对象、数组这种复杂数据，适合用户信息、表单、列表数据。我们可以先用 TS 接口规范好数据结构，赋值修改不用写 .value，写法更自然。

computed是计算属性，用来根据已有数据自动生成新数据，自带缓存。比如根据单价和数量自动算总价，只有依赖的数据变了它才会重新计算，性能比直接写页面表达式更好。

watch是数据监听，用来监听数据变化。平时搜索框关键词联想、表单字段校验、数据变动后刷新接口，都是用它来实现的，数据一变就自动执行对应逻辑。

五、生命周期钩子

生命周期= 页面从创建 → 显示 → 更新 → 关闭的全过程，钩子就是过程中触发的函数 。

1. Vue 原生组合式钩子（直接自动导入）

onMounted：页面 DOM 渲染完毕后执行。最常用场景：页面加载完请求接口、操作 DOM。

<script setup> // 页面渲染完自动执行 onMounted(async () => { console.log('页面DOM加载好了') // 请求列表接口 const list = await $fetch('/api/list') }) </script>

onUpdated：页面数据变了、页面重新刷新渲染后执行。 比如输入框文字改变、列表筛选后页面刷新，就会触发。

const name = ref('') onUpdated(() => { console.log('数据更新，页面重新渲染了') })

onUnmounted：页面关掉 / 跳转走时执行。 用来清理定时器、取消请求，防止内存泄漏。

let timer = null onMounted(() => { timer = setInterval(() => {}, 1000) }) // 离开页面清空定时器 onUnmounted(() => { clearInterval(timer) })

三个 Vue 钩子总结：onMounted：刚打开页面执行一次；onUpdated：数据一变就反复执行

onUnmounted：离开页面执行一次。

补充：Vue3 8个钩子一句话区分

• onBeforeCreate：刚启动，啥都没有

• onCreated：数据有了，页面 DOM 还没渲染

• onBeforeMount：准备渲染 DOM，页面空白

• onMounted：页面渲染完成，发请求、操作 DOM

• onBeforeUpdate：数据变了，页面还没刷新

• onUpdated：页面刷新完毕

• onBeforeUnmount：页面即将关掉，清理定时器 / 事件

• onUnmounted：页面彻底销毁，DOM 消失

2. Nuxt 独有钩子 / API useHead

Nuxt 专属，动态修改浏览器标题和网页 SEO 信息，能跟着接口数据变化。definePageMeta 只能写死固定文字；useHead 可以根据接口数据动态改标题。

固定标题写法：

<script setup> definePageMeta({ title: '商品列表' }) </script>

动态标题写法：

<script setup> const title = ref('加载中...') // 页面加载拿商品详情 onMounted(async () => { const info = await $fetch('/api/goods/1') // 根据后端返回商品名，动态修改浏览器标题 title.value = info.name }) // 动态设置页面头部信息 useHead({ title: title, meta: [ { name: 'description', content: '商品详情介绍' } ] }) </script>t>

六、Template 模板语法

大家不用额外学新语法，Nuxt4 的模板完全沿用 Vue3 原生语法，日常开发足够用。

• 插值 {{ 变量名 }}：渲染文本、数字、简单表达式 <p>当前计数：{{ count }}</p>

• 动态属性 :属性名：绑定动态变量 <img :src="imgUrl" :class="boxClass" />

• 事件绑定 @事件名：绑定交互事件 <button @click="addCount">点击+1</button>

• v-if / v-show：v-if 移除DOM、v-show CSS隐藏

• v-for 列表循环：v-for="item in 数组" :key="唯一id"，key必须写唯一值

  本篇结语

  本篇我们把 Nuxt4 框架架构、目录体系、基础响应式 API、生命周期全部梳理完毕。下一篇我们会继续深入路由系统、组件封装与布局工程化实战。