Vue3 自动引入组件与组件库的方法实例

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情

前言

在做 vue3 项目中时，每次使用都需要先进行引入，用 ts 的还好，会有爆红提示，如果是使用 js 开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入，就会很浪费时间，偶然发现一款好用的组件可以帮助我们很好的解决这种问题。

首先下载

安装

yarn add unplugin-auto-import -D  

引入

在 vite.config.ts 中 因为是插件 所以在我们的 plugins 下 写入我们导入的名字

imports

在我们的 AutoImport 下第一个属性 imports 代表着的就是我们那些文件需要自动导入。

我们这里就写了 vue vue-router pinia 在项目中使用的时候就可以不用我们手动导入直接使用了。

这里注意我们的 imports 是一个数组。

dts

第二个属性就是我们的 dts。

dts 为 true 就代表着会自动生成一个 ts 文件可以查看导入的信息。

include

这里 include 是可以匹配对应的文件。

是一个数组里面写匹配的正则。

引入

在引入的时候需要引入 unplugin-auto-import 下的 vite。

import AutoImport from 'unplugin-auto-import/vite'
 plugins: [vue(),Vuejsx(),
    AutoImport({
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
        /\.vue\?vue/,
      ],
      dts: true,
      imports: ['vue', 'vue-router', 'pinia']
    })]

然后在页面使用。

会发现爆红，这里是因为在当前页面没有引用导致，（这就是这个组件使用ts的缺陷还没找到解决办法）不用管它 直接运行项目。

运行不会有报错。

发现会在 src 同级目录下自动生成一个同级文件 auto-imports.d.ts。

自动引入组件库

安装

yarn add unplugin-vue-components -D

下载 ant-design 测试

npm i --save ant-design-vue

在 vite.config.ts 中引入

import Components from 'unplugin-vue-components/vite' 

在引入 import { } from 'unplugin-vue-components/resolvers' ctry 加鼠标进入 resolvers.d.ts。

里面有各大主流组件库的名字 找到我们需要引入的组件库 ant -design（需要配置其他的组件库可找对应组件库名）。

找到并引入 AntDesignVueResolver。

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

首先也需要在 plugins 中引入我们定义的名字 Components。

Components（{}）

是一个对象

dts

第一个参数跟上面一样设置为 true 也是会自动生成一个 d.ts 的文件

dirs

第二个参数就是dirs就是配置你的目录，你可以设置src,或者src/componets或者你需要配置的地方的组件让他自动导入，其他的组件不管

extensions

扩展属性

['vue', 'jsx', 'tsx', 'ts', 'js']

resolvers

最后这个 resolvers 就是我们的包自动导入。

将我们上面引入的 AntDesignVueResolver 导进来进行配置。

resolvers: [
  AntDesignVueResolver({
  })
]

Components({
  dts: true,
  dirs: ['src/components'],
  extensions: ['vue', 'jsx', 'tsx', 'ts', 'js'],
  resolvers: [
    AntDesignVueResolver({
    })
  ]
})