自动引入组件

weapp-vite 可以在编译阶段自动扫描并注册组件，使你在 WXML 中直接使用组件标签而无需手动写入 usingComponents。下文分为“本地组件扫描”与“第三方 UI 解析器”两部分，更多字段说明可参考 配置文档 · 增强能力与调试工具。

项目中的组件自动引入

通过配置 weapp.enhance.autoImportComponents.globs 可以让编译器扫描指定目录，在满足“同时存在 .wxml + .js/ts + .json 且 json.component === true”的情况下自动注册组件。

vite.config.ts

export default <UserConfig>{
  weapp: {
    enhance: {
      autoImportComponents: {
        globs: ['components/**/*'],
      },
    },
  },
}

默认注册规则如下：

• 组件标识取决于文件名，且大小写敏感。例如 HelloWorld.{wxml,ts,json} 会注册为 HelloWorld。
• 如果组件文件命名为 index.*，则使用其父级目录名作为组件名，如 HelloWorld/index.wxml → HelloWorld。

WARNING

注意，自动导入组件这个行为，会自动忽略小程序内置组件，比如 view, text, navigation-bar 等等（所有的标签详见 官方文档 ）

所以你组件不能起和这些同名，忽略内建组件的数据详情见 builtin.auto.ts 源代码

第三方UI库的组件自动引入

对于第三方 UI 库，可通过 Resolver 提供个性化规则。目前内置支持 TDesign 与 Vant，也可以编写自定义 Resolver 来适配其他生态。

vite.config.ts

import { TDesignResolver, VantResolver } from 'weapp-vite/auto-import-components/resolvers'

export default <UserConfig>{
  weapp: {
    enhance: {
      autoImportComponents: {
        resolvers: [
          VantResolver(), 
          TDesignResolver() 
        ],
      },
    },
  },
}

这样你就可以直接在 wxml 中使用对应 UI 库的组件了！

自动导出组件清单

从 weapp-vite 下一个小版本起，编译器会在扫描时同步生成一份 auto-import-components.json 清单，包含“本地扫描到的组件”与“resolver 提供的第三方组件”映射，方便在 IDE 中做补全或排查丢失的组件。默认情况下文件会输出到 vite.config.ts 同级目录，结构类似：

{
  "HelloWorld": "/components/HelloWorld/index",
  "Navbar": "/components/Navbar/Navbar",
  "van-button": "@vant/weapp/button"
}

可通过 autoImportComponents.output 控制清单行为：

export default <UserConfig>{
  weapp: {
    enhance: {
      autoImportComponents: {
        globs: ['components/**/*'],
        output: 'dist/auto-import-components.json', // 自定义输出位置
        // output: false  // 若不需要清单，可显式关闭
      },
    },
  },
}

• 传入相对路径会基于 vite.config.ts 所在目录展开；
• 传入绝对路径则写入指定位置；
• 设置为 false 可完全关闭清单输出。