简陋的nuxt3学习笔记

目前nuxt3还是beta版本，先浅学一下吧
bug我感觉还是有点多的，如果遇到任何问题，尝试重新启动一下项目可能有奇效

---

1. 安装

npx nuxi init Project-name

cd Project-name

npm i

---

2. nuxt3目录结构

• .nuxt 自动生成的目录
• nuxt.config.ts nuxt项目的配置文件
• tsconfig.json ts的配置文件

一些常用的目录，自己建：

• pages 开发的页面目录
• components 组件目录
• assets 静态资源目录
• layouts 项目布局目录

如果pages文件夹里没东西，要删除这个文件夹，不然会404

---

3. 路由

第一个页面建立好之后，如何访问这个页面？
在app.vue中使用<nuxt-page>标签，这相当于路由的出口
比如现在pages文件夹中有一个index.vue，想要访问它，无需配置路由

<!-- app.vue -->
<template>
  <div>
    <nuxt-page></nuxt-page>
  </div>
</template>

然后在地址栏访问时：http://localhost:3000，就行啦
️：因为index是默认的入口，如果你取名叫about.vue，访问时要输入http://localhost:3000/about

3.1 nuxt-link标签的使用

nuxt不鼓励用<a>标签进行跳转，而是使用<nuxt-link>标签
比如要从index.vue页面跳转到about.vue页面：

<!-- Index.vue -->
<template>
  <div>
    <h1>index</h1>
    <nuxt-link to="/about">to about</nuxt-link>
  </div>
</template>

3.2 动态路由

3.2.1 单参数传递

参数写在页面的文件名里，并且用[]扩起来
比如新建一个页面叫detail-[id].vue
这里传递的参数就是id

--| pages
  --| index.vue
  --| detail-[id].vue

参数接收在模板中可以使用$route.params.id

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

在index.vue中写一个跳转链接：

<!-- index.vue -->
<template>
	<div>
		<nuxt-link to="/detail-20">to detail</nuxt-link>
	</div>
</template>

️：在index.vue中<template>要用一个元素作为根元素！！
不然可能会出现路由已经跳转了但是页面没变化，要刷新才有变化的bug

3.2.2 多参数传递

如果要传递两个参数，需要建一个文件夹，在文件夹名上使用[]来确定参数
比如要传递一个name参数和id参数

--| pages
  --| detail-[name]
    --| [id].vue

修改index.vue:

<template>
	<div>
		<nuxt-link to="/detail-poem/20">to detail</nuxt-link>
	</div>
</template>

在script获取：

<template>
  <div>
    <div>获取的id:{
   { id }}</div>
    <div>获取的name:{
   { name }}</div>
  </div>
</template>

<script setup> import {
       ref } from "vue"; const route = useRoute(); const id = ref(route.params.id); // 20 const name = ref(route.params.name); // poem </script>

3.3 嵌套路由

建立一个嵌套路由页面：

1. 建一个父页面，比如parent.vue
2. 建一个和父页面同名的文件夹，parent
3. 在文件夹内建子页面，parent/child.vue

--| pages
  --| parent
    --| child.vue
    --| index.vue
  --| parent.vue

编写parent.vue:
<nuxt-child>是子路由的出口

<template>
	<div>
		<div>parent page</div>
		<nuxt-child></nuxt-child>
	</div>
</template>

在index.vue中写跳转链接：

<template>
	<div>
		<div>index</div>
		<nuxt-link to="/parent/child">to parent/child</nuxt-link>
    	<nuxt-link to="/parent">to parent/index</nuxt-link>
	</div>
</template>

---

4. 布局模板

将通用的ui代码提取到一个模板中
布局模板约定都放在layouts文件夹下

4.1 默认布局

layouts/default.vue用于指定默认布局
<slot>作为插槽

<!-- default.vue -->
<template>
	<div>我是默认的布局模板</div>
  <slot></slot>
</template>

页面使用布局模板：
使用<nuxt-layout>标签引用模板

<!-- 在demo.vue中使用 -->
<template>
	<nuxt-layout></nuxt-layout>
	<div>demo</div>
</template>

如何添加多个插槽：
修改default.vue布局模板，给插槽加上name

<!-- default.vue -->
<template>
	<div>
		<div>我是默认的布局模板</div>
		<slot name="header"></slot>
    	<slot name="footer"></slot>
	</div>
</template>

在页面中通过<template #xxx>的形式来指定对应的插槽：
注意<template>要放在<nuxt-layout>里

<template>
	<nuxt-layout>
		<template #header>
			<div>header</div>
		</template>
		<template #footer>
			<div>footer</div>
		</template>
	</nuxt-layout>
	<div>demo</div>
</template>

---

4.2 自定义布局

记得创建的是default.vue，这个是默认布局
自定义布局其实就是在layouts目录下建其他名字的文件
这里创建一个layouts/blog.vue

blog.vue的编写和default.vue是一样的

<!-- blog.vue -->
<template>
	<div>我是一个博客的布局模板</div>
  	<slot></slot>
</template>

在页面中使用时就有些小变化：
还是使用<nuxt-layout>标签引用模板
但要多写一个name属性说清楚名字，如果是default.vue的话就不用写name，默认为name="default"

<!-- 在demo.vue中使用 -->
<template>
	<nuxt-layout name="blog"></nuxt-layout>
	<div>demo</div>
</template>

---

5. 组件

组件约定写在components目录下
写在这个目录下它会自动加载到页面中，不需要import
组件不止可以用在页面中，也可以用在布局模板中！！
写法跟之前是一样的，这里就不放例子了

5.1 组件嵌套目录

如果组件不是放在components目录的顶层
例如：

--| components
  --| base
    --| MyButton.vue

在页面中使用时:
组件的名称将基于自己的路径目录和文件名

<template>
	<div>
		<base-my-button></base-my-button>
	</div>
</template>

5.2 组件懒加载

要实现按需懒加载组件，只要在组件名前面加上Lazy前缀就可以了

懒加载组件就是只有当组件需要用到时才加载，减少页面加载需要的时间
当我们需要一个组件时而显示时而不显示的时候，使用懒加载就很有用了

--| components
  --| LazyText.vue

<!-- 在页面中使用 -->
<template>
	<div>
		<lazy-text v-if="isShow"></lazy-text>
    	<button @click="handleClick">显示/隐藏</button>
	</div>
</template>

<script setup> import {
       ref } from "vue" const isShow = ref(false) const handleClick = () => {
       isShow.value = !isShow.value } </script>

---

6. 模块化代码Composable文件夹

一些通用的业务逻辑代码，可以放在composables文件夹中
比如获取当前时间的函数：

--| composables
  --| getTime.ts

// getTime.ts 这里细节略过
export const getTime = () => {
    
   // ...
  console.log('get time successfully!')
}

在组件或者页面中就可以直接使用，不需要导入

<script setup> getTime(); </script>

但是注意这个composables目录名是不能变的，取别的名字可能就是需要自己引入了

6.1 composables的引入规则

composables的引入规则是只有顶层文件会被引入
比如你又用了一个test文件夹来包裹代码

--| composables
  --| test
    --| getTime.vue

这时候直接使用getTime()会报错
解决方法是：在test目录下新建一个index.ts，然后将getTime.ts中的内容导入index.ts再导出

import {
     getTime } from './getTime'

export {
    
  getTime
}

这样就可以跟上面一样在组件和页面中正常使用getTime()

---

7. 数据请求

• useAsyncData()
• useFetch()

7.1 useAsyncData的使用

useAsyncData(key, handler, options)
第一个参数是一个唯一的键，相当于是这个请求的名字，相当于是起了一个id
第二个参数是有返回值的异步函数，$fetch是nuxt3的内置方法可以直接用，这里要传一个请求url
第三个参数是可选的配置项，比如可以传{lazy: true}来决定开启懒加载

还有一些配置项，需要的话可以看官网：https://v3.nuxtjs.org/api/composables/use-async-data

<script setup> const res = await useAsyncData("getList", () => $fetch(url)); </script>

7.2 useFetch的使用

算是useAsyncData()的简化版
第一个参数传请求url
第二个参数是可选的配置项
https://v3.nuxtjs.org/api/composables/use-fetch

<script setup> const res = await useFetch(url); </script>

---

8. middleware路由中间件

nuxt提供了一个可定制的路由中间件框架
目的是在导航到特定路由之前执行一些代码

路由中间件分三种：

1. 匿名路由中间件，在使用它们的页面中定义
2. 命名路由中间件，放在middleware目录下，页面使用时会自动加载
3. 全局路由中间件，放在middleware目录下，且带.global后缀，每次路由更改都会自动执行

8.1 全局路由中间件

新建一个middleware文件夹，文件下新建一个default.global.ts文件

export default defineNuxtRouteMiddleware((to, from) => {
    
  if(to.path === '/demo') {
    
    console.log('禁止访问')
    // 终止导航
    return abortNavigation()
  }
  // 重定向到pages/index.vue
  return navigateTo('/')
})

nuxt提供了两个全局的helper，可以直接在中间件被返回

• navigateTo()：重定向到给定的路由
• abortNavigation()：终止导航

8.2 命名路由中间件

这个就不是全局的了
新建一个middleware文件夹，文件下新建一个default.ts文件

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

在你要使用的页面中：

<!-- 在demo.vue中使用 -->
<script setup> definePageMeta({
       // 可以接收多个路由中间件 middleware: ["default"], }) </script>

命名路由中间件就是只对这个demo页面起作用，对其他的页面是没用的

匿名路由中间件官网没例子 我也不知道咋写555 下次吧

---

9. SEO相关

主要是对<meta>标签和<title>标签的设置

<meta>标签和seo相关的主要是name=description和name=keywords这两种
如果不设置这两种标签，对seo的效果会有影响

9.1 useHead()

<!-- 在demo.vue中使用 -->
<script setup> useHead({
       title: "poem的博客", viewport: "width=device-width,initial-scale=1,maximum-scale=1", charset: "utf-8", meta: [ {
       name: "description", content: "poem的博客" }, {
       name: "keywords", content: "poem,博客" }, ], }) </script>

现在跳到demo页就会显示我们设置的head了

9.2 使用template中的标签定义head

这里面的内容可以动态绑定
注意<Head>、<Title>、<Meta>要首字母大写

<!-- 在demo.vue中使用 -->
<template>
	<div>
		<Head>
			<Title>poem的博客</Title>
      <Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"></Meta>
			<Meta name="description" content="poem的博客" />
			<Meta name="keywords" content="poem,博客" />
		</Head>
	</div>
</template>

还是得回去学一下nuxt2 555

参考：
https://v3.nuxtjs.org/guide/concepts/introduction
https://jspang.com/article/86#toc1