So registrieren Sie Komponenten global in Vue

Dieser Inhalt besteht darin, alle Komponenten in einem bestimmten Verzeichnis für die Verwendung regulärer Regeln in Vue zu finden und sie global zu registrieren, ohne die globalen Komponenten manuell in main einzuführen

1. Erstellen Sie eine JS-Datei zum Registrieren globaler Komponenten

// 导入所有与library 同级的vue 组件
const importFn = require.context('./', false, /\.vue$/)

export default {
    install(app) {
        // 循环遍历每个vue组件的路径
        console.log(importFn);
        importFn.keys().forEach(key => {
            // 通过路径获得每个vue 组件
            const component = importFn(key).default
            // 注册
            app.component(component.name, component)
        })
    }
}

Zu diesem Zeitpunkt sieht unsere Dateistruktur als Referenz so aus. Wir müssen die beiden Vue-Komponenten global in der Bibliothek registrieren

 2. Verwendung im Hauptbereich

// 全局组件
import ui from '@/components/library'

// 使用use 使用
createApp(App).use(store).use(vant).use(ui).mount('#app')