Vue自定义依赖引入的最佳实践记录
作者：亦世凡华、
在现代前端开发中，vue凭借其灵活性和高效性，已成为开发者们的宠儿，然而随着项目的复杂度提升，如何高效地管理和引入依赖，尤其是自定义引入依赖，成为了许多开发者面临的一大挑战。无论是为了优化加载速度，还是为了提高项目的可维护性，自定义引入依赖不仅是技术上的需求，更是提升开发效率的关键所在。
自动引入JS库使用
在项目中我们可以借助 unplugin-auto-import 插件来实现项目中JS模块(包括：项目本地编写的工具方法及第三方库)的自动引入，终端执行如下命令进行安装，这里采用安装到开发环境依赖即可：
npm install unplugin-auto-import -D
vue自动引入
这里我们借助vite构建工具安装vue框架进行讲解，安装好第三方插件之后我们来到配置文件当中，引入我们安装好的插件然后配置我们常用的vue基本库，如下所示：
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目录下的所有文件都支持自动引入：
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举例我们将自定义引入的插件编写到对象当中，然后在对象当中键是引入我们的插件名称，值是一个数组，数组里面存放插件的方法，如果我们想使用插件的方法就必须引入，不引入是不能被使用的：
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已经可以被执行了：
当然我们配置插件的时候也是可以对我们引入的函数进行配置别名，如下所示：
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进行自动引入的话就需要进行如下配置：
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 插件即可，终端执行如下命令进行安装：
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组件就可以直接使用了，这里简单示例一下，大致就是这个意思：
<template>
<My-Button></My-Button>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>到此这篇关于Vue自定义依赖引入的最佳实践的文章就介绍到这了,更多相关vue自定义依赖引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！