随着vue3的发布，nuxt它也将迎来vue3版本。到目前为止，nuxt3已经发布了RC版本预计将在今年内发布。所以现在就开始学习吧。nuxt3吧！
拉取脚手架 然后安装依赖
npx nuxi init <您的项目名称> 由于github不稳定可能会导致失败，需要重复几次，直到提示您安装依赖，然后安装依赖。
公共组件和路由页面
根目录新建components，pages 用于放置公共组件和路由页； 公共组件与路由页面的逻辑相同Nuxt2 声明结束后，将自动注入项目，无需import导入。路由页面自动生成路由配置，无需声明路由配置。
公共组件将自动注册，但自动注册的逻辑是什么？ components夹下文件，一级.vue文件的名称是组件的名称。 components如果文件夹中有文件夹，Index.vue 这个index.vue如果有其他文件，例如： components下有一个uploads文件夹，uploads文件夹里有index.vue， file.vue使用两个文件时， index.vue组件的名称是 而file.vue的名字是 当然 也支持-写作，以此类推 下属也是这个逻辑。 所有组件名称前缀都添加了lazy的组件，都会按需加载（就是这么简单粗暴）
公共函数页面
根据目录新建一个composables公共函数存储在目录中，相同components/pages同样，函数会自动注册到全局，可以直接使用，无需引用！
layouts页面布局
根据目录新建一个layouts目录用于放置页面布局文件。 新建一个.vue文件、名称可以随意取，如default 创建一个default.vue文件。 本文件可以编写您的页面布局、公共模块等，也可以编写插槽等自定义内容。 然后在需要页面布局的页面中 声明一个NuxtLayout组件，这个组件是nuxt有一个默认的组件name属性，name的值是layouts文件夹中的文件名默认为default 所以我没写name
<template> <NuxtLayout></NuxtLayout> <NuxtPage /> </template> 页面要求数据处理
由于vue三基本都是用的composition组合写页面逻辑，以前options配置式时nuxt使用asyncData现在没有组合式获取数据asyncData，nuxt内置数据获取数据的几种方法
- useFetch
- useAsyncData
- useLazyAsyncData
- useLazyFetch
后两个和前两个基本一样。 然而，它会阻塞页面，因此通常使用前两种方法获取数据.。
<script lang="ts" setup> import {
ref } from 'vue'; const res = await useFetch("http://121.36.81.61:8000/getTenArticleList"); const list = ref(res.data._rawValue.data); // console.log(res); </script> <script lang="ts" setup> const res = await useAsyncData("getList", () => $fetch("http://121.36.81.61:8000/getTenArticleList") );
console.log(res);
</script>
通过以上方式获取的数据，会在页面构建前就能拿到，然后就能渲染到页面上（相当于在服务端就拿到了数据），所以打开控制台的network 看不到请求记录。而且项目打包时，会去每一个路由页面请求并渲染到构建的页面上。 需要注意的是，做ssr时 如果需要的内容是需要更新的，则需要在api接口更新后重新打包项目，否则页面里的ssr内容还是上一次的ssr内容，没办法更新。要不就不通过上面的方式去获取数据，通过其他xmlhttprequest方式去获取数据（但是无法ssr）。
路由守卫和页面路由守卫
根目录新建一个middleware目录用于放置路由守卫文件。
新建一个default.global.ts文件 .global代表的是全局的意思，所以这个文件，它是全局的路由守卫。
export default defineNuxtRouteMiddleware((to, from) => {
if (to.name === 'info-id' && from.path !== '/info') {
console.log('禁止访问该页面！需要先去Info页面')
abortNavigation(); //停止当前导航，可以使用error进行报错
return navigateTo('/info')
}
})
to, from类型与vue-router里的to, from一样，里面的属性也是相同的。 abortNavigation 停止当前导航 navigateTo 导航跳转到指定页面. abortNavigation navigateTo等不需要额外注入，可以直接使用。
新建一个default.ts文件 代码同全局路由守卫
export default defineNuxtRouteMiddleware((to, from) => {
console.log(to, from)
})
在你需要路由守卫的页面
<script lang="ts" setup>
definePageMeta({
middleware: ['default']
})
</script>
这些definePageMeta也不需要额外注入，能直接使用。 配置middleware指定路由守卫文件。
每次访问该页面时 都会触发default.ts文件里的路由守卫方法。
：jspang的nuxt3保姆级入门教程 地址戳这里 ==>