Vite+Vue3的組件自動(dòng)注冊(cè)功能解讀

更新時(shí)間：2026年03月24日 11:22:28 作者：極夢網(wǎng)絡(luò)無憂

這篇文章主要介紹了Vite+Vue3的組件自動(dòng)注冊(cè)功能使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

實(shí)現(xiàn)思路

使用 Vite 的 import.meta.glob 方法批量導(dǎo)入指定目錄下的所有組件
創(chuàng)建一個(gè)組件注冊(cè)插件，自動(dòng)全局注冊(cè)所有導(dǎo)入的組件
提供組件使用示例和目錄結(jié)構(gòu)規(guī)范

完整實(shí)現(xiàn)代碼

1. 組件自動(dòng)注冊(cè)插件 (src\components\common\index.js)

/**
 * 全局公共組件自動(dòng)注冊(cè)
 * 自動(dòng)注冊(cè)src/components/common目錄下的所有組件
 */

// 導(dǎo)入所有公共組件
import JmForm './JmForm .vue'
import JmTable from './JmTable.vue'
 
/**
 * 自動(dòng)導(dǎo)入并注冊(cè)組件
 * @param {Object} app - Vue應(yīng)用實(shí)例
 * @param {Array} exclude - 排除的組件名稱列表
 */
export function registerCommonComponents(app, exclude = []) {
  // 組件列表
  const components = {
    JmForm ,
    JmTable
 
  }

  // 注冊(cè)所有組件
  Object.entries(components).forEach(([name, component]) => {
    // 檢查是否在排除列表中
    if (exclude.includes(name)) {
      return
    }
    
    // 全局注冊(cè)組件
    app.component(name, component)
  })
}

export default {
  registerCommonComponents
}

2. 入口文件引入插件 (src/main.js)

// 導(dǎo)入全局公共組件自動(dòng)注冊(cè)
import { registerCommonComponents } from './components/common';

3. 寫一個(gè)組件頁面

直接使用組件 (src/App.vue) 無需引入

<template>
  <!-- 無需import，直接使用 -->
  <jm-form v-model="form" :items="items" />
  <jm-table :data="list" :columns="columns" /> 
</template>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對(duì)vue?react組件暴露方法相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2022-11-11
Vue3 獲取當(dāng)前組件實(shí)例及場景分析
在Vue 3中,getCurrentInstance是一個(gè)用于獲取當(dāng)前組件實(shí)例的重要函數(shù),以下是對(duì)getCurrentInstance的詳細(xì)分析,感興趣的朋友一起看看吧
2024-12-12
vue組件props屬性監(jiān)聽不到值變化問題
這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue非父子組件通信詳解
這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
詳解Vue2.0組件的繼承與擴(kuò)展
這篇文章主要介紹了詳解Vue2.0組件的繼承與擴(kuò)展，主要分享slot、mixins/extends和extend的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue3前端axios請(qǐng)求報(bào)錯(cuò)network錯(cuò)誤的解決辦法
在使用Axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí),遇到“Network?Error”報(bào)錯(cuò)可能是由多種原因?qū)е碌?這篇文章主要介紹了vue3前端axios請(qǐng)求報(bào)錯(cuò)network錯(cuò)誤的解決辦法,需要的朋友可以參考下
2025-08-08
腳手架vue-cli工程webpack的作用和特點(diǎn)
webpack是一個(gè)模塊打包的工具，它的作用是把互相依賴的模塊處理成靜態(tài)資源。這篇文章主要介紹了vue-cli工程webpack的作用和特點(diǎn),需要的朋友可以參考下
2018-09-09
談一談vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好
這篇文章主要介紹了談一談vue請(qǐng)求數(shù)據(jù)放在created好還是mounted里好的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
詳解@Vue/Cli 3 Invalid Host header 錯(cuò)誤解決辦法
這篇文章主要介紹了詳解@Vue/Cli 3 Invalid Host header 錯(cuò)誤解決辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01