vue项目实现包自动导入

最新推荐文章于 2025-04-22 08:30:00 发布

原创最新推荐文章于 2025-04-22 08:30:00 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #vue.js #前端 #webpack

在前端vue项目开发中，随着项目的整体结构满满变大，所需要的依赖，通用化组件等会慢慢变多，这使得一个单页面的开发中所引用的依赖也会满满变多，10个，20个，30个甚至更多。

<script setup lang="ts">
// 导入 Vue 依赖
import { ref, reactive, computed, watchEffect } from 'vue';

// 导入 Element Plus 组件
import { ElButton, ElInput, ElTable, ElDialog, ElForm, ElFormItem, ElSelect, ElOption, ElDatePicker, ElTimePicker } from 'element-plus';
import { ElMessage, ElNotification, ElLoading } from 'element-plus';
import { ElPagination, ElTableColumn, ElDropdown, ElDropdownItem, ElDropdownMenu, ElTooltip, ElCheckbox, ElRadioGroup, ElRadioButton } from 'element-plus';

// 导入其他第三方库
import axios from 'axios';
import _ from 'lodash';
import dayjs from 'dayjs';
import echarts from 'echarts';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
import xlsx from 'xlsx';
import moment from 'moment';

// 导入项目内部的工具和组件
import useAuth from '@/composables/useAuth';
import { useRouter, useRoute } from 'vue-router';
import useStore from '@/store';
import MyCustomComponent from '@/components/MyCustomComponent.vue';
import AnotherCustomComponent from '@/components/AnotherCustomComponent.vue';
import useFetchData from '@/composables/useFetchData';
import useFormatter from '@/utils/useFormatter';
import useValidator from '@/utils/useValidator';
import useEventBus from '@/composables/useEventBus';

</script>

这是一个在开发中可能会存在的一个的一个页面情况，script部分导入了许多依赖，使得代码变得冗余，而unplugin-auto-import这个插件可以很好的帮你解决这个问题。

01安装

使用npm安装该插件。

npm install unplugin-auto-import

02配置

根据你的实际项目所使用的是哪一个脚手架去选择相应文件。我们这里使用的是vite脚手架，找到它的配置文件vite.config.js，加入这个语句。

import autoImport from 'unplugin-auto-import/vite'

后面的vite是可选项，如果你的项目是webpack构建的，那么就选择webpack，vue-cli是基于webpack的，所以选择webpack即可。接下来对这个插件做一些配置。

export default defineConfig({
  plugins: [
    vue(), autoImport({
      imports: ['vue', 'vue-router'],
      dirs: ['./src/components/'],
      dts: './src/autoImports.d.ts'
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

我们重点关注imports，dirs，dts三个配置。首先imports是指你要在你的项目中自动导入哪些包，这里我们选择了vue，vue-router这两个常见的包，第二dirs是指你要在你的项目中自动导入哪个目录下的文件，这里我们选择了src目录下的components下的所有组件自动导入，最后如果你的项目是ts搭建的，你会发现项目会报错，这是因为自动导入后，删除了对应依赖导入语句，导致了类型丢失问题，而dts可以解决，它是指在将所有要自动导入的依赖和插件都放在src目录下的autoImports.d.ts文件中，让项目可以在全局中找到。接下来你就可以删掉对应的依赖导入语句，而且不会影响项目的正常运行。

更多详细配置见unplugin-auto-import官方文档