初识nuxt3

开始使用

安装

//使用npx创建脚手架
npx nuxi init <project-name>

cd <project-name>
//安装node_module
yarn install

//启动
yarn dev -o

自动导入

Nuxt自动导入辅助函数、可组合函数和Vue api在应用程序中使用，而无需显式导入它们。基于目录结构，每个Nuxt应用程序还可以对自己的组件、可组合组件和插件使用自动导入。组件、可组合组件或插件可以使用这些功能。

在文档中，没有显式导入的每个函数都是由Nuxt自动导入的，可以在代码中原样使用。

Nuxt 自动导入

Nuxt自动导入函数和composables来执行data fetching，访问app context和runtime config，管理state或定义组件和插件。

<script setup>
  /* useAsyncData() and $fetch() 将被自动导入 */
  const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
</script>

Vue 自动导入

Vue 3公开了诸如ref 、 computed等反应性api，以及Nuxt自动导入的生命周期钩子和帮助器

<script setup>
  /* ref() and computed() are auto-imported */
  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

Explicit 导入

Nuxt使用#imports别名公开每个自动导入，如果需要，可以使用该别名显式导入:

<script setup>
  import { ref, computed } from '#imports'
  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

关闭自动导入

如果你想关闭自动导入,你可以将 imports.autoImport设置为 false

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

Components 目录

components/目录是您放置所有Vue组件的地方，然后可以在您的页面或其他组件中导入这些组件，Nuxt自动导入你的components目录中的任何组件(以及你可能正在使用的任何模块注册的组件)。

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

默认情况下，任何扩展名在nuxt.config.ts extensions键]中指定的文件都被视为组件。 如果你需要限制应该注册为组件的文件扩展名，你可以使用组件目录声明的扩展形式及其extensions键

export default defineNuxtModule({
  components: [
    {
      path: '~/components',
     extensions: ['.vue'],
    }
  ]
})

如果你在嵌套目录中有一个组件,组件的名称将基于它自己的路径、目录和文件名，删除重复的段。<BaseFooButton />
如果你想只根据组件的名称而不是路径自动导入组件，那么你需要使用配置对象的扩展形式将pathPrefix选项设置为false.

Dynamic Components

如果你想使用Vue <component :is="someComputedComponent">语法，那么你将需要使用Vue提供的resolveComponent辅助方法。

<template>
  <component :is="clickable ? MyButton : 'div'" />
</template>

<script setup>
const MyButton = resolveComponent('MyButton')
</script>

使用resolveComponent来处理动态组件，请确保除了组件名称之外不插入任何内容，组件名称必须是字符串而不是变量。

Dynamic Imports

要动态导入一个组件(也称为惰性加载组件)，你所需要做的就是在组件名称前添加Lazy前缀。

<template>
  <div>
    <TheHeader />
    <slot />
    <LazyTheFooter />
  </div>
</template>

ClientOnly Component

Nuxt 提供了组件，目的是只在客户端呈现一个组件。若要只在客户端导入组件，请在客户端插件中注册该组件。

如果组件只能在客户端呈现，则可以添加.client 后缀到您的组件。例：Comments.client.vue
.server 组件:.server 组件既可以单独使用，也可以与.client组件配对使用。

DevOnly Component

<template>
  <div>
    <Sidebar />
    <DevOnly>
      <!-- this component will only be rendered during development -->
      <LazyDebugBar />
    </DevOnly>
  </div>
</template>

Composables 目录

Nuxt 3使用composables/目录使用auto-imports自动将Vue组合导入到应用中!
在底层，Nuxt自动生成文件.nuxt/imports.d.ts来声明类型。

为了让Nuxt生成类型，你必须运行nuxi prepare, nuxi dev 或 nuxi build。如果你在没有运行开发服务器的情况下创建了一个可组合对象，TypeScript会抛出一个错误，比如Cannot find name ‘useBar’.

export const useFoo = () => {
  return useState('foo', () => 'bar')
}

现在可以在 .js, .ts 和 .vue 文件中使用自动导入组合

<template>
  <div>
    {{ foo }}
  </div>
</template>

<script setup>
const foo = useFoo()
</script>

Nuxt只扫描 composables/ 目录的顶层文件

扫描composables/文件夹内的嵌套目录:

export default defineNuxtConfig({
  imports: {
    dirs: [
      // Scan top-level modules
      'composables',
      // ... or scan modules nested one level deep with a specific name and file extension
      'composables/*/index.{ts,js,mjs,mts}',
      // ... or scan all modules within given directory
      'composables/**'
    ]
  }
})