Nuxt使用指南 - KAI的博客

一、Nuxt 是什么？

Nuxt 是一款基于 Vue.js 的一站式前端框架，并非独立于 Vue 之外的新框架，而是在 Vue 的基础上，整合了路由、渲染、状态管理、打包等常用功能，实现“开箱即用”，核心解决 Vue 原生开发中 SEO 差、路由配置繁琐、首屏加载慢等痛点。

核心用途总结：

快速开发 Web 项目（官网、博客、商城、H5 等均适用）；
实现 SSR（服务端渲染）/ SSG（静态站点生成），提升 SEO 效果和首屏加载速度；
简化开发流程，无需手动配置路由、组件导入等繁琐操作。

简单类比：Vue 是“建筑原材料”，Nuxt 是“精装修房屋”，省去自己搭建框架、配置细节的麻烦，直接上手开发业务。

二、Nuxt 基础使用

Nuxt3 是目前的主流版本，操作更简洁，以下是核心步骤，所有代码片段可直接复制使用。

1. 环境准备

需提前安装 Node.js（推荐版本 ≥ 18.0.0），安装完成后，通过命令行创建 Nuxt 项目。

2. 创建并启动项目

bash 复制代码

# 1. 创建 Nuxt3 项目（nuxi 是 Nuxt3 官方脚手架）
npx nuxi init my-nuxt-app

# 2. 进入项目目录
cd my-nuxt-app

# 3. 安装依赖
npm install

# 4. 启动开发服务器（默认端口 3000）
npm run dev

启动成功后，打开浏览器访问 http://localhost:3000，即可看到 Nuxt 默认首页。

3. 核心功能：文件即路由

Nuxt 无需手动配置 Vue Router，遵循“约定大于配置”，在 pages 目录下创建 \.vue 文件，自动生成对应路由，示例如下：

plain text 复制代码

pages/          # 路由核心目录（必须手动创建）
├── index.vue   # 首页，对应路由 /
├── about.vue   # 关于页，对应路由 /about
└── user/       # 嵌套路由
    └── index.vue # 对应路由 /user

示例：创建 pages/about\.vue，访问 http://localhost:3000/about 即可查看页面：

vue 复制代码

<template>
  <div class="container">
    <h1>关于我们</h1>
    <p>这是 Nuxt 页面示例</p>
  </div>
</template>

4. 组件自动导入

在 components 目录下创建组件，无需手动写 import 语句，可直接在页面中使用，示例：

vue 复制代码

// components/HelloWorld.vue
<template>
  <h2>{{ msg }}</h2>
</template>

<script setup>
const msg = "Hello Nuxt!"
</script>

在 pages/index\.vue 中直接使用，无需导入：

vue 复制代码

<template>
  <div>
    <h1>首页</h1>
    <HelloWorld /> <!-- 直接使用组件 -->
  </div>
</template>

5. 服务端请求数据（SSR 核心）

Nuxt 提供专属请求方法，实现服务端渲染，提升 SEO 和首屏加载速度，常用 useAsyncData 方法：

vue 复制代码

<script setup>
// 服务端请求数据，参数1：数据标识（自定义），参数2：请求函数
const { data, error } = await useAsyncData('list', () => {
  return $fetch('https://api.example.com/list') // Nuxt 内置请求方法
})

// 处理错误
if (error) {
  return <div>请求失败</div>
}
</script>

<template>
  <div>
    <div v-for="item in data" :key="item.id">{{ item.title }}</div>
  </div>
</template>

6. 全局配置

项目根目录的 nuxt\.config\.ts 是全局配置文件，可配置标题、模块、端口等，示例：

typescript 复制代码

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true }, // 开启开发者工具（可选）
  app: {
    head: {
      title: '我的 Nuxt 项目', // 页面标题
      meta: [
        { name: 'description', content: 'Nuxt 基础使用示例' }
      ]
    }
  },
  modules: ['@nuxtjs/tailwindcss'] // 集成 Tailwind CSS（可选）
})

三、Nuxt2 与 Nuxt3 核心区别（简洁对比）

目前 Nuxt 主要有两个版本：Nuxt2（基于 Vue2）和 Nuxt3（基于 Vue3），Nuxt3 是主流推荐版本，两者核心区别如下，避免新手混淆。

1. 底层依赖（核心差异）

Nuxt2：基于 Vue2 + Webpack，依赖 Vue2 的选项式 API；
Nuxt3：基于 Vue3 + Vite，支持 Vue3 的组合式 API（\<script setup\>），打包速度更快。

2. 开发体验

Nuxt2：需手动导入组件、Vue API（如 import Vue from \&\#39;vue\&\#39;），配置繁琐，热更新速度慢；
Nuxt3：自动导入组件、Vue API，无需手动写 import，原生支持 TypeScript，热更新极速，开发效率大幅提升。

3. 核心语法差异

Nuxt2（选项式 API）：

vue 复制代码

<script>
export default {
  // 手动定义数据
  data() {
    return {
      count: 0
    }
  },
  // 页面加载时请求数据
  asyncData() {
    return { list: [] }
  }
}
</script>

Nuxt3（组合式 API + <script setup>）：

vue 复制代码

<script setup>
// 无需手动定义 data，直接使用 ref/reactive
const count = ref(0)
// 服务端请求数据（更简洁的语法）
const { data: list } = await useAsyncData('list', () => $fetch('/api/list'))
</script>

4. 路由与请求

Nuxt2：路由配置逻辑一致，但请求方法常用 asyncData、$axios（需额外安装）；
Nuxt3：路由规则不变，新增 useFetch、useLazyFetch 等请求方法，内置 $fetch，无需额外安装 axios。

5. 部署与兼容性

Nuxt2：部署需依赖 Node.js 服务，支持静态生成，但兼容性较差，不支持 Vue3 语法；
Nuxt3：部署更灵活，支持 Node.js、Docker、Serverless、静态站点、边缘渲染等多种方式，向下兼容部分 Nuxt2 语法。

6. 版本选择建议

新项目：优先选择 Nuxt3，开发效率高、性能好，是未来的主流；
老项目：若基于 Vue2 开发，继续维护 Nuxt2 即可，无需强行迁移（迁移成本较高）。

四、总结

1. Nuxt 是 Vue 的增强框架，核心优势是“开箱即用”，解决 SEO、路由配置等痛点，适合各类 Web 项目；

2. 基础使用核心：创建项目 → 编写 pages 目录（路由）→ 编写组件 → 请求数据 → 配置全局信息；

3. Nuxt3 对比 Nuxt2，底层更先进、开发更简洁、部署更灵活，新手直接学 Nuxt3 即可。