前端模块自动导入的插件

news2024/9/20 20:39:37

前言

开发中通常会有很多导入语句，如何确保一些通用的api和hook无需每次手动导入即可使用。

<script setup lang="ts">
import { ref, reactive } from "vue"
import { useRoute, useRouter } from "vue-router"
import { login } from "./api/user"

const count = ref(0)
const user = reactive({})
const route = useRoute()
const router = useRouter()
</script>

实现

下载unplugin-auto-import

npm i -D unplugin-auto-import

这里以 vite 举例，vite.config.ts如下：

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

import AutoImport from "unplugin-auto-import/vite"

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], // 第三方模块
      dirs: ["./src/api"], // 本地
    }),
  ],
})

配置完毕后，无需导入即可使用

<script setup lang="ts">
// import { ref, reactive } from "vue"
// import { useRoute, useRouter } from "vue-router"
// import { login } from "./api/user"

const count = ref(0)
const user = reactive({})
const route = useRoute()
const router = useRouter()
</script>

如果是ts项目，由于没有导入语句导致类型丢失

在这里插入图片描述

增加配置项dts即可，路径随意

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

import AutoImport from "unplugin-auto-import/vite"

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], // 第三方模块
      dirs: ["./src/api"], // 本地
      dts: './src/auto-import.d.ts',
    }),
  ],
})