组件自动注册

原创已于 2023-09-21 11:24:22 修改 · 332 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-06-25 10:57:28 首次发布

文章介绍了如何使用unplugin-vue-components插件来自动注册Vant等UI组件库，避免手动导入。通过安装插件，配置vite.config.ts，可以实现组件的自动注册，同时解决了类型声明和样式重复引入的问题。此方法同样适用于其他UI库，只需配置对应的解析器。

使用Vant等UI组件库比较麻烦，需要先导入组件才可以使用

组件自动注册：无需在 script setup 中导入，直接使用（不是全局注册）

以下以Vant为例

安装插件：

pnpm add unplugin-vue-components -D

配置:vite.config.ts 参考文档

// 组件自动注册插件配置
// 配置 Vant UI 组件库的解析器
import Components from 'unplugin-vue-components/vite' // 插件导入
import { VantResolver } from 'unplugin-vue-components/resolvers' // Vant解析器导入

export default defineConfig({
  plugins: [
    vue(),
    // 插件中配置Vant解析器 使用其他UI库时配置对应解析器就可以
    Components({
      dts: false,  // 不自动生成组件类型文件  导入包后就能识别  解决类型声明文件重复问题
      // importStyle: false 不自动导入样式  已经在 main.ts 导入 解决样式重复引入问题
      // 不设置会自动新建文件components.d.ts
      resolvers: [VantResolver({ importStyle: false })]
    }),
  ]
})

说明：默认 components 文件下的组件也会自动注册

标签

#学习 #vue.js #前端