Nuxt3.js 使用小记

记录 Nuxt3.js 的目录规则，内置方法。

2023-08-30 16:21:03

3852 热度

1284 浏览

1.composables目录，此目录文件夹下导出的方法可以在页面文件中直接调用。

2.layouts 文件夹下的文件，比如创建了一个 header.vue 然后在里面记得一点要放 <solt /> 标签，也就是后期页面文件渲染的位置。

vue 复制代码

直接在页面中用 NuxtLayout 标签包裹 name 要等于那个文件，例如：
<NuxtLayout name="header"></NuxtLayout>

3.不想使用 layout 布局，也可以关闭

javascript 复制代码

definePageMeta({
  layout: false // 手动关闭 default 布局
})

4.嵌套：如果组件嵌套在目录内，可以用驼峰式例如，components/user 下有个 avatar 组件

vue 复制代码

<!-- components/user/avatar.vue 文件 -->
<template>
    user avatar
</template>

<!-- app.vue 文件 -->
<template>
    Hello, World!
    <UserAvatar /> <!-- avatar 组件将被按需自动引入并注册 -->
</template>

5.导航

vue 复制代码

<!-- 点击将跳转到 /about 页面 -->
<NuxtLink to="/about"> to about </NuxtLink>

6.原信息我们可以通过 definePageMeta 设置当前路由的元信息

javascript 复制代码

definePageMeta({
    foo: 'bar'
})
// 获取当前路由
const route = useRoute()

// 获取元信息
const { meta } = route
console.log(
    toRaw(meta) // 输出 { foo: 'bar' }
)

7.状态共享：使用 useState 可以定义简单的共享状态，例如在 composables 中定义 useCounter

typescript 复制代码

// 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 中内置了以下四种请求的方法

javascript 复制代码

useFetch
useLazyFetch
useAsyncData
useLazyAsyncData

9.tdk数据修改

javascript 复制代码

useHead({
  title: '1111',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})

10.中间件：middleware文件夹下的文件是中间件

javascript 复制代码

definePageMeta({
  middleware: "auth",
});
// 这个auth 直接对应middleware文件夹下的文件名
<!-- middleware/auth.ts -->
export default defineNuxtRouteMiddleware((to, from, next) => {
    // 可以做逻辑处理
    // return navigateTo("/home");
});

11.打包：

bash 复制代码

npm run build 后会生成个 .output 文件夹，子目录有个 server 里有个 index.mjs 运行它

注意：打包后css样式都是内联，如想打包成css文件形式，要在nuxt.config.ts文件中加入以下代码。

inlineSSRStyles 默认为true，改为false即可。

请注意，这可能会有一些副作用，我目前还没有遇到。

javascript 复制代码

export defineNuxtConfig({
  experimental: {
    inlineSSRStyles: false // or a function to determine inlining
  }
})

转载：转载请注明原文链接 - Nuxt3.js 使用小记

0/50

暂无评论，快来抢沙发吧~

评论 (0)