前言
开发中通常会有很多导入语句,如何确保一些通用的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',
}),
],
})
启动项目时会自动在此路径下生成类型文件
ts报错消失,且功能正常