初识Nuxt

项目初始化

新建项目

pnpm dlx nuxi init nuxt3-demo

接入 tailwindcss

pnpm add @nuxtjs/tailwindcss -D

另外 tailwindcss 需要在 nuxt.config.ts 中配置一下

modules: ["@nuxtjs/tailwindcss"]

基础

路由

Nuxt 路由基于 vue-router ，在 pages 目录下创建的文件都会自动生成路由

例如如上结构的路由大概是：

[
  {
    path: '/',
    component: './pages/index.vue',
  },
  {
    path: '/welcome',
    component: './pages/welcome.vue',
  }
]

NuxtPage

在 pages 下写了文件，但目前页面其实还不能按照上面的路由展示，需要在 app.vue 中给一个入口，就是 <NuxtPage>，当然如果项目只有一个页面就使用app.vue就行了。

<template>
  <NuxtPage></NuxtPage>
</template>

路由导航

Nuxt 提供 <NuxtLink>标签可以用来进行跳转，该标签有一个 to 属性声明跳转的地址。

<NuxtLink to="/home">link</NuxtLink>

还有一个帮助函数 navigateTo 可以用编程的方式进行导航，需要注意的是，调用该函数需要用 return 或者 await 处理结果。并且 navigateTo 还可以跳转到外部的地址，当跳转到外部地址时第二个参数必须有 external: true，不然会报错

// vue 内跳转
await navigateTo('/home')
// 跳转外部地址
await navigateTo('https://nuxt.com', {
    external: true
})

动态路由

当文件名包含了[]，就会被转换为动态路由参数，例如新建一个 list-[id].vue 文件：

<template>
  <div>
    {{ $route.params.id }}
  </div>
</template>

直接访问 /list-1 可以看到页面显示 1

嵌套路由

当需要二级路由，就需要通过文件结构来处理，pages/detail/name.vue 就会生成对应的路由 ‘/detail/name’ ，另外当存在 ‘/detail’ 路由时，也就是

name 作为字路由，需要在 detail.vue 中提供入口 <NuxtPage> 才能将二级路由页面显示出来，另外也可以在 detail 目录下使用动态路由的方式创建 [id].vue 这样就通过 /detail/1 的方式访问即可。

Layout 布局

根目录下的 Layouts 目录用于存放页面布局，该目录下的组件都可以通过 <NuxtLayout> 标签使用，该标签有一个属性 name 用于指定使用哪个 Layout ，如不指定，默认使用 default。在 Layout 中，还需要写一个插槽来展示 Layout 包裹的组件。

<template>
  <div>Header</div>
  <slot />
</template>

静态资源

需要打包工具处理的资源放在 assets 目录下，不需要处理的放在 public 目录下，访问 public 下的资源直接通过/ 例如 '/pic.png'，访问 assets 目录下的资源需要从根目录开始，在 Nuxt 中路径有的会存在别名，可以通过别名来访问。

{
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "~": "/<rootDir>",
  "@": "/<rootDir>",
  "assets": "/<rootDir>/assets",
  "public": "/<rootDir>/public"
}

全局样式

在 app.vue 引入的 css 都会作用于全局，另一种方法就是通过 nuxt.config.ts 进行配置，在 assets 新建一个 global.css 作为全局样式。

export default defineNuxtConfig({
  css: ["assets/global.css"],
  // ...  
})

组件 Components

Nuxt 组件放在根目录下的 components 目录下，这个目录下的组件当被使用到的时候无需引入和注册，组件名是路径和文件名以大驼峰，例如 ‘components/nav/bar.vue’ 就是 <NavBar>

异常处理

Vue 渲染过程中的错误

通过 Nuxt 提供的插件，在 plugins 目录下新建 error-handler.js 来处理 vue 渲染过程中的错误。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (..._args) => {
    console.log('vue error handler')
  }
})

通过 Nuxt 钩子捕获 Vue 传播上来的错误
第一个钩子 app:error：整个应用层面的错误捕获
第二个钩子 vue:error：仅 Vue 层面的错误捕获。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:error', (..._args) => {
    console.log('app:error')
  })
  nuxtApp.hook('vue:error', (..._args) => {
    console.log('app:error')
  })
})

触发顺序：errorHandler -> vue:error -> app:error。

自定义错误页面

在根目录下创建 error.vue 文件，当抛出异常时会跳转到这个页面。另外手动抛出错误可以使用 showError() 参数是一个字符串或者一个错误对象

showError('404')
showError(new Error('404'))

组件错误处理

Nuxt 提供 NuxtErrorBoundary 处理组件级的错误

<template>
  <NuxtErrorBoundary>
    <!-- 默认插槽显示正常内容 -->
    <!-- 触发一个错误 -->
    <ThrowError></ThrowError>
    <!-- error插槽显示错误时内容 -->
    <template #error="{ error }">
      <p class="my-4 text-xl text-gray-500">发生了一些错误 {{ error }}</p>
      <NButton type="success" @click="error.value = null"> 修正错误 </NButton>
    </template>
  </NuxtErrorBoundary>
</template>

当 ThrowError 组件抛出错误时，会触发 error 插槽的内容。

配置 meta

通过 app.head 配置

在 nuxt.config.ts 中配置

export default defineNuxtConfig({
  app: {
      head: {
          title: 'nuxt3-demo',
          meta: [
              {
                  name: 'keywords',
                  content: 'nuxt3-demo'
              },
              {
                  name: 'description',
                  content: 'nuxt3-demo'
              }
          ]
      }
  }
})

通过 useHead 在组件内配置

<script setup>
useHead({
  title: "Counter",
  meta: [
    {name: "description", content: "counter"},
  ]
})
</script>

useHead 中的 title 会直接替换原本的 title，如果想保留原本的 title 可以使用 titleTemplate 配置。

通过组件标签配置

Nuxt 提供