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自定义依赖引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文介绍了Vue keep-alive组件的使用及如何清除缓存,给大家分享清除缓存的几种方法,结合实例代码给大家讲解的非常详细,需要的朋友跟随小编一起看看吧2023-10-10
今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
这篇文章主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
解决Vue控制台报错Failed to mount component: tem
这篇文章主要介绍了解决Vue控制台报错Failed to mount component: template or render function not defined.问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue全局混入之状态判断是否执行点击方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家详细介绍了vue使用laydate时间插件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
本文详细讲解了Vue实现TabBar底部导航栏的方法，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
在 Vue 的开发世界里,响应式数据是构建交互性良好应用的基础,之前我们了解了ref用于定义基本类型的数据,今天就来深入探讨一下如何使用reactive定义对象类型的响应式数据,感兴趣的朋友一起看看吧2025-02-02
这篇文章主要介绍了React Diff算法不采用Vue双端对比算法原因详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue .sync修饰符的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论