Der ultimative Leitfaden zum Erstellen von Vue 3 Component Libraries

In der schnelllebigen Welt der Webentwicklung kann die Erstellung wiederverwendbarer Komponenten ein entscheidender Vorteil sein. Vue 3 und Vite haben sich als leistungsstarke Werkzeuge etabliert, die den Aufbau von Component Libraries erheblich vereinfachen. In diesem Tutorial werfen wir einen genaueren Blick darauf, wie Sie eine solche Library erstellen.

№ 00 Voraussetzungen

Bevor Sie mit dem Tutorial beginnen, stellen Sie sicher, dass Node.js installiert ist. Falls noch nicht geschehen, finden Sie die Installationsanleitung auf der offiziellen Website.

№ 01 Projekt einrichten

Beginnen wir mit der Erstellung eines neuen Vue 3 Projekts mit Vite. Öffnen Sie Ihr Terminal und führen Sie folgenden Befehl aus:

npm create vite@latest

Während der Projekteinrichtung haben Sie die Möglichkeit, verschiedene Konfigurationen auszuwählen. Wir empfehlen TypeScript und ESLint für bessere Typsicherheit und Codequalität. Navigieren Sie nach der Projekterstellung in das Projektverzeichnis und installieren Sie die Abhängigkeiten:

cd <project-name>
npm install

№ 02 Erste Komponente erstellen

Nachdem Ihr Projekt eingerichtet ist, wird es Zeit, Ihre erste Vue 3 Komponente zu erstellen. Erstellen Sie im Verzeichnis src/components eine neue Datei mit dem Namen ReusableButton.vue:

<script setup lang="ts"></script>

<template>
  <button class="button" type="button">
    <slot></slot>
  </button>
</template>

<style scoped>
.button {
  cursor: pointer;
  background-color: #555555;
  border: none;
  color: white;
  padding: 15px 32px;
  font-size: 16px;
  border-radius: 6px;
}

.button:hover { background-color: #444444; }
</style>

Dieser Code definiert eine gestylte Button-Komponente mit einem Slot für individuellen Inhalt. Wenn Sie eine Auffrischung zum Erstellen robuster Vue 3 Komponenten benötigen, lesen Sie unseren Blogbeitrag dazu.

№ 03 Component Library bauen

Um Ihre Component Library in anderen Projekten nutzen zu können, müssen Sie sie zuerst bauen. Vite macht diesen Prozess mit wenigen Konfigurationsanpassungen unkompliziert. Aktualisieren Sie Ihre vite.config.ts:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    cssCodeSplit: true,
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'component-library',
      fileName: 'component-library'
    },
    rollupOptions: {
      external: ['vue'],
      output: { exports: 'named', globals: { vue: 'Vue' } }
    }
  },
  resolve: {
    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) }
  }
})

Die Option external schließt Vue aus dem Bundle aus, da es von der konsumierenden Anwendung bereitgestellt wird.

№ 04 Entry Point und package.json

Erstellen Sie eine index.ts in Ihrem src-Verzeichnis. Diese Datei dient als Einstiegspunkt:

export { default as ReusableButton } from '@/components/ReusableButton.vue'

Aktualisieren oder ergänzen Sie abschließend die folgenden Abschnitte in Ihrer package.json:

{
  "type": "module",
  "files": ["dist"],
  "main": "./dist/component-library.umd.cjs",
  "module": "./dist/component-library.js",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/component-library.js",
      "require": "./dist/component-library.umd.cjs"
    },
    "./index.css": "./dist/index.css"
  },
  "types": "./dist/index.d.ts"
}

№ 05 Veröffentlichen und verwenden

Um Ihre Component Library mit anderen zu teilen, können Sie sie auf npm veröffentlichen. Stellen Sie sicher, dass Sie ein npm-Konto besitzen, und führen Sie aus:

npm login
npm publish

In Ihrer Anwendung verwenden Sie die Library so:

<script setup lang="ts">
import { ReusableButton } from 'component-library'
import 'component-library/index.css'
</script>

<template>
  <ReusableButton>Click me</ReusableButton>
</template>

Den vollständigen Quellcode der Component Library finden Sie auf GitHub.