Wie kann ich eine Bibliothek erstellen, die eine einzelne Vue-Komponente verfügbar macht, die von verteilten .mjs-Dateien verwendet werden kann?

Question

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.

Was Sie bei steckbaren Komponenten beachten sollten

• Verwendet möglicherweise eine Unterkomponente aus einem anderen UI-Framework/einer anderen UI-Bibliothek
• Kann benutzerdefiniertes CSS verwenden
• Hängt möglicherweise von anderen Dateien ab, z. B. Bildern

---

Bibliothek kopieren

Ich habe über npm create vuetify

ein neues Vuetify-Projekt erstellt.

Ich habe alles im src-Ordner außer vite-env.d.ts gelöscht und eine Komponente Renderer.vue erstellt

<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>

und eine index.ts-Datei

Renderer importieren aus "./Renderer.vue";

export { Renderer };

Ich habe den Bibliotheksmodus in vite.config.ts hinzugefügt

build: {
    lib: {
      Eintrag: auflösen(__dirname, "./src/index.ts"),
      Name: "Renderer",
      Dateiname: "Renderer",
    },
    rollupOptions: {
      extern: ["vue"],
      Ausgabe: {
        Globale: {
          vue: "Vue",
        },
      },
    },
  },

und erweiterte die Datei package.json

"files": ["dist"],
  "main": "./dist/renderer.umd.cjs",
  „Modul“: „./dist/renderer.js“,
  "Exporte": {
    ".": {
      "importieren": "./dist/renderer.js",
      "require": "./dist/renderer.umd.cjs"
    }
  },

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.

Beim Erstellen erhalte ich die erforderliche .mjs-Datei mit dem benutzerdefinierten CSS

---

Komponenten verwenden

Ich habe über npm create vue

ein neues Vue-Projekt erstellt.

Zu Testzwecken habe ich die generierte .mjs-Datei direkt in das src-Verzeichnis des neuen Projekts kopiert und die App.vue-Datei in

geändert.

<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>

Leider erhalte ich die folgende Warnung und Fehlermeldung

[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 markRaw markiert werden oder shallowRef verwendet wird.

[Vue warnen]: Injektion „Symbol(vuetify:defaults)“ nicht gefunden.

[Vue-Warnung]: Während der Ausführung der Setup-Funktion ist ein nicht behandelter Fehler aufgetreten

[Vue-Warnung]: Während der Ausführung einer Planer-Aktualisierung ist ein nicht behandelter Fehler aufgetreten.

Nicht erfasster (versprechender) Fehler: [Vuetify] Standardinstanz nicht gefunden

Weiß jemand, was ich übersehe oder wie ich es beheben kann?

Answer 1

Vuetify 不提供隔离组件，需要初始化插件，您需要在主应用中执行此操作：

app.use(Vuetify)

确保 vuetify 在项目 deps 中不重复，以便库和主应用程序使用相同的副本。

lib应该使用vuetify作为开发依赖，并在Rollup external中指定它，以防止项目全局的东西与lib捆绑在一起：

external: ["vue", "vuetify"]