1.composables目录,此目录文件夹下导出的方法可以在页面文件中直接调用。
2.layouts 文件夹下的文件,比如创建了一个 header.vue 然后在里面记得一点要放 <solt /> 标签,也就是后期页面文件渲染的位置。
直接在页面中用 NuxtLayout 标签包裹 name 要等于那个文件,例如:
<NuxtLayout name="header"></NuxtLayout>
3.不想使用 layout 布局,也可以关闭
definePageMeta({
layout: false // 手动关闭 default 布局
})
4.嵌套:如果组件嵌套在目录内,可以用驼峰式 例如,components/user 下有个 avatar 组件
<!-- components/user/avatar.vue 文件 -->
<template>
user avatar
</template>
<!-- app.vue 文件 -->
<template>
Hello, World!
<UserAvatar /> <!-- avatar 组件将被按需自动引入并注册 -->
</template>
5.导航
<!-- 点击将跳转到 /about 页面 -->
<NuxtLink to="/about"> to about </NuxtLink>
6.原信息 我们可以通过 definePageMeta 设置当前路由的元信息
definePageMeta({
foo: 'bar'
})
// 获取当前路由
const route = useRoute()
// 获取元信息
const { meta } = route
console.log(
toRaw(meta) // 输出 { foo: 'bar' }
)
7.状态共享:使用 useState 可以定义简单的共享状态,例如在 composables 中定义 useCounter
// composables/useCounter.ts
// composables 下模块的同名导出将被自动按需引入
export const useCounter = () => useState('counter', () => 100)
useState 的第一参数为 key,第二参数为初始化的工厂函数
此时在 index 页面中可以直接使用 useCounter
<!-- pages/index.vue 文件 -->
<script lang="ts" setup>
const conuter = useCounter() // 这是按需自动引入的
</script>
<template>
<div> <!-- 顶层的 div 包裹是必需的,不然跳转会丢失状态 -->
<div @click="conuter++">{{ conuter }}</div>
<NuxtLink to="/home">to home</NuxtLink>
</div>
</template>
// home 页面中也可以直接使用
<!-- pages/home.vue -->
<script lang="ts" setup>
const conuter = useCounter()
</script>
<template>
<div @click="conuter++">{{ conuter }}</div>
</template>
注意:useState 只允许在生命周期中使用。
8.数据获取:nuxt3 中内置了以下四种请求的方法
useFetch
useLazyFetch
useAsyncData
useLazyAsyncData
9.tdk数据修改
useHead({
title: '1111',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
10.中间件:middleware文件夹下的文件是中间件
definePageMeta({
middleware: "auth",
});
// 这个auth 直接对应middleware文件夹下的文件名
<!-- middleware/auth.ts -->
export default defineNuxtRouteMiddleware((to, from, next) => {
// 可以做逻辑处理
// return navigateTo("/home");
});
11.打包:
npm run build 后会生成个 .output 文件夹,子目录有个 server 里有个 index.mjs 运行它
注意:打包后css样式都是内联,如想打包成css文件形式,要在nuxt.config.ts文件中加入以下代码。
inlineSSRStyles 默认为true,改为false即可。
请注意,这可能会有一些副作用,我目前还没有遇到。
export defineNuxtConfig({
experimental: {
inlineSSRStyles: false // or a function to determine inlining
}
})