项目源码

项目源码-Vue3项目05-自动导入插件使用

2025年1月7日
hangzi

Last Updated on 2025年1月7日 by hangzi

自动导入插件使用

1、安装依赖

pnpm add -D unplugin-auto-import unplugin-vue-components

2、未配置自动导入插件效果：

部分代码内容：

<script setup>

import HelloWorld from "@/components/HelloWorld.vue";
import {useRouter} from 'vue-router';
import {ref} from "vue";

const routesList = ref([])

const router = useRouter();
let routes = router.getRoutes();
routes.sort((a, b) => a.meta.menuOrder - b.meta.menuOrder)
routesList.value =  routes;
</script>

3、配置自动导入

src目录新建types目录，用于自动导入函数或组件声明文件目录

vite.config.js 内容：

import {defineConfig} from "vite"
import vue from "@vitejs/plugin-vue"
import {fileURLToPath, URL} from "url";
import {resolve} from "path";

const pathSrc = resolve(__dirname, "src");

import AutoImport from "unplugin-auto-import/vite"
import Components from "unplugin-vue-components/vite";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
            imports: ["vue", "vue-router"],
            // 指定自动导入函数TS类型声明文件路径 
            // 也可以不生成声明文件 dts: false
            dts: resolve(pathSrc,"types","auto-imports.d.ts"),
        }),
        Components({
            // 指定自动导入组件TS类型声明文件路径
            // 也可以不生成声明文件 dts: false
            dts: resolve(pathSrc,"types","components.d.ts"),
        }),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

4、配置自动导入插件效果