<p>Ich möchte eine Vue-Komponente erstellen, die in einer einzigen .mjs-Datei gebündelt ist. Ein anderes Vue-Projekt kann diese .mjs-Datei über HTTP abrufen und die Komponente verwenden. Die Installation einer steckbaren Komponente über npm ist nicht möglich, da andere Anwendungen versuchen werden, sie basierend auf der Konfiguration zur Laufzeit abzurufen.</p> <p>Was Sie bei steckbaren Komponenten beachten sollten</p> <ul> <li>Verwendet möglicherweise eine Unterkomponente aus einem anderen UI-Framework/einer anderen UI-Bibliothek</li> <li>Kann benutzerdefiniertes CSS verwenden</li> <li>Hängt möglicherweise von anderen Dateien ab, z. B. Bildern</li> </ul> <hr /> <p><strong>Bibliothek kopieren</strong></p> <p>Ich habe über <code>npm create vuetify</code></p> ein neues Vuetify-Projekt erstellt. <p>Ich habe alles im src-Ordner außer vite-env.d.ts gelöscht und eine Komponente Renderer.vue erstellt</p> <pre class="brush:php;toolbar:false;"><script setup lang="ts"> import { VContainer } aus „vuetify/components“ defineProps<{ Wert: unbekannt }>() </script> <Vorlage> <v-container> <span class="red-text">Wert ist: {{ JSON.stringify(value, null, 2) }}</span> </v-container> </template> <Stil> .red-text { color: red } </style></pre> <p>und eine index.ts-Datei</p> <pre class="brush:php;toolbar:false;">Renderer importieren aus "./Renderer.vue"; export { Renderer };</pre> <p>Ich habe den Bibliotheksmodus in vite.config.ts hinzugefügt</p> <pre class="brush:php;toolbar:false;">build: { lib: { Eintrag: auflösen(__dirname, "./src/index.ts"), Name: "Renderer", Dateiname: "Renderer", }, rollupOptions: { extern: ["vue"], Ausgabe: { Globale: { vue: "Vue", }, }, }, },</pre> <p>und erweiterte die Datei package.json</p> <pre class="brush:php;toolbar:false;">"files": ["dist"], "main": "./dist/renderer.umd.cjs", „Modul“: „./dist/renderer.js“, "Exporte": { ".": { "importieren": "./dist/renderer.js", "require": "./dist/renderer.umd.cjs" } },</pre> <p>Da ich benutzerdefiniertes CSS verwende, generiert Vite eine Datei „styles.css“, aber ich muss die Stile in die Datei „.mjs“ einfügen. Aufgrund dieser Frage verwende ich das Plugin vite-plugin-css-injected-by-js.</p> <p>Beim Erstellen erhalte ich die erforderliche .mjs-Datei mit dem benutzerdefinierten CSS</p> <hr /> <p><strong>Komponenten verwenden</strong></p> <p>Ich habe über <code>npm create vue</code></p> ein neues Vue-Projekt erstellt. <p>Zu Testzwecken habe ich die generierte .mjs-Datei direkt in das src-Verzeichnis des neuen Projekts kopiert und die App.vue-Datei in </p> geändert. <pre class="brush:php;toolbar:false;"><script setup lang="ts"> import { onMounted, type Ref, ref } from „vue“; const ComponentToConsume: Ref = ref(null); onMounted(async () => { versuchen { const { Renderer } =wait import("./renderer.mjs"); // Komponente während der Laufzeit abrufen ComponentToConsume.value = Renderer; } fangen (e) { console.log(e); } Endlich { console.log("fertig..."); } }); </script> <Vorlage> <div>Importierte Komponente unten:</div> <div v-if="ComponentToConsume === null">"wird noch geladen..."</div> <component-to-consume v-else :value="123" </template></pre> <p>Leider erhalte ich die folgende Warnung und Fehlermeldung</p> <blockquote> <p>[Vue-Warnung]: Vue hat eine Komponente empfangen, die zu einem reaktiven Objekt geworden ist. Dies kann zu unnötigem Leistungsaufwand führen und sollte vermieden werden, indem Komponenten mit <code>markRaw</code> markiert werden oder <code>shallowRef</code> verwendet wird. </p> </blockquote> <blockquote> <p>[Vue warnen]: Injektion „Symbol(vuetify:defaults)“ nicht gefunden. </p> </blockquote> <blockquote> <p>[Vue-Warnung]: Während der Ausführung der Setup-Funktion ist ein nicht behandelter Fehler aufgetreten</p> </blockquote> <blockquote> <p>[Vue-Warnung]: Während der Ausführung einer Planer-Aktualisierung ist ein nicht behandelter Fehler aufgetreten. </p> </blockquote> <blockquote> <p>Nicht erfasster (versprechender) Fehler: [Vuetify] Standardinstanz nicht gefunden</p> </blockquote> <p>Weiß jemand, was ich übersehe oder wie ich es beheben kann? </p>

app.use(Vuetify)

external: ["vue", "vuetify"]