nuxt3是由vue官方认可的vue3 SSR渲染解决方案的框架。本文主要记录个人在使用该框架时碰到的一些疑惑和问题，并做以记录，文章内容大多为个人观点，不一定完全正确，，同时，这并非nuxt3的使用教程，如果对该框架想系统学习或更进一步了解，可以移步nuxt3官方网站查看文档。「链接」

1、nuxt3中页面路由是怎么样的？

（1） nux3页面路由是根据pages目录下的目录及vue文件自动解析的，如：

pages
|---index.vue
|---user
|---|---[id].vue
|---type
|---|---type_1.vue
|---|---type_2.vue

则解析完的路由应该是：

index
user/123
type/type_1
type/type_2

（2）pages目录一般位于项目的根目录下

（3）也可通过配置文件nuxt.config.ts中的dir.pages来指定pages文件夹,如：

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
	dir: {
  	pages: './web'
  }
})

（4）也通过配置文件中的pages选项关闭nuxt3自动生成路由的机制，使用vue-router

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
	pages: false
})

（5）路由跳转：

navigateTo (route: string | Route, { redirectCode = 302, replace = false })

2、nuxt3服务端是怎样的？

如果你是用过或习惯了nuxt以前的版本的话，一定记得他的服务端的代码有个可以看到启动服务器的过程，在server/index.js中。但是nuxt3中默认生成的项目是不带server文件夹的，我们需要使用server功能的时候我们创建文件夹就可以了。另外，我们创建这个server也不需要关心整个server启动的过程。nuxt3的server机制是基于nitro所运行，我们只需要关心我们需要什么接口，然后从server里面导出我们需要的接口即可，像这样：

（1）创建server文件夹

（2）创建test.js

server
|---api
|---|---test.get.js

（3）server接口必须导出一个defineEventHandler事件，该事件的回调必须返回一个值

export default defineEventHandler(event => {
	return 'test'
})

（4）在客户端发起请求

$fetch('/api/test', { method:'get' })

从上面的步骤我们可以看出，接口的请求方式是由文件名称所体现。另外，大家注意server下的middleware文件夹，该文件夹主要存放server部分的中间件，同样导出一个defineEventHandler，但它的回调不需要返回任何内容。该文件夹下的defineEventHandler回调中的内容，会在每个请求到来时触发，并且发生在接口文件defineEventHandler回调事件之前。详细不在此赘述，大家移步官网查看。

3、nuxt3中怎样使用node相关API？

在node中有很多API在使用时需要通过require引入的，但nuxt3中是不支持该引入方式的，它支持的是import方式的引入。该引入方式在高版本的node中默认支持。可以将nuxt项目搭建起来，那么你使用的node版本就一定支持该方式的引入，所以放心大胆的使用import引入就可以了。主要是使用第三方插件时注意，需要考虑该插件是否支持import引入的放。

import mongoose from 'mongoose'

4、nuxt3中elementplus是怎样使用的？

element-ui应该时vue框架使用最广泛的UI库。vue3只能使用elementPlus，它是element-ui对于vue3支持的UI库。

（1）在项目根目录下创建plugins文件夹；

（2）在该文件夹下创建element-plus.js文件，如下：

import { defineNuxtPlugin } from '#app'
import ElementPlus from 'element-plus/dist/index.full.mjs'

export default defineNuxtPlugin(nuxtApp => {
    nuxtApp.vueApp.use(ElementPlus)
})

（3）在app.vue文件中引入elementPlus的样式

（4）打包配置，nuxt.config.ts修改或添加如下代码

...
const lifecycle = process.env.npm_lifecycle_event;
...
export default defineNuxtConfig({
	...
	build: {
		...
  	transpile: lifecycle === "build" ? ["element-plus"] : [],
		...
  }
	...
})
...

5、nuxt3中如何注册组件？

（1）在项目根目录下创建components文件夹，在该文件加下创建你的目录或者vue文件，nuxt3会根据你文件的目录结构及名称自动生成全局组件。

| components/
--| base/
----| foo/
------| Button.vue

（2）使用组件

（3）同样，你也可以通过配置文件nuxt.config.ts中的dirs指定自己的组件目录