Nuxt3入门：新手必看教程

Nuxt3是一个基于Vue 3和Vue Router 4的通用应用框架，提供了开箱即用的服务器端渲染（SSR）和静态站点生成（SSG）功能。本文将详细介绍Nuxt3入门所需的知识，包括安装配置、项目结构解析、常用插件与模块、路由与导航以及部署与优化建议，帮助开发者快速上手Nuxt3入门。

Nuxt3简介

Nuxt3是什么

Nuxt3 是一个基于 Vue 3 和最新的 Vue Router 4 的通用应用框架。Nuxt3 通过提供开箱即用的服务器端渲染（SSR）和静态站点生成（SSG）等功能，帮助开发者构建高性能、可维护的现代 Web 应用程序。它继承了 Nuxt2 的优点，并引入了许多新功能和改进，使得开发者能够更高效地构建和部署复杂的 Web 应用程序。

Nuxt3的优势与特点

Nuxt3 引入了许多新特性和改进，使其相比于其他框架具有明显的优势：

1. 更好的性能：Nuxt3 使用 Vue 3 的 Composition API 和最新的 Vue Router 4，提供了更高效的应用构建方式，能够显著提升应用的加载速度和交互体验。
2. 开箱即用的SSR和SSG支持：Nuxt3 内置了对服务器端渲染（SSR）和静态站点生成（SSG）的支持，这使得应用能够更好地被搜索引擎抓取，并且提高了加载速度。
3. 强大的路由管理：利用 Vue Router 4，Nuxt3 提供了强大的路由管理功能，支持动态路由、异步组件等高级特性。
4. 模块化和插件支持：Nuxt3 强化了模块化开发，提供了丰富的插件系统，允许开发者轻松地集成第三方库和自定义扩展功能。
5. 组件和布局：通过组件和布局系统，Nuxt3 能够使得应用的结构更加清晰、可维护。
6. 开发工具和IDE支持：Nuxt3 良好的开发工具支持和 IDE 集成，进一步提升了开发体验，减少了开发者的负担。

Nuxt3与Nuxt2的区别

从Nuxt2到Nuxt3，有许多重要的更新和改进：

1. Vue版本升级：Nuxt3 使用 Vue 3，这意味着它支持最新的 Composition API 和其他 Vue 3 的特性，如 Reactivity System 和 Tree Shaking。
2. 路由的改进：Nuxt3 使用 Vue Router 4，增强了路由功能和支持动态路由、参数等更丰富的特性。
3. 优化的SSR和SSG：Nuxt3 对 SSR 和 SSG 进行了优化，提升了构建和性能表现。
4. 改进的模块和插件系统：Nuxt3 引入了更强大的模块化开发支持，可以更容易地添加和管理第三方插件。
5. 更好的开发者体验：Nuxt3 通过改进的脚手架、更好的错误消息和更多有用的开发工具，提升了开发体验。
6. 异步组件：Nuxt3 支持异步组件，这使得组件加载更加灵活和高效。
7. 新的配置选项：Nuxt3 引入了更多的配置选项和支持更丰富的配置方式，使得配置变得更加灵活和强大。

安装配置Nuxt3

使用npm或yarn安装Nuxt3

安装 Nuxt3 需要先确保 Node.js 和 npm/yarn 已经安装在你的计算机上。接下来，使用以下命令安装 create-nuxt-app，这是一个基于 Node.js 的脚手架工具，可以帮助快速搭建一个 Nuxt3 项目。

npm install -g create-nuxt-app

或者使用 yarn：

yarn global add create-nuxt-app

安装完成后，使用 create-nuxt-app 创建一个新的 Nuxt3 项目：

create-nuxt-app my-nuxt3-app

安装过程中会提示你选择一些配置选项，例如是否使用 TypeScript、是否启用 ESLint 等。选择适合自己项目的选项后，脚手架会自动安装必要的依赖并创建项目结构。

创建第一个Nuxt3项目

创建项目后，进入项目目录并启动开发服务器：

cd my-nuxt3-app
npm run dev

或者使用 yarn：

cd my-nuxt3-app
yarn dev

启动后，开发服务器会在本地的 3000 端口运行，访问 http://localhost:3000 即可看到默认的 Nuxt3 应用页面。

配置项目的基本设置

Nuxt3 的配置文件位于项目根目录下的 nuxt.config.ts 文件中。这个文件允许你配置项目的各种设置，例如路由、模块、插件等。以下是一个简化的配置示例：

export default defineNuxtConfig({
  // 设置公共的Vue配置选项
  vue: {
    // 设置Vue配置选项
  },
  // 配置路由
  router: {
    // 设置路由相关的配置
    mode: 'history', // 使用HTML5 History模式
    base: '/myapp/', // 基础路径
  },
  // 配置模块
  modules: [
    // 添加所需的模块
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',
  ],
  // 配置插件
  plugins: [
    { src: '~/plugins/my-plugin.js' },
  ],
  // 设置SSR配置
  ssr: true,
  // 设置其它全局设置
  app: {
    // 设置应用程序相关的配置
    head: {
      title: 'Nuxt3 Example',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: 'Nuxt3 Example App' },
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  }
})

项目结构解析

项目文件目录详解

一个典型的 Nuxt3 项目结构如下：

my-nuxt3-app/
├── nuxt.config.ts          # Nuxt配置文件
├── package.json            # 项目依赖管理
├── node_modules/           # 依赖包存储目录
├── .nuxt/                  # 自动生成的文件，包含编译后的代码
├── .nuxt-env/              # 自动生成的环境变量文件
├── components/             # Vue组件目录
├── layouts/                # 布局文件目录
├── pages/                  # 页面目录
├── plugins/                # 插件目录
├── static/                 # 静态资源目录
├── store/                  # Vuex状态管理目录
└── app.vue                 # 根组件

Nuxt3 的项目结构非常清晰，每个部分都有明确的用途：

• nuxt.config.ts：项目配置文件，用于设置路由、模块、插件等。
• package.json：项目依赖管理文件。
• node_modules/：项目依赖包的存储目录。
• .nuxt/：自动生成的目录，包含编译后的代码。
• .nuxt-env/：自动生成的环境变量文件。
• components/：存放 Vue 组件。
• layouts/：存放布局文件。
• pages/：存放页面文件。
• plugins/：存放插件文件。
• static/：存放静态资源文件。
• store/：存放 Vuex 状态管理文件。
• app.vue：根组件文件。

定义页面及路径设置

在 Nuxt3 中，页面文件放在 pages 目录下。每个文件名将对应一个路由路径。例如：

pages/
└── index.vue            # 对应 / 路径
└── about.vue            # 对应 /about 路径
└── users/
    └── index.vue        # 对应 /users 路径
    └── [id].vue         # 对应 /users/:id 路径

路径设置可以使用动态参数来创建动态路由，例如 users/[id].vue 对应 /users/:id 路径。在这种情况下，动态参数可以通过 $route.params 获取。

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.id)
</script>

使用组件和布局

组件和布局系统是 Nuxt3 的一个重要特性，用于定义页面的结构和样式。

1. 创建组件：组件通常放在 components 目录下，可以像任何其他 Vue 组件一样使用。

   <!-- components/HelloWorld.vue -->
   <template>
    <h1>Hello World!</h1>
   </template>
   
   <script setup>
   // 组件逻辑
   </script>

2. 使用组件：在页面中引入并使用组件。

   <!-- pages/index.vue -->
   <template>
    <div>
      <HelloWorld />
    </div>
   </template>
   
   <script setup>
   import HelloWorld from '~/components/HelloWorld.vue'
   </script>

3. 定义布局：布局文件通常放在 layouts 目录下，通过在页面文件中指定布局来使用它们。

   <!-- layouts/default.vue -->
   <template>
    <div class="layout">
      <header>My Header</header>
      <slot />
      <footer>My Footer</footer>
    </div>
   </template>

   在页面文件中指定布局：

   <!-- pages/index.vue -->
   <template>
    <div>
      <h1>Welcome to Nuxt3</h1>
    </div>
   </template>
   
   <script setup>
   import { definePageMeta } from 'nuxt/app'
   
   definePageMeta({
    layout: 'default'
   })
   </script>

常用插件与模块简介

添加第三方插件

Nuxt3 支持使用 npm 或 yarn 安装第三方插件，并在配置文件中指定它们。例如，安装并使用 axios 插件：

npm install axios

或者使用 yarn：

yarn add axios

然后在配置文件中添加插件：

export default defineNuxtConfig({
  // 其他配置选项
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    // 配置选项
  },
  plugins: [
    { src: '~/plugins/axios.js', mode: 'client' }, // 将插件添加到客户端
  ],
})

插件文件 axios.js：

import axios from 'axios'

export default function ({ $axios, app }) {
  $axios.setBaseURL('https://api.example.com')
  $axios.onRequest(config => {
    console.log(config)
  })
}

使用内置模块

Nuxt3 提供了一些内置模块，这些模块可以通过配置文件直接启用。例如，启用 @nuxtjs/i18n 模块来支持多语言：

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', file: 'en-US.js' },
      { code: 'zh', iso: 'zh-CN', file: 'zh-CN.js' }
    ]
  },
})

自定义插件的使用

自定义插件通常放在 plugins 目录下，并在 nuxt.config.ts 中指定它们的路径和加载模式。

插件文件 ~/plugins/my-plugin.js：

import Vue from 'vue'
import MyComponent from '~/components/MyComponent.vue'

Vue.component('MyComponent', MyComponent)

在配置文件中添加插件：

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/my-plugin.js', mode: 'client' },
  ],
})

路由与导航

创建和使用动态路由

动态路由允许你基于路径参数来处理请求。例如，创建一个用户详情页面：

pages/users/[id].vue

动态参数可以通过 $route.params 获取：

<template>
  <div>
    <h1>User ID: {{ $route.params.id }}</h1>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()

console.log(route.params.id)
</script>

页面间的数据传递

页面间的数据传递可以通过 useAsyncData 或 useLazyAsyncData 钩子来实现，特别是当数据需要异步获取时。

<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
    <p>Name: {{ name }}</p>
  </div>
</template>

<script setup>
import { useAsyncData } from 'nuxt/app'

const route = useRoute()
const { data: user } = useAsyncData('user', () => $fetch(`/api/user/${route.params.id}`))

const userId = route.params.id
const name = computed(() => user.value?.name)
</script>

使用异步组件和客户端/服务器端组件

在 Nuxt3 中，可以使用异步组件来延迟加载组件，从而提高应用的加载性能。

<template>
  <div>
    <LazyAsyncComponent />
  </div>
</template>

<script setup>
import LazyAsyncComponent from '~/components/LazyAsyncComponent.vue'
</script>

异步组件可以在客户端或服务器端加载。例如，客户端加载的组件：

<script setup>
import { defineAsyncComponent } from 'vue'

const MyComponent = defineAsyncComponent(() => import('~/components/MyComponent.vue'))
</script>

服务器端加载的组件：

<script setup>
import { defineAsyncComponent } from 'vue'

const MyComponent = defineAsyncComponent(() => import('~/components/MyComponent.vue'), { suspense: true })
</script>

部署与优化

构建和部署流程

为了部署 Nuxt3 应用，首先需要构建应用：

npm run build

或者使用 yarn：

yarn build

构建完成后，生成的静态文件位于 .nuxt/dist/client 目录下。接下来，可以选择将这些文件部署到静态文件服务器，如 Netlify、Vercel、GitHub Pages 等。以 Netlify 为例，将构建好的文件上传到 Netlify 即可：

npm run generate
netlify deploy --prod

项目优化建议

1. 使用 Tree Shaking：Tree Shaking 可以减少打包体积，使应用更轻量。
2. 静态资源优化：对静态资源进行压缩和优化，例如使用 Webpack 的 mini-css-extract-plugin。
3. 代码分割：使用 Lazy Loading 和 Suspense 分割代码，按需加载组件。
4. 缓存策略：合理设置缓存策略，减少不必要的请求和加载时间。

常见问题与解决方案

1. 路由问题：如果遇到路由问题，检查 pages 目录下的文件命名和路径设置是否正确。
2. 环境变量问题：使用 .env 文件来管理环境变量，并在 nuxt.config.js 中正确引用它们。
3. 构建失败：检查依赖包是否正确安装，以及是否有依赖项版本冲突。使用 npm audit 或 yarn audit 查看依赖审计报告。

通过以上步骤，你已经成功搭建了一个 Nuxt3 项目，并了解了如何进行基本的配置、路由管理和部署。接下来可以进一步探索 Nuxt3 的更多高级功能和特性。