nuxt3入门

随着vue3的发布，nuxt也将迎来它的vue3版本。截止到目前，nuxt3已经发布了RC版本，预计年内会发布正式版本。所以现在开始来学一下nuxt3吧！

拉取脚手架 然后安装依赖

npx nuxi init <你的项目名称>
1

由于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>
1
2
3
4

页面请求数据处理

由于vue3基本上都是用composition组合方式来写页面逻辑，以前options配置式时nuxt使用asyncData来获取数据，现在组合式没有了asyncData，nuxt内置了几种方法来获取数据

• useFetch
• useAsyncData
• useLazyAsyncData
• useLazyFetch

后面两种基本同前面的一样 不过会阻塞页面，所以常用前面两种方式来获取数据.。

useFetch

<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>
1
2
3
4
5
6
7
8

useAsyncData

<script lang="ts" setup>

const res = await useAsyncData("getList", () =>
  $fetch("http://121.36.81.61:8000/getTenArticleList")
);
console.log(res);
</script>
1
2
3
4
5
6
7

通过以上方式获取的数据，会在页面构建前就能拿到，然后就能渲染到页面上（相当于在服务端就拿到了数据），所以打开控制台的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')
  }
})
1
2
3
4
5
6
7

to, from类型与vue-router里的to, from一样，里面的属性也是相同的。
abortNavigation 停止当前导航 navigateTo 导航跳转到指定页面.
abortNavigation navigateTo等不需要额外注入，可以直接使用。

页面路由守卫
新建一个default.ts文件
代码同全局路由守卫

export default defineNuxtRouteMiddleware((to, from) => {
  console.log(to, from)
})
1
2
3

在你需要路由守卫的页面

<script lang="ts" setup>
definePageMeta({
  middleware: ['default']
})
</script>
1
2
3
4
5

这些definePageMeta也不需要额外注入，能直接使用。
配置middleware指定路由守卫文件。

每次访问该页面时 都会触发default.ts文件里的路由守卫方法。

参考：jspang的nuxt3保姆级入门教程 地址戳这里 ==>