Featues

开发更快
打包更小
支持 vite
支持 vue3
支持自动引入
支持文件路由
支持布局系统
支持多种渲染模式
支持 typescript
支持 composition-api

nuxt3 vs nuxt2

#composables

nuxt3 新增，类似 react 项目中存放的一些公共 hooks, 或者 api。
在 composables 目录下模块的同名导出会被自动引入

#page

整体与 nuxt2 保持一致
动态路由写法变化
1. nuxt2 : _xxx
2. nuxt3 : pages/[id].vue

#plugins

nuxt2 需要手动注册（nuxt.config.[ts/js]）
nuxt3 自动注册

#server

与 nuxt2 serverMiddleware 功能一致
实现差异：
1. nuxt2 使用 connect 作为内置的 server 框架
2. nuxt3 使用自定义框架 h3 代替， h3 优势
  1. 兼容 connect、express 等中间件
  2. Serverless , Workers ,Node.js 都可以运行

#总结

nuxt3 基本整个目录都做了自动导入功能，相比 nuxt2, 研发过程变得 “很直接”、“更傻瓜”。同时在结构设计上对功能又做了更偏向于后台研发的细分。

#基本操作

#创建新项目

npx nuxi init nuxt-app

#安装依赖项

npm install

#开发模式下启动 Nuxt 应用

npm run dev -- -o

#目录说明

├── README.md
├── app.vue
├── assets
├── components
├── composables
├── layouts
├── middleware
├── nuxt.config.ts
├── package.json
├── pages
├── plugins
├── public
├── server
└── tsconfig.json

assets 样式表（CSS、SASS 等）、字体、icon
components vue 组件，Nuxt 会自动导入 components/目录中的所有组件
composables 依赖的 hooks 、api，自动导入
layouts 全局性的布局组件，可以应用到页面上
middleware 路由中间件
- 命名路由中间件，放置在 middleware/目录中，在页面使用时会通过异步导入自动加载
- 全局路由中间件，放置在 middleware/目录中（带.global 后缀），每次路由更改都会自动运行
nuxt.config.ts 配置文件
package.json
pages 所有的页面，会基于文件嵌套关系生成路由
plugins 插件目录，会自动加载。通过.server 或.client 后缀控制在服务器或客户端加载
public 公共文件
server 服务器路由以及服务器逻辑处理目录，会自动加载执行。内部可以直接获取到 h3 对象
- server/api api 接口
- server/routes 处理页面路由，也可以处理 api
- server/middleware 中间件
tsconfig.json

#路由

#容器

NuxtPage 类似于 router-view
在 app.vue 中加入 NuxtPage

<template>
    <NuxtPage />
</template>

#跳转

NuxtLink 类似于 router-link

站内跳转

<!-- app.vue -->
<template>
    <!-- 点击将跳转到 /about 页面 -->
    <NuxtLink to="/about"> to about </NuxtLink>
</template>

站外跳转

<!-- app.vue -->
<template>
    <!-- 点击将跳转到 百度 页面 -->
    <NuxtLink to="https://www.baidu.com/"> to baidu </NuxtLink>
</template>

#路由解析

page 目录下文件/文件夹的创建规则

#基础路由

[	{		"url": "/",		"file": "pages/index.vue"	},	{		"url": "/home",		"file": "pages/home.vue"	}]

#嵌套路由

[
	{
		"url": "/blog/list",
		"file": "pages/blog/list.vue"
	},
	{
		"url": "/blog/list",
		"file": "pages/blog.vue" // 组件嵌套
	}
]

<!--  pages/blog.vue -->
<template>
	blog
	<NuxtChild />
	<!-- 子路由出口 -->
</template>

#动态路由

[
	{
		"url": "/blog/show/:id",
		"file": "pages/blog/show/[id].vue"
	},
	{
		"url": "/blog:id/show/:id",
		"file": "pages/blog[id]/show/[id].vue" // 父级动态
	}
]

#layout 布局

#全局

创建 layouts/default.vue 基础布局结构作用于全局所有页面

<!-- default.vue -->
<template lang="pug">
    Header
    main
    Footer
</template>

当页面不需要时可以手动关闭

<script setup lang="ts">
    definePageMeta({
        layout: false
    })
</script>

#布局组件

layouts/目录下的组件可以直接在页面中使用

<!-- layouts/error.vue -->
<template lang="pug">
.error
    | error
</template>

在pages下的页面直接使用

<!-- pages/home.vue -->
<template>
	...
	<NuxtLayout name="error"> home </NuxtLayout>
	...
</template>

#数据获取

nuxt3 中内置了四种请求的方法

useFetch
useLazyFetch
useAsyncData
useLazyAsyncData

推荐使用 useAsyncData, 会比较灵活。 lazy 模式可以让导航跳转不被阻塞

// 参数1是 key
// 参数2是请求 handler，返回请求的 promise
// 解构出来的 data 为数据，error 为错误信息
const { data, error } = await useAsyncData('count', () => {
	return new Promise((resolve) => resolve('data'))
})
// 内置的 $fetch
const { data, error } = await useAsyncData('count', () => $fetch('/api/count'))

#状态共享

nuxt3 内置useState实现状态共享

// composables/state.ts   自动导入，直接使用
export const useUserInfo = () => useState < object > ('userInfo', () => null)

useState 的第一参数为 key，第二参数为 function.

useState 可以实现服务端和客户端的共享
const state = ref() 可以实现所有页面数据的共享，有一定风险：内存泄漏，数据泄漏
useState 只允许在生命周期中使用，其他地方无法调用

nuxt3基本使用总结