组件注册

自动引用机制让 Vue 模板无需手动导入和注册组件即可使用。Oiyo 会根据 scan.components 扫描规则启用自动引用机制。

主要解决：

• 按需引入。
• 本地组件、第三方组件库统一接入。
• 模板中的组件拥有类型提示。

扫描源

采用 glob 语法进行文件匹配，扫描源按 使用侧 的导入来源声明。

本地组件

Oiyo 已内置 components/**/*.vue 作为约定扫描源，无需再次配置。

对于非约定目录，可以在 oiyo.config.ts 中显式配置：

import { defineOiyoConfig } from '@skiyee/oiyo/config'

export default defineOiyoConfig({
  scan: {
    components: [
      'ui/**/*.vue',
    ],
  },
})

定义

src
├─ components
│   ├─ OiyoButton.vue
│   └─ order
│      └─ List.vue
└─ ui
    └─ Button.vue

使用

<script setup>
// 无需手动导入注册: import OiyoButton from '~/components/OiyoButton.vue';
// 无需手动导入注册: import OrderList from '~/components/order/List.vue';
// 无需手动导入注册: import Button from '~/ui/Button.vue';
</script>

<template>
  <OiyoButton />
  <OrderList />
  <Button />
</template>

扫描到的组件会获得模板类型提示。

第三方组件库

假设要扫描包名为 @skiyee/ui 的组件库，该库组件的 显式导入注册 方式如下：

import SkButton from '@skiyee/ui/components/sk-button/sk-button.vue'

可以按同一来源显式配置第三方组件库的扫描源：

import { defineOiyoConfig } from '@skiyee/oiyo/config'

export default defineOiyoConfig({
  scan: {
    components: [
      '@skiyee/ui/components/**/*.vue',
    ],
  },
})

使用方式与本地组件一致：

<script setup>
// 无需手动导入注册: import SkButton from '@skiyee/ui/components/sk-button/sk-button.vue';
</script>

<template>
  <SkButton />
</template>

声明技巧

扫描源的声明与显式导入注册的 来源 保持一致。

1. import BizButton from '~/biz-components/button.vue': biz-components/*.vue。
2. import OiButton from '@package/ui/OiButton/OiButton.vue': @package/ui/**/*.vue。

组件命名

组件标签名来自扫描结果。常见原则：

• 本地组件文件名对应组件名。
• 第三方组件名称由组件库文件决定。

验证可用

如果组件或类型不可用，检查：

1. 组件是否在扫描路径内。
2. 扫描源 glob 是否写对。
3. 是否重新运行 oiyo dev 命令。

使用原则

使用时遵循这些原则：

• 若文件放在约定目录，优先利用内置扫描。
• 非约定目录或第三方库，通过 oiyo.config.ts 显式配置。
• 被扫描的组件文件命名采用 PascalCase（大驼峰）风格。