Nuxt3的基础

Nuxt3

安装

pnpm dlx nuxi init <project-name>

npx nuxi init <project-name>

页面结构

assets   // css image sass fonts....
components   // 组件 ，nuxt会自动引入这个文件夹下面的组件，不用手动引入
composables   // 这个文件夹下面的文件中暴露出来的方法可以在页面中直接使用。
layouts   // 布局
middleware  // 中间件
pages   // 页面 
plugins  // 插件
public   //This is known as the static/ directory in Nuxt 2.
utils  //Nuxt 3 uses the utils/ directory to automatically import helper functions and other utilities throughout your application using auto-imports!

NuxtPage

nuxt2 中渲染路由试图 使用 nuxt 和 nuxt-child 来渲染
nuxt3 中全部使用NuxtPage来渲染

NuxtLayout

布局中的nuxt 换为 slot 来使用

页面中也要使用 来展示，并*传入name指定layout名称

先来回顾下nuxt2 中的layout怎么使用

//  /layout/Blog.vue   创建布局
<template>
  <div>
    <div>header</div>
    <Nuxt></Nuxt>
    <div>foot</div>
  </div>
</template>


// pages/index.vue
// 页面中引入即可
export default {
	layout:"Blog"
}

nuxt3中：

//  /layout/Blog.vue   创建布局
<template>
  <div>
    <div>header</div>
     <slot />    
    <div>foot</div>
  </div>
</template>

// pages/index.vue
// 页面中引入即可
<template>
  <NuxtLayout name="Blog">
    <div>this is the homepage</div>
  </NuxtLayout>
</template>

特殊情况：

在根文件中使用了layout，在某个目录下不想使用这个layout 可以进行更换

// app.vue

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>


// pages/detail.vue

<script setup>
// This will work in both `<script setup>` and `<script>`
definePageMeta({
  layout: "custom",  // 在这个地方可以设置此页面使用custom布局，而不是和app.vue一样的布局
});
</script>

definePageMeta

这个是用来配置页面。详细：

<script setuo>
    definePageMeta({
        keepalive: true ,
        key: (route) => route.fullPath,
        layout:'xxx' , // 设置布局
        middleware :'x', // 当前页面中间件
        validate(){return true},  // 验证路由参数 ，返回true才通过
        .....
    })
</script>

设置head头部信息

1.全局设置

// nuxt.config.js
xxx,
xxx,
xxx,
app: {
  head: {
    meta: [
      // <meta name="viewport" content="width=device-width, initial-scale=1">
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    script: [
      // <script src="https://myawesome-lib.js"></script>
      { src: 'https://awesome-lib.js' }
    ],
    link: [
      // <link rel="stylesheet" href="https://myawesome-lib.css">
      { rel: 'stylesheet', href: 'https://awesome-lib.css' }
    ],
    // please note that this is an area that is likely to change
    style: [
      // <style type="text/css">:root { color: red }</style>
      { children: ':root { color: red }', type: 'text/css' }
    ],
    noscript: [
      // <noscript>Javascript is required</noscript>
      { children: 'Javascript is required' }
    ]
  }
}

1. 页面单独设置(useHead)

   <script setup>
   useHead({
     title: '',
       meta:xxx
   });
   </script>
   

数据交互

useAsyncData

useFetch

useLazyAsyncData

useLazyFetch

// 主要使用 useAsyncData 和 useFetch

<script setup>
    let url =
  "https://www.fastmock.site/mock/6405986d1d74fb37597d8fbd15da76e7/demo/getlist";
	const { data, pending, error, refresh } = await useFetch(url);
	const { data, pending, error, refresh } = await useAsyncData("getList", () =>$fetch(url))
    
    // 注意使用的时候用 data.value 
</script>

middleware

使用defineNuxtRouteMiddleware 这个方法来创建

export default defineNuxtRouteMiddleware((to, from) =>
  if (to.params.id === '1') {
    return abortNavigation()
  }
  return navigateTo('/')
})

Plugins

使用defineNuxtPlugin

export default defineNuxtPlugin(nuxtApp =>
  // Doing something with nuxtApp
})