vue3项目中API自动按需引入和组件自动按需注册

前言

在vue2开发的时候是optionsAPI，想用什么api都可以通过this.xx去调用，钩子也可以直接使用。现在vue3中compositonAPI没有了vue的实例，想用什么API就需要从vue或者vue-router等等中按需引入。

那么就有个问题，在代码不多的时候还好。但是很多需要滚动时想使用未引入API的时候，就会频繁的滚动代码编辑器去引入,这时就会很麻烦。

插件

在这里推荐两个插件

自动引入插件
npm i -D unplugin-auto-import

自动注册插件
npm i -D unplugin-vue-components

配置

安装完成之后在vite.config.ts里面配置。配置完成后保存，会产生两个.d.ts文件。这个是不需要管的。

// 顶层引入
import AutoImport from "unplugin-auto-import/vite";
import Componengts from "unplugin-vue-components/vite";

// defineConfig里在plugins里配置
plugins: [
      AutoImport({
        // 配置需要自动引入的组件
        imports: ["vue", "vue-router", "pinia"],
        // 创建全局 d.ts声明文件
        dts: "src/auto-imports.d.ts",
        // Auto import inside Vue templates
        vueTemplate: true,
        // vant自动按需引入
        resolvers: [VantResolver()],
        dirs: []
      }),
      // 自动组件注册插件
      Componengts({
        // 定义哪里的组件需要。这里的配置是全局components和局部文件的components都需要按需引入
        dirs: ['src/components', 'src/**/components'],
        // 扩展那些文件
        extensions: ["vue", 'md'],
        // 允许自动导入和注册的组件
        include: [/\.vue$/, /\.vue?vue/, /\.md$/],
        // vant自动注册组件
        resolvers: [VantResolver()],
        // 创建全局 d.ts声明文件
        dts: "src/components.d.ts",
      }),
    ],

有这两个文件的出现，说明配置成功

项目中使用

这样就可以在项目中直接使用，不需要再次引入了，组件也是一样的

注意点

在vue3一般都会使用ts，如果需要用到vue中或者第三方依赖中的类型时是需要自己引入的

比如以下代码,使用了vue中的 PropType没有引入，那么就会报错

<template>
  <div>
    <div>{{ count }}</div>
    <div>{{ data?.list }}</div>
  </div>
</template>

<script setup lang="ts">
type data = {
  list: {
    id: number
    name: string
  }[]
}
const props = defineProps({
  count: Number,
  data: Object as PropType<data>
})
</script>

解决办法

就是在script的顶层中引入

import { type PropType } from 'vue'

这样就正常显示了

总结

使用这两个插件，可以完成vue的API的按需引入，和第三方依赖的按需注册（比如：pinia、echarts、vant等等），但是如果需要使用第三方的ts类型时，是不支持自动的，需要手动在项目中引入。

目前就这些了，如果有问题的可以在评论区留言，我会上来看看的～