欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue自定義依賴引入的最佳實(shí)踐記錄

 更新時間：2024年10月23日 10:37:22   作者：亦世凡華、  
在現(xiàn)代前端開發(fā)中,自定義引入依賴是提升開發(fā)效率的關(guān)鍵,unplugin-auto-import插件可以幫助開發(fā)者自動引入JS模塊,包括本地編寫的工具方法和第三方庫,通過簡單的配置,開發(fā)者可以實(shí)現(xiàn)Vue基本庫、本地文件以及第三方插件的自動引入

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

自動引入JS庫使用

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

npm install unplugin-auto-import -D

vue自動引入

這里我們借助vite構(gòu)建工具安裝vue框架進(jìn)行講解，安裝好第三方插件之后我們來到配置文件當(dāng)中，引入我們安裝好的插件然后配置我們常用的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 內(nèi)置配置了類似 vue、vue-router、react等常用庫的引入規(guī)則
        "vue", 
      ],
    })
  ],
})

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

本地文件自動引入

如果想配置自己自定義的文件也是可以進(jìn)行自動引入的，我們在配置文件進(jìn)行如下配置，可以設(shè)置我們本地文件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 內(nèi)置配置了類似 vue、vue-router、react等常用庫的引入規(guī)則
        "vue", 
      ],
      dirs: [ // 配置本地目錄引入規(guī)則
        "./src/utils/**", // 配置該utils目錄下的所有文件都支持自動引入
      ]
    })
  ],
})

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

第三方插件自動引入

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

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

命名導(dǎo)出格式：對于其他沒有配置的插件庫我們還是要進(jìn)行如下配置，以lodash舉例我們將自定義引入的插件編寫到對象當(dāng)中，然后在對象當(dāng)中鍵是引入我們的插件名稱，值是一個數(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)置配置了類似 vue、vue-router、react等常用庫的引入規(guī)則
        "vue", 
        {
          // 對象當(dāng)中放置我們自定義的插件引入規(guī)則
          "lodash": [
            // 底層插件已經(jīng)幫我配置好了 import { concat } from 'lodash'
            "concat", // 配置該插件的引入規(guī)則
          ]
        }
      ],
      dirs: [ // 配置本地目錄引入規(guī)則
        "./src/utils/**", // 配置該utils目錄下的所有文件都支持自動引入
      ]
    })
  ],
})

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

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

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

默認(rèn)導(dǎo)出：對于默認(rèn)導(dǎo)出的插件，其主要導(dǎo)出一個模塊的主要功能或?qū)ο髞磉M(jìn)行使用，這里就以我們常用的axios進(jìn)行舉例，我們想要使用axios進(jìn)行自動引入的話就需要進(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)置配置了類似 vue、vue-router、react等常用庫的引入規(guī)則
        "vue", 
        {
          // 對象當(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目錄下的所有文件都支持自動引入
      ]
    })
  ],
})

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

自動引入組件使用

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

npm install unplugin-vue-components -D

UI組件庫自動引入

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

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

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

本地vue組件自動引入

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

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

自定義組件庫自動引入

如果有開發(fā)者自己開發(fā)了一套組件庫，然后想自定義進(jìn)行引入依賴的話，也是可以記住該插件進(jìn)行自動引入的，只需要我們在配置文件中進(jìn)行如下配置即可：

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

引入完成之后我們在vue組件就可以直接使用了，這里簡單示例一下，大致就是這個意思：

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

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

相關(guān)文章

最新評論