入门篇一：Nuxt 4 快速上手：5分钟让项目跑起来

my-nuxt-app/
├── .nuxt/          # 构建产物，不用管
├── node_modules/   # 依赖包
├── app.vue         # 根组件（Nuxt 4 新位置）
├── nuxt.config.ts  # 配置文件
├── package.json    # 项目信息
└── tsconfig.json   # TypeScript 配置

跟传统的 Vue 项目相比，Nuxt 的目录结构非常简洁。注意到 app.vue 了吗？这是 Nuxt 4 的新变化，根组件放在根目录，入口文件 app.vue 直接写页面内容。

打开 app.vue 看看，内容超级简单：

复制代码

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<NuxtWelcome /> 是 Nuxt 官方的欢迎组件，展示一个漂亮的欢迎页面。等下我们会把它换成自己的内容。

四、启动开发服务器

万事俱备，让我们把项目跑起来！在项目根目录执行：

复制代码

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

终端会显示类似这样的输出：

复制代码

Nuxt 4.x.x with Nitro 2.x.x

  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.xxx:3000/

打开浏览器，访问 http://localhost:3000，你就能看到 Nuxt 的欢迎页面了！

五、改点代码试试

光看欢迎页面多没意思，我们来改点代码。把 app.vue 改成这样：

复制代码

<script setup lang="ts">
const message = 'Hello Nuxt 4!'
</script>

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>欢迎来到 Nuxt 4 的世界</p>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1 {
  color: #00dc82;
  font-size: 3rem;
  margin-bottom: 1rem;
}

p {
  color: #666;
  font-size: 1.2rem;
}
</style>

保存文件，浏览器会自动刷新（Nuxt 内置了热更新），你就能看到自己写的页面了！

🎉 恭喜！ 你已经成功创建并运行了一个 Nuxt 4 项目！

六、常见问题

Q1：端口 3000 被占用怎么办？

默认端口是 3000，如果被占用，可以在 nuxt.config.ts 中修改：

复制代码

export default defineNuxtConfig({
  devServer: {
    port: 3001
  }
})

Q2：启动时报错怎么办？

大部分启动问题都是依赖安装不完整导致的，试试删除 node_modules 重新安装：

复制代码

rm -rf node_modules
rm pnpm-lock.yaml  # 或 package-lock.json
pnpm install

Q3：Nuxt 4 和 Nuxt 3 有什么区别？

Nuxt 4 是 Nuxt 3 的升级版，主要改进包括：更好的性能、更简洁的目录结构（app/ 目录）、更强大的服务端能力。对于新手来说，直接学 Nuxt 4 就行。

总结

今天我们完成了：

✅ 环境准备：安装 Node.js 和包管理器
✅ 创建项目：一行命令搞定
✅ 认识目录结构：比想象中简单
✅ 启动开发服务器：pnpm dev 就能跑
✅ 修改代码体验热更新：所见即所得

看到这里，你会发现 Nuxt 上手真的不难。不用管什么 SSR、SSG，先把项目跑起来，后面再慢慢学原理。下一篇文章，我们来讲讲 Nuxt 的路由系统，看看如何自动生成路由。

觉得有帮助？点赞、在看、分享三连走起！有问题欢迎评论区留言，我们一起交流学习 💪