Nuxt3学习：新手入门教程

Nuxt3是一个基于Vue3的框架，支持服务器端渲染和静态生成，提供了现代化的API和类型支持，极大提升了开发体验。本文将带你快速搭建Nuxt3项目，并介绍基本组件使用、路由管理和环境配置等关键知识点。Nuxt3学习过程中，还会遇到一些常见问题和性能优化技巧，本文也会提供相应的解决方案和社区资源推荐。

1.1 什么是Nuxt3

Nuxt3是一个基于Vue.js的服务器端渲染（SSR）和静态站点生成（SG）框架，它提供了强大的工具来简化开发流程，如页面路由、动态组件、静态站点生成等。Nuxt3利用了Vue3的最新特性，如Composition API、Teleport、Suspense等，使得开发性能更高，体验更流畅。

1.2 Nuxt3的主要特点

1. SSR和SG支持：Nuxt3支持服务器端渲染和静态站点生成，适用于各种规模的Web应用。
2. 现代化API：使用Vue3的Composition API，简化组件逻辑管理。
3. 类型支持：Nuxt3内置了TypeScript支持，极大提升了开发体验。
4. 全功能CLI工具：提供了一系列命令行工具，如创建项目、启动开发服务器等。
5. 模块化：支持插件和模块，可以方便地添加第三方库或功能。

1.3 Nuxt3与Nuxt2的区别

1. 基于Vue3：Nuxt3完全基于Vue3，支持Composition API，提供了更多的灵活性和功能。
2. 改进的性能：Nuxt3在构建和渲染性能上有显著提升。
3. 更好的TypeScript集成：Nuxt3对TypeScript有更好的支持，开发者可以享受到更好的开发体验。
4. 内置的缓存和预加载：Nuxt3提供了更优的缓存策略和预加载功能，提升了应用的加载速度。
5. 更新的插件和模块生态系统：Nuxt3对插件和模块进行了升级，提供了更丰富的功能和更好的性能。

2.1 安装Node.js和npm

首先，需要确保你的计算机上已经安装了Node.js和npm。可以通过以下命令检查是否已经安装：

node -v
npm -v

如果没有安装，可以访问Node.js官网下载安装包。

2.2 安装Nuxt3

使用npx命令安装Nuxt3，直接通过create-nuxt-app命令创建项目：

npx create-nuxt-app my-nuxt3-app

2.3 使用NPM脚本创建项目

选择项目类型时，可以选择“Basic”或“Universal”，通常建议选择“Universal”，因为它支持SSR和SG。可以使用以下命令创建项目，并添加一些额外的配置，例如使用Tailwind CSS和TypeScript：

npx create-nuxt-app my-nuxt3-app --features=tailwind --typescript

创建完成后，可以使用以下命令启动开发服务器：

npm run dev

这将启动本地开发服务器，访问http://localhost:3000，可以看到默认的Nuxt3应用页面。

3.1 Pages目录结构

Nuxt3采用约定优于配置的方式，通过文件路径来定义路由。pages目录下的文件会被自动注册为路由。例如，创建一个/pages/index.vue文件：

<template>
  <div>
    <h1>首页</h1>
    <p>Welcome to the Nuxt3 App!</p>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

访问http://localhost:3000/时，将加载这个页面。

3.2 使用Layout布局

布局文件位于/layouts目录下，可以为整个应用或特定页面定义布局。创建一个/layouts/default.vue文件：

<template>
  <div>
    <header>
      <h1>My Nuxt3 App</h1>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

<script setup>
// 布局逻辑
</script>

在页面文件中使用布局，例如/pages/index.vue：

<script setup>
definePageMeta({
  layout: 'default',
})
</script>

3.3 引入和使用组件

可以将组件放在/components目录下。创建一个/components/HelloWorld.vue文件：

<template>
  <div>
    <h2>Hello, {{ name }}</h2>
  </div>
</template>

<script setup>
defineProps({
  name: String,
})
</script>

在页面中使用这个组件：

<template>
  <div>
    <h1>首页</h1>
    <HelloWorld name="Vue3" />
  </div>
</template>

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

// 组件逻辑
</script>

4.1 动态路由

动态路由允许根据路径参数生成不同的路由。创建一个/pages/posts/[id].vue文件：

<template>
  <div>
    <h1>Post: {{ id }}</h1>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'default',
})

const id = useRoute().params.id
</script>

访问http://localhost:3000/posts/1时，将根据路径参数加载对应的页面。

4.2 路由参数

可以在路由中传递参数。例如，/pages/posts/[id]/[title].vue：

<template>
  <div>
    <h1>Post: {{ id }}, Title: {{ title }}</h1>
  </div>
</template>

<script setup>
definePageMeta({
  layout: 'default',
})

const route = useRoute()
const id = route.params.id
const title = route.params.title
</script>

访问http://localhost:3000/posts/1/title-of-post时，将加载对应的动态路由。

4.3 编程式导航

使用useRouter和useRoute来实现编程式导航。例如，在组件中实现导航：

<template>
  <div>
    <h1>首页</h1>
    <button @click="navigateTo">Go to Posts</button>
  </div>
</template>

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

const router = useRouter()

const navigateTo = () => {
  router.push('/posts')
}
</script>

点击按钮后，页面将导航到/posts路径。

5.1 环境变量配置

可以在/nuxt.config.js文件中设置环境变量：

export default defineNuxtConfig({
  // 其他配置
  env: {
    apiEndpoint: process.env.API_ENDPOINT || 'https://api.example.com',
  },
})

也可以在.env文件中定义环境变量：

API_ENDPOINT=https://api.example.com

在组件中使用环境变量：

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

const config = useRuntimeConfig()
console.log(config.public.apiEndpoint)
</script>

5.2 本地开发服务器配置

可以通过/nuxt.config.js文件来配置开发服务器：

export default defineNuxtConfig({
  // 其他配置
  devServer: {
    port: 3001,
    host: '0.0.0.0',
    cors: false,
  },
})

5.3 部署到生产环境

可以使用npm run build生成静态文件：

npm run build

然后使用npm run start启动生产服务器：

npm run start

也可以将生成的静态文件部署到任何静态服务器上，如AWS S3、Netlify等。

6.1 常见错误及解决方式

1. 模块找不到错误：确保模块已正确安装，并且在nuxt.config.js中正确配置。
2. TypeScript错误：确保正确配置了tsconfig.json，并且正确安装了TypeScript。
3. 路由问题：检查路由定义是否正确，特别是动态路由的参数。

6.2 性能优化技巧

1. 缓存：使用Nuxt3内置的缓存功能，减少重复请求。例如，预加载资源：

   <script setup>
   const { useHead } = useNuxtApp()
   useHead({
    link: [
      { rel: 'preload', href: '/path/to/preload', as: 'script' },
    ],
   })
   </script>

2. 预加载：在路由切换时预加载即将显示的页面。
3. 代码分割：利用Webpack的代码分割功能，按需加载代码。例如，配置Google Fonts插件：

   export default defineNuxtConfig({
    modules: [
      '@nuxtjs/google-fonts',
    ],
    googleFonts: {
      families: {
        'Roboto': true,
        'Roboto+Slab': true,
      },
    },
   })

6.3 社区资源推荐

1. 官方文档：Nuxt3官方文档
2. 社区论坛：Nuxt.js的GitHub仓库和Discord社区提供了大量的资源和帮助。
3. 慕课网：慕课网 提供了丰富的Nuxt3教程和实战项目。