@dxup/nuxt (英语)

这是改进了 Nuxt DX 的 TypeScript 插件.

[!注] 现在它是Nuxt的实验性内建特征. 请参看 文档 更多细节.

安装

使用 Nuxt 4.2 或以上时不需要安装.

使用量

1. 有过 @dxup/unimport 如果您未启用此选项, 则安装为依赖 shamefullyHoist 选项.

2. 在您的 nuxt.config.ts数字 :

   export default defineNuxtConfig({
     experimental: {
       typescriptPlugin: true,
     },
     dxup: {
       features: {
         // Enable opt-in features
         namedLayoutSlots: true,
       },
     },
   });
   

3. 运行 nuxt prepare 并重新启动 tserver .

特征

1. 构成部分

重命名自动导入组件文件时更新引用 .

例如,重命名时 components/foo/bar.vue 改为 components/foo/baz.vue,所有用途 <FooBar /> 将更新到 <FooBaz />。 。 。 .

它只有在dev服务器活动时才有效.

2. 从 Glob 导入

使用 glob 模式定义动态导入 .

import(`~/assets/${name}.webp`);
//     ^^^^^^^^^^^^^^^^^^^^^^^
import.meta.glob("~/assets/*.webp");
//               ^^^^^^^^^^^^^^^^^

3. 被命名为LayoutSlots的卫星站

默认 : false

在页面中写入顶级命名槽 :

<!-- layouts/center.vue -->
<template>
  <slot />
  <slot name="side" one="one"/>
</template>

<!-- pages/about.vue -->
<script lang="ts" setup>
  definePageMeta({
    layout: "center",
  });
</script>

<template>
  <template #side="{ one }">
    This "{{ one }}" comes from the layout slot.
    <!--     ^^^ -->
  </template>
  <div>About Page</div>
</template>

并将自动传送到活动布局.

布局可以访问活动页面随所导入的自动传送的槽 useLayoutSlots 可堆叠 :

<!-- layouts/center.vue -->
<script lang="ts" setup>
  const slots = useLayoutSlots();
</script>

<template>
  <slot/>
  <aside v-if="slots.side">
    <slot name="side"/>
  </aside>
</template>

4. 硝基鲁特

在数据获取方法中去定义硝基线.

useFetch("/api/foo");
//       ^^^^^^^^^^
// Also `$fetch` and `useLazyFetch`.

解析 URL 会退后 public 无法匹配硝基路由时的目录.

5. 页面Meta

转到页面元数据的定义 .

definePageMeta({
  layout: "admin",
  //      ^^^^^^^
  middleware: ["auth"],
  //           ^^^^^^
});

6. 运行时间

转到运行时配置的定义 .

<template>
  {{ $config.public.domain }}
  <!--              ^^^^^^ -->
</template>

7. 打印页

转到打入页面的定义 .

<template>
  <nuxt-link :to="{ name: `about` }"/>
  <!--                    ^^^^^^^ -->
</template>

它可以被触发在 name 受下列条件限制的对象的属性: RouteLocationRaw 类型.

8. 不进口

请参看 @ dxup/ 未导入 软件包,以获取更多细节.

9. 非正式

在 <template>。 。 。 .

....<template>
<!-- ^^^^^^^^ -->
</template>