Vue--》掌握自定义依赖引入的最佳实践

在现代前端开发中，vue凭借其灵活性和高效性，已成为开发者们的宠儿，然而随着项目的复杂度提升，如何高效地管理和引入依赖，尤其是自定义引入依赖，成为了许多开发者面临的一大挑战。无论是为了优化加载速度，还是为了提高项目的可维护性，自定义引入依赖不仅是技术上的需求，更是提升开发效率的关键所在。

自动引入JS库使用

vue自动引入

本地文件自动引入

自动引入JS库使用

在项目中我们可以借助 unplugin-auto-import 插件来实现项目中JS模块(包括：项目本地编写的工具方法及第三方库)的自动引入，终端执行如下命令进行安装，这里采用安装到开发环境依赖即可：

npm install unplugin-auto-import -D

vue自动引入

这里我们借助vite构建工具安装vue框架进行讲解，安装好第三方插件之后我们来到配置文件当中，引入我们安装好的插件然后配置我们常用的vue基本库，如下所示：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite" 

export default defineConfig({
  plugins: [
    vue(), 
    AutoImport({
      imports: [
        // auot-import 内置配置了类似 vue、vue-router、react等常用库的引入规则
        "vue", 
      ],
    })
  ],
})

配置完成之后，我们来到.vue文件，不按需引入而是直接使用 ref ，可以看到控制台仍然会打印我们想要的数据，由此可以看到我们的自动引入已经成功了：

本地文件自动引入

如果想配置自己自定义的文件也是可以进行自动引入的，我们在配置文件进行如下配置，可以设置我们本地文件utils目录下的所有文件都支持自动引入：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite" 

export default defineConfig({
  plugins: [
    vue(), 
    AutoImport({
      imports: [
        // auot-import 内置配置了类似 vue、vue-router、react等常用库的引入规则
        "vue", 
      ],
      dirs: [ // 配置本地目录引入规则
        "./src/utils/**", // 配置该utils目录下的所有文件都支持自动引入
      ]
    })
  ],
})

配置完成之后，我们来到.vue文件，不按需引入而是直接使用调用我们utils文件下的某个js文件中导出的函数，可以看到控制台仍然会打印我们想要的数据，由此可以看到我们的自动引入已经成功了：

第三方插件自动引入

如果想配置自定引入第三方插件的库的话，还是需要进行想要的配置，由于这些插件库数据庞大，unplugin-auto-import插件是不会一一帮助我们处理的，其只会处理像vue、react等基础常用的库，我们可以看到提示中unplugin-auto-import给我们提供好了插件：

对于第三方插件的自动引入，使用插件本身会出现两种情况，插件是采用命名导出还是默认导出，这两者的导出格式还是不同的，这里简单的都以具体的例子介绍一遍：

命名导出格式：对于其他没有配置的插件库我们还是要进行如下配置，以lodash举例我们将自定义引入的插件编写到对象当中，然后在对象当中键是引入我们的插件名称，值是一个数组，数组里面存放插件的方法，如果我们想使用插件的方法就必须引入，不引入是不能被使用的：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite" 

export default defineConfig({
  plugins: [
    vue(), 
    AutoImport({
      imports: [
        // auot-import 内置配置了类似 vue、vue-router、react等常用库的引入规则
        "vue", 
        {
          // 对象当中放置我们自定义的插件引入规则
          "lodash": [
            // 底层插件已经帮我配置好了 import { concat } from 'lodash'
            "concat", // 配置该插件的引入规则
          ]
        }
      ],
      dirs: [ // 配置本地目录引入规则
        "./src/utils/**", // 配置该utils目录下的所有文件都支持自动引入
      ]
    })
  ],
})

从下图我们可以看到我们配置引入的lodash中concat已经可以被执行了：

当然我们配置插件的时候也是可以对我们引入的函数进行配置别名，如下所示：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite" 

export default defineConfig({
  plugins: [
    vue(), 
    AutoImport({
      imports: [
        // auot-import 内置配置了类似 vue、vue-router、react等常用库的引入规则
        "vue", 
        {
          // 对象当中放置我们自定义的插件引入规则
          "lodash": [
            "concat", // 配置该插件的引入规则 import { concat } from "lodash"
            ["compact", "cp"] // 配置该插件的引入规则 import { compact as cp } from "lodash"
          ]
        }
      ],
      dirs: [ // 配置本地目录引入规则
        "./src/utils/**", // 配置该utils目录下的所有文件都支持自动引入
      ]
    })
  ],
})

可以看到我们配置的自定义的插件的别名也是生效的：

默认导出：对于默认导出的插件，其主要导出一个模块的主要功能或对象来进行使用，这里就以我们常用的axios进行举例，我们想要使用axios进行自动引入的话就需要进行如下配置：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from "unplugin-auto-import/vite" 

export default defineConfig({
  plugins: [
    vue(), 
    AutoImport({
      imports: [
        // auot-import 内置配置了类似 vue、vue-router、react等常用库的引入规则
        "vue", 
        {
          // 对象当中放置我们自定义的插件引入规则
          "lodash": [
            "concat", // 配置该插件的引入规则 import { concat } from "lodash"
            ["compact", "cp"] // 配置该插件的引入规则 import { compact as cp } from "lodash"
          ],
          "axios": [
            // axios最初使用 import axios from "axios， 配置该插件的引入规则如下
            ["default", "axios"] // import { default as axios } from "axios
          ]
        }
      ],
      dirs: [ // 配置本地目录引入规则
        "./src/utils/**", // 配置该utils目录下的所有文件都支持自动引入
      ]
    })
  ],
})

上面我们对axios进行相应的配置之后，在文件中我们也不需要进行引入了，直接进行使用：

自动引入组件使用

对于经常使用vue框架的开发者来讲，快节奏的开发肯定是需要自动引入vue组件而不是还需要开发者进行引入、注册然后使用等一系列重复的代码编写，上文讲解到的仅仅是对JS库进行的一个自动引入，其是做不到自动引入一个vue组件的功能的，由此我们还是需要借助其他方法来实现我们的自动引入vue组件的功能，对于react开发者来说，react组件本质上是一个方法一个纯粹的JS，所以react组件是直接可以使用上面讲解的自动引入JS库的 unplugin-auto-import 插件即可，终端执行如下命令进行安装：

javascript 复制代码

npm install unplugin-vue-components -D

UI组件库自动引入

对于vue开发者来说，element-plus可谓是其钟爱的UI组件库，其实其官网也是给了我们对其进行自动引入的例子，也是下载我们安装的插件，然后配置对于的命令即可，如下所示：

OK，这里我们也是按照官方文档的示例对我们的element-plus进行自动导入：

回到vue组件处，往常我们使用UI组件还需要对组件进行按需引入，现在我们却是直接使用组件库的标签即可，如下所示：

本地vue组件自动引入

如果想配置本地的vue组件自动引入的话也是非常简单，一般我们开发者把公共的组件都放置在components文件下，所以我们对本地的vue组件配置如下命令即可：

回到我们的App根组件，然后我们无需导入直接使用我们的组件：

自定义组件库自动引入

如果有开发者自己开发了一套组件库，然后想自定义进行引入依赖的话，也是可以记住该插件进行自动引入的，只需要我们在配置文件中进行如下配置即可：

当然我们这里是没有myUI组件库的，这里仅仅是做一个示例，myUI组件库的特点就是每个标签都是由My-进行构成的：

引入完成之后我们在vue组件就可以直接使用了，这里简单示例一下，大致就是这个意思：

html 复制代码

<template>
    <My-Button></My-Button>
</template>

<script setup>
</script>

<style scoped lang="scss">

</style>