在現(xiàn)代前端開(kāi)發(fā)中，vue憑借其靈活性和高效性，已成為開(kāi)發(fā)者們的寵兒，然而隨著項(xiàng)目的復(fù)雜度提升，如何高效地管理和引入依賴(lài)，尤其是自定義引入依賴(lài)，成為了許多開(kāi)發(fā)者面臨的一大挑戰(zhàn)。無(wú)論是為了優(yōu)化加載速度，還是為了提高項(xiàng)目的可維護(hù)性，自定義引入依賴(lài)不僅是技術(shù)上的需求，更是提升開(kāi)發(fā)效率的關(guān)鍵所在。

自動(dòng)引入JS庫(kù)使用

在項(xiàng)目中我們可以借助 unplugin-auto-import 插件來(lái)實(shí)現(xiàn)項(xiàng)目中JS模塊(包括：項(xiàng)目本地編寫(xiě)的工具方法及第三方庫(kù))的自動(dòng)引入，終端執(zhí)行如下命令進(jìn)行安裝，這里采用安裝到開(kāi)發(fā)環(huán)境依賴(lài)即可：

npm install unplugin-auto-import -D

vue自動(dòng)引入

這里我們借助vite構(gòu)建工具安裝vue框架進(jìn)行講解，安裝好第三方插件之后我們來(lái)到配置文件當(dāng)中，引入我們安裝好的插件然后配置我們常用的vue基本庫(kù)，如下所示：

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 內(nèi)置配置了類(lèi)似 vue、vue-router、react等常用庫(kù)的引入規(guī)則
        "vue", 
      ],
    })
  ],
})

配置完成之后，我們來(lái)到.vue文件，不按需引入而是直接使用 ref ，可以看到控制臺(tái)仍然會(huì)打印我們想要的數(shù)據(jù)，由此可以看到我們的自動(dòng)引入已經(jīng)成功了：

本地文件自動(dòng)引入

如果想配置自己自定義的文件也是可以進(jìn)行自動(dòng)引入的，我們?cè)谂渲梦募M(jìn)行如下配置，可以設(shè)置我們本地文件utils目錄下的所有文件都支持自動(dòng)引入：

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 內(nèi)置配置了類(lèi)似 vue、vue-router、react等常用庫(kù)的引入規(guī)則
        "vue", 
      ],
      dirs: [ // 配置本地目錄引入規(guī)則
        "./src/utils/**", // 配置該utils目錄下的所有文件都支持自動(dòng)引入
      ]
    })
  ],
})

配置完成之后，我們來(lái)到.vue文件，不按需引入而是直接使用調(diào)用我們utils文件下的某個(gè)js文件中導(dǎo)出的函數(shù) ，可以看到控制臺(tái)仍然會(huì)打印我們想要的數(shù)據(jù)，由此可以看到我們的自動(dòng)引入已經(jīng)成功了： 

第三方插件自動(dòng)引入

如果想配置自定引入第三方插件的庫(kù)的話(huà)，還是需要進(jìn)行想要的配置，由于這些插件庫(kù)數(shù)據(jù)龐大，unplugin-auto-import插件是不會(huì)一一幫助我們處理的，其只會(huì)處理像vue、react等基礎(chǔ)常用的庫(kù)，我們可以看到提示中unplugin-auto-import給我們提供好了插件：

對(duì)于第三方插件的自動(dòng)引入，使用插件本身會(huì)出現(xiàn)兩種情況，插件是采用命名導(dǎo)出還是默認(rèn)導(dǎo)出，這兩者的導(dǎo)出格式還是不同的，這里簡(jiǎn)單的都以具體的例子介紹一遍：

命名導(dǎo)出格式：對(duì)于其他沒(méi)有配置的插件庫(kù)我們還是要進(jìn)行如下配置，以lodash舉例我們將自定義引入的插件編寫(xiě)到對(duì)象當(dāng)中，然后在對(duì)象當(dāng)中鍵是引入我們的插件名稱(chēng)，值是一個(gè)數(shù)組，數(shù)組里面存放插件的方法，如果我們想使用插件的方法就必須引入，不引入是不能被使用的：

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 內(nèi)置配置了類(lèi)似 vue、vue-router、react等常用庫(kù)的引入規(guī)則
        "vue", 
        {
          // 對(duì)象當(dāng)中放置我們自定義的插件引入規(guī)則
          "lodash": [
            // 底層插件已經(jīng)幫我配置好了 import { concat } from 'lodash'
            "concat", // 配置該插件的引入規(guī)則
          ]
        }
      ],
      dirs: [ // 配置本地目錄引入規(guī)則
        "./src/utils/**", // 配置該utils目錄下的所有文件都支持自動(dòng)引入
      ]
    })
  ],
})

從下圖我們可以看到我們配置引入的lodash中concat已經(jīng)可以被執(zhí)行了：

當(dāng)然我們配置插件的時(shí)候也是可以對(duì)我們引入的函數(shù)進(jìn)行配置別名，如下所示：

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 內(nèi)置配置了類(lèi)似 vue、vue-router、react等常用庫(kù)的引入規(guī)則
        "vue", 
        {
          // 對(duì)象當(dāng)中放置我們自定義的插件引入規(guī)則
          "lodash": [
            "concat", // 配置該插件的引入規(guī)則 import { concat } from "lodash"
            ["compact", "cp"] // 配置該插件的引入規(guī)則 import { compact as cp } from "lodash"
          ]
        }
      ],
      dirs: [ // 配置本地目錄引入規(guī)則
        "./src/utils/**", // 配置該utils目錄下的所有文件都支持自動(dòng)引入
      ]
    })
  ],
})

可以看到我們配置的自定義的插件的別名也是生效的：

默認(rèn)導(dǎo)出：對(duì)于默認(rèn)導(dǎo)出的插件，其主要導(dǎo)出一個(gè)模塊的主要功能或?qū)ο髞?lái)進(jìn)行使用，這里就以我們常用的axios進(jìn)行舉例，我們想要使用axios進(jìn)行自動(dòng)引入的話(huà)就需要進(jìn)行如下配置：

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 內(nèi)置配置了類(lèi)似 vue、vue-router、react等常用庫(kù)的引入規(guī)則
        "vue", 
        {
          // 對(duì)象當(dāng)中放置我們自定義的插件引入規(guī)則
          "lodash": [
            "concat", // 配置該插件的引入規(guī)則 import { concat } from "lodash"
            ["compact", "cp"] // 配置該插件的引入規(guī)則 import { compact as cp } from "lodash"
          ],
          "axios": [
            // axios最初使用 import axios from "axios， 配置該插件的引入規(guī)則如下
            ["default", "axios"] // import { default as axios } from "axios
          ]
        }
      ],
      dirs: [ // 配置本地目錄引入規(guī)則
        "./src/utils/**", // 配置該utils目錄下的所有文件都支持自動(dòng)引入
      ]
    })
  ],
})

上面我們對(duì)axios進(jìn)行相應(yīng)的配置之后，在文件中我們也不需要進(jìn)行引入了，直接進(jìn)行使用：

自動(dòng)引入組件使用

對(duì)于經(jīng)常使用vue框架的開(kāi)發(fā)者來(lái)講，快節(jié)奏的開(kāi)發(fā)肯定是需要自動(dòng)引入vue組件而不是還需要開(kāi)發(fā)者進(jìn)行引入、注冊(cè)然后使用等一系列重復(fù)的代碼編寫(xiě)，上文講解到的僅僅是對(duì)JS庫(kù)進(jìn)行的一個(gè)自動(dòng)引入，其是做不到自動(dòng)引入一個(gè)vue組件的功能的，由此我們還是需要借助其他方法來(lái)實(shí)現(xiàn)我們的自動(dòng)引入vue組件的功能，對(duì)于react開(kāi)發(fā)者來(lái)說(shuō)，react組件本質(zhì)上是一個(gè)方法一個(gè)純粹的JS，所以react組件是直接可以使用上面講解的自動(dòng)引入JS庫(kù)的 unplugin-auto-import 插件即可，終端執(zhí)行如下命令進(jìn)行安裝：

npm install unplugin-vue-components -D

UI組件庫(kù)自動(dòng)引入

對(duì)于vue開(kāi)發(fā)者來(lái)說(shuō)，element-plus可謂是其鐘愛(ài)的UI組件庫(kù)，其實(shí)其官網(wǎng)也是給了我們對(duì)其進(jìn)行自動(dòng)引入的例子，也是下載我們安裝的插件，然后配置對(duì)于的命令即可，如下所示：

OK，這里我們也是按照官方文檔的示例對(duì)我們的element-plus進(jìn)行自動(dòng)導(dǎo)入：

回到vue組件處，往常我們使用UI組件還需要對(duì)組件進(jìn)行按需引入，現(xiàn)在我們卻是直接使用組件庫(kù)的標(biāo)簽即可，如下所示：

本地vue組件自動(dòng)引入

如果想配置本地的vue組件自動(dòng)引入的話(huà)也是非常簡(jiǎn)單，一般我們開(kāi)發(fā)者把公共的組件都放置在components文件下，所以我們對(duì)本地的vue組件配置如下命令即可：

回到我們的App根組件，然后我們無(wú)需導(dǎo)入直接使用我們的組件：

自定義組件庫(kù)自動(dòng)引入

如果有開(kāi)發(fā)者自己開(kāi)發(fā)了一套組件庫(kù)，然后想自定義進(jìn)行引入依賴(lài)的話(huà)，也是可以記住該插件進(jìn)行自動(dòng)引入的，只需要我們?cè)谂渲梦募羞M(jìn)行如下配置即可：

當(dāng)然我們這里是沒(méi)有myUI組件庫(kù)的，這里僅僅是做一個(gè)示例，myUI組件庫(kù)的特點(diǎn)就是每個(gè)標(biāo)簽都是由My-進(jìn)行構(gòu)成的：

引入完成之后我們?cè)趘ue組件就可以直接使用了，這里簡(jiǎn)單示例一下，大致就是這個(gè)意思：

<template>
    <My-Button></My-Button>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>

到此這篇關(guān)于Vue自定義依賴(lài)引入的最佳實(shí)踐的文章就介紹到這了,更多相關(guān)vue自定義依賴(lài)引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論