一、前言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 # 项目配置各文件夹作用详解:文件夹核心作用解释pages/约定式自动路由目录目录 / 文件自动映射浏览器 URLNuxt 灵魂功能新建about.vue浏览器直接访问/about新建user/[id].vue自动匹配/user/1、/user/99不用手动配置路由表企业页面全部放这里components/全局自动注册组件目录存放页面复用的小块 UI按钮、卡片、弹窗写好后所有页面直接Demo/使用不用手动import导入大幅减少重复代码composables/全局组合式函数目录自动导入封装通用逻辑接口请求、表单校验、日期工具、用户登录状态任何页面直接调用函数无需导入是实习封装工具代码专用文件夹layouts/页面布局模板目录网站统一骨架比如后台管理系统「侧边栏 顶部导航 内容区域」只写一次布局几十上百个页面直接复用不用每个页面重复写侧边栏server/Nitro 服务端接口目录Nuxt 自带轻量后端在server/api/写 ts 文件自动生成/api/xxx接口前端调用不会出现跨域问题实习做全栈、模拟后端接口必备middleware/全局 / 页面路由中间件路由守卫页面跳转前执行校验逻辑最常用登录鉴权新建 auth.ts页面通过 definePageMeta 绑定未登录自动跳登录页后台管理系统刚需assets/编译型静态资源目录存放样式、图片、字体文件经过 Vite 压缩打包使用方式~assets/images/demo.png适合业务内使用的图片、样式public/原始静态资源目录文件不打包、直接输出到网站根目录直接/favicon.ico访问存放网站图标、静态下载文件、不参与业务逻辑的资源plugins/全局插件自动执行目录Nuxt 启动时自动执行内部 ts 文件用于全局挂载第三方库ECharts、弹窗组件、挂载全局工具函数无需每个页面单独引入四、Script Setup TS 基础核心语法现在 Nuxt4 项目统一都用script setup langts写法也是官方推荐写法。最大的好处就是自动导入ref、reactive、watch、useFetch 这些常用 API完全不用手动导入直接写就能用日常开发省超多重复代码。页面数据驱动主要靠四个核心响应式 APIref主要用来存基础数据比如数字、字符串、布尔值。定义之后在脚本里修改需要加 .value页面模板里直接使用变量就行。const count refnumber(0) count.value 10reactive用来存对象、数组这种复杂数据适合用户信息、表单、列表数据。我们可以先用 TS 接口规范好数据结构赋值修改不用写 .value写法更自然。computed是计算属性用来根据已有数据自动生成新数据自带缓存。比如根据单价和数量自动算总价只有依赖的数据变了它才会重新计算性能比直接写页面表达式更好。watch是数据监听用来监听数据变化。平时搜索框关键词联想、表单字段校验、数据变动后刷新接口都是用它来实现的数据一变就自动执行对应逻辑。五、生命周期钩子生命周期 页面从创建 → 显示 → 更新 → 关闭的全过程钩子就是过程中触发的函数 。1. Vue 原生组合式钩子直接自动导入onMounted页面 DOM 渲染完毕后执行。最常用场景页面加载完请求接口、操作 DOM。script setup // 页面渲染完自动执行 onMounted(async () { console.log(页面DOM加载好了) // 请求列表接口 const list await $fetch(/api/list) }) /scriptonUpdated页面数据变了、页面重新刷新渲染后执行。 比如输入框文字改变、列表筛选后页面刷新就会触发。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页面渲染完成发请求、操作 DOMonBeforeUpdate数据变了页面还没刷新onUpdated页面刷新完毕onBeforeUnmount页面即将关掉清理定时器 / 事件onUnmounted页面彻底销毁DOM 消失2. Nuxt 独有钩子 / API useHeadNuxt 专属动态修改浏览器标题和网页 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: 商品详情介绍 } ] }) /scriptt六、Template 模板语法大家不用额外学新语法Nuxt4 的模板完全沿用 Vue3 原生语法日常开发足够用。插值 {{ 变量名 }}渲染文本、数字、简单表达式 p当前计数{{ count }}/p动态属性 :属性名绑定动态变量 img :srcimgUrl :classboxClass /事件绑定 事件名绑定交互事件 button clickaddCount点击1/buttonv-if / v-showv-if 移除DOM、v-show CSS隐藏v-for 列表循环v-foritem in 数组 :key唯一idkey必须写唯一值本篇结语本篇我们把 Nuxt4 框架架构、目录体系、基础响应式 API、生命周期全部梳理完毕。下一篇我们会继续深入路由系统、组件封装与布局工程化实战。