Nuxt3的基本使用Nuxt3是约定式开发，项目是约定大于配置 1. 约定路由 2. NuxtLink标签的使用 3.

注意：Nuxt3是约定式开发，项目是约定大于配置

1. 约定路由

<NuxtPage></NuxtPage>  相当于路由的出口

2. NuxtLink标签的使用

 <NuxtLink to="/demo1">Demo1.vue</NuxtLink>   跳转到demo1.vue页面

3. Nuxt3动态路由的使用

(1) 单参数的传递：单参数的传递只要在页面的文件名中用[ ]扩起来就可以了,新建一个页面demo2-[id].vue

-| pages/ 
---| index.vue 
---| demo2-[id].vue

使用[ ]的形式就可以设置一个页面的传参,参数接收可以使用 $route.params.id的形式。
(2) 多参数的传递：如果要传递是两个参数,首先需要建立一个文件夹，然后在文件夹上使用[ ]来确定参数，比如我们要传递一个name的参数过来，就需要把目录和文件建立成这样。

-| pages/ 
---| index.vue 
---| goods-[name]/ 
-----| demo2-[id].vue

跳转对应页面传递两个参数

<NuxtLink to="/goods-jspang/demo2-38">Demo2.vue</NuxtLink>

4. Nuxt3 嵌套路由的使用

用一句话解释为：目录和文件名同名，就制作了一个嵌套路由。

--pages 
|----parent/ 
|-------child.vue
|-------Two.vue
|----parent.vue

<NuxtLink to="/parent/child">/parent/child</NuxtLink>
<NuxtLink to="/parent/two">/parent/two</NuxtLink>

5. Nuxt3布局模板让开发高效起来

布局模板的作用就是你先定义好一个布局页面，然后提取一些通用的UI或代码到可重用的模板中，提高代码复用性，从而降低代码的复杂度，让代码重用性提高。
简单说就是把一些通用的UI代码代码提出来，然后放在一个模板里，使用这个模板的每个页面都拥有这些代码UI了。
比如现在新建一个文件夹layouts然后再里边写编写一个 defalut.vue文件，代码如下。

<template> 
   <div> 
      我是布局模板页面
      单个插槽
      <slot />
      可增加多个插槽
      <slot name="one" /> 
      <slot name="two" /> 
   </div> 
</template>

上边这段代码就相当于你创建了一个布局模板,有了这个模板后，可在任何你想要使用的页面中用<NuxtLayout>标签为页面赋予模板中的内容,比如我们想在每个页面中都赋予这个模板中的内容，就可以在 app.vue 页面中使用这个标签。

<template> 
   <NuxtLayout name="default"> 
      <div> 
        <NuxtPage></NuxtPage> 
        单个插槽
      </div> 
      <template #one> 我是one中的内容 </template>
      <template #two> 我是two中的内容 </template>
   </NuxtLayout> 
</template>

6. Nuxt3 组件的编写

Nuxt3的所有自定义组件，必须写在components目录下，写在这个目录下他会自动加载到页面中。

-|components 
----|MyFooter.vue

使用组件

<MyFooter />

注意：可在布局模板中使用组件

7. Nuxt3 多层级组件、懒加载组件的使用

其实多层级组件就是把一个组件放在一个文件夹里，如下方目录结构

--|components 
----|test 
------|MyButton.vue

多层级组件使用

<TestMyButton />

组件的懒加载

如果在组件名前面加上Lazy前缀，则可以按需懒加载该组件，懒加载组件的目的是在项目打包的时候包更小，可以理解为只有组件显示在页面上时才进行加载，比如我们现在要做一个文本，这个文本只有在 show的值为 true的时候才会显示，然后其他时候他不显示。

--|components 
----|LazyText.vue

8. Nuxt3 模块化代码 composab 文件夹

在开发中我们经常会有一些通用的业务逻辑代码，需要模块化管理，这时候就可以使用composable 这个文件夹来编写。

--|composable 
----|time.ts

页面中使用

//getTime为time.ts中定义的方法名
const time = ref(getTime());

注意：composables 文件夹的引入规则是，只有顶层文件才会被引入

9. Nuxt3中的数据请求

Nuxt3中提供了四种方法：useAsyncData 、useFetch 、useLazyFetch 、useLazyAsyncData ，都是用来获取后台数据的。

useAsyncData的使用

//使用useAsyncData时第一个参数给请求起一个名字(为了防止数据冲突)，第二个参数为回调函数
//$fetch()方法是nuxt3提供的内置方法
//lazy:true 就是需要数据都返回后才显示出来，简单说就是会阻塞页面。
//可配置的选项option官网  https://v3.nuxtjs.org/api/composables/use-async-data
const url = "https://api.kuizuo.cn/api/hot";
const res = await useAsyncData("getList", () => $fetch(url), { lazy: true });
//取数据时需写_rawValue，nuxt自动包装了一下
const list = ref(JSON.parse(res.data._rawValue).items);

useFetch的使用

const res2 = await useFetch(url);
//可传参
const res2 = await useFetch(url, { 
    method: "get",
    id: 1
});

useLazyAsyncData 和useLazyFetch 只是把配置选项中的Lazy 设置成了true，也就是会阻塞页面,用法同上。

10. Nuxt3 middleware路由中间件

Nuxt3提供了路由中间件的概念，可以在整个应用使用它，目的是在导航到某一个页面之前，执行一些代码，最常见的路由守卫就可以用这个实现。
下方文件中的.global代表这个中间件是全局的，也就是在每次跳转都会执行下面的代码。

--|middleware 
----|default.global.ts

export default defineNuxtRouteMiddleware((to, from) => { 
    console.log("要去那个页面:"+to.path) 
    console.log("来自那个页面:"+from.path) 
})

只对一个页面起作用

如果只想中间件对一个特殊页面起作用，去掉.global的后缀就可以。

--|middleware 
----|default.ts

这时候它对任何页面都是不起作用的，需要再去对应的页面里注册一下，代码如下。

<template> 
    <div class="">Demo7 Page</div> 
</template> 

<script setup> 
    definePageMeta({ 
        middleware: ["default"], 
    });
</script>

11. Nuxt3 中SEO相关的配置

使用Nuxt3框架解决的主要问题就是要对搜索引擎友好，搜索引擎可以搜到想要的东西要归功于HTML中的Mate标签和title 标签。

title 和 meta 标签的作用

title标签：主要是为了告诉搜索引擎网站标题是什么，然后搜索引擎才会根据你提供的的title给你打上tag，用户在搜索的时候才会搜索到你。 meta标签：这个标签根据name的不同有很多种，和SEO相关的主要是name=description 和name=keywords 这两种，如果不设置这两个标签，对SEO的效果就会有所影响。所以我们在开发需要SEO的网站时，对这两个标签一定要进行设置。

Nuxt3中的useHead 和useMeta

Nuxt3中提供了 useHead方法来设置SEO需要的内容，用它可以设置HTML中Head的全部内容，包括meta标签的内容。

<template> 
    <div class="">Demo8 Page</div> 
</template> 
<script setup> 
useHead({ 
    title: " 测试网站", 
    viewport: "width=device-width,initial-scale=1,maximum-scale=1 ", 
    charset: "utf-8", 
    meta: [ 
    { name: "description", content: "前端技术" }, 
    { name: "keywords", content: "测试" }, 
    ], 
}); 
</script>

12. pinia的使用

安装

npm i @pinia/nuxt

注意：有时候安装完会报错(Cannot find module 'pinia/dist/pinia.mjs')需要使用

npm install --save pinia @pinia/nuxt pinia-plugin-persist --legacy-peer-deps

在nuxt.config.ts中配置

 buildModules: ["@pinia/nuxt"],

13. plugins 插件的使用

在文件名后面加上后缀.server 仅作用于服务端
在文件名后面加上后缀.client 仅作用于客户端
使用defineNuxtPlugin()注册插件

Nuxt3的基本使用