Beitrag

Nuxt UI gedeiht dank seiner unglaublichen Community.️ Wir freuen uns über alle Beiträge durch Fehlerberichte, Pull-Requests und Feedback, um diese Bibliothek noch besser zu machen.

AI Hilfe

Wir stellen Richtlinien für Beiträge über AGENTS.md für KI-Assistenten bereit, damit Sie zu Nuxt UI beitragen können.

Projektstruktur

Hier ist eine Übersicht der wichtigsten Verzeichnisse und Dateien in der Nuxt UI-Projektstruktur:

Dokumentation

Die Dokumentation befindet sich im Ordner docs als Nuxt-App, die @nuxt/content verwendet, um Seiten aus Markdown-Dateien zu generieren. Siehe die Nuxt-Inhaltsdokumentation für Details zur Funktionsweise:

├── app/
│   ├── assets/
│   ├── components/
│   │   └── content/
│   │       └── examples   # Components used in documentation as examples
│   ├── composables/
│   └── ...
├── content/
│   ├── blog/
│   ├── docs/
│   │   ├── 1.getting-started
│   │   ├── 2.components   # Components documentation
│   │   ├── 3.composables
│   │   └── 4.typography
│   └── ...            # Landing pages (index.yml, showcase.yml...)

@@ph043@@bmmwbbbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbmwbm

Der Modulcode befindet sich im Ordner src. Hier ist eine Aufschlüsselung der Struktur:

├── plugins/
├── runtime/
│   ├── components/        # Where all the components are located
│   │   ├── Accordion.vue
│   │   ├── Alert.vue
│   │   └── ...
│   ├── composables/
│   ├── locale/
│   ├── plugins/
│   ├── types/
│   ├── utils/
│   └── vue/
│       ├── components/
│       └── plugins/
├── theme/                 # This where the theme for each component is located
│   ├── accordion.ts       # Theme for Accordion component
│   ├── alert.ts
│   └── ...
├── utils/
└── module.ts

@@@@@@@@@@@@cli

Um die Entwicklung zu vereinfachen, haben wir eine CLI erstellt, mit der Sie Komponenten und Locales generieren können. Sie können mit dem Befehl pnpm cli make darauf zugreifen.

Komponenten

Sie können neue Komponenten mit dem folgenden Befehl erstellen:

pnpm cli make component <name> [options]

verfügbare Optionen:

• --primitive Erstellen einer primitiven Komponente
• --prose Erstellen Sie eine Prosa-Komponente
• --content Erstellen Sie eine Inhaltskomponente
• --template Nur spezifische Vorlagen generieren (verfügbare Vorlagen: playground,docs,test,theme,component)

beispiel:

# Create a basic component
pnpm cli make component my-component

# Create a prose component
pnpm cli make component heading --prose

# Create a content component
pnpm cli make component block --content

# Generate only documentation template
pnpm cli make component my-component --template=docs

Lokales

Sie können neue Locales mit dem folgenden Befehl erstellen:

pnpm cli make locale --code <code>

Der Gebietsname und die Richtung werden von CLDR ausgefüllt und der Code wird dagegen validiert.

Sobald Sie die Nachrichten übersetzt haben, können Sie überprüfen, ob Ihr Gebietsschema mit den anderen übereinstimmt (Nachrichtenschlüssel, Platzhalter, Name und Richtung), indem Sie Folgendes ausführen:

pnpm test locale --run

Senden Sie einen Pull-Request (PR)

Bevor Sie beginnen, prüfen Sie, ob ein Problem vorliegt, das das Problem oder die Feature-Anfrage beschreibt, an der Sie gerade arbeiten. Wenn ja, hinterlassen Sie bitte einen Kommentar zu dem Problem, um uns mitzuteilen, dass Sie daran arbeiten.

Ist dies nicht der Fall, öffnen Sie eine neue Ausgabe, um das Problem oder die Funktion zu besprechen.

Lokale Entwicklung

Um mit der lokalen Entwicklung zu beginnen, folgen Sie diesen Schritten:

git clone -b v4 https://github.com/nuxt/ui.git

corepack enable

pnpm install

pnpm run dev:prepare

pnpm run docs

pnpm run dev

pnpm run dev:vue

IDE-Einrichtung

Wir empfehlen die Verwendung von VSCode zusammen mit der ESLint-Erweiterung . Sie können die automatische Korrektur und Formatierung beim Speichern Ihres Codes aktivieren.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
  "prettier.enable": false
}

@@175@Einmündung

Sie können den Befehl lint verwenden, um nach Linting-Fehlern zu suchen:

pnpm run lint # check for linting errors
pnpm run lint:fix # fix linting errors

Typenprüfung

Sie können den Befehl typecheck verwenden, um nach Tippfehlern zu suchen:

pnpm run typecheck

Testen

Bevor Sie eine PR einreichen, stellen Sie sicher, dass Sie die Tests ausführen:

pnpm run test

Commit-Konventionen einhalten

Wir verwenden Conventional Commits für Commit-Nachrichten, wodurch ein Changelog automatisch generiert werden kann, basierend auf den Commits. Please read the guide durch, wenn Sie nicht bereits mit ihm vertraut sind.

• fix und feat für Codeänderungen, die die Funktionalität oder Logik beeinträchtigen
• Use docs für Dokumentationsänderungen und chore für Wartungsaufgaben

Einen Pull-Request erstellen

• instructions bei der Erstellung eines PR-Dokuments bereitgestellt werden.
• Stellen Sie sicher, dass der Titel Ihrer PR dem Konventionelle Ausschüsse entspricht, da er nach der Zusammenführung des Codes verwendet wird.
• Multiple Commits sind in Ordnung; keine Notwendigkeit, neu zu basen oder Push zu erzwingen. Wir verwenden Squash and Merge beim Zusammenführen.
• Ensure lint,typecheck und tests arbeiten, bevor Sie die PR einreichen.

Wir werden es umgehend überprüfen. Wenn es einem Betreuer zugewiesen wird, wird es sorgfältig überprüft. Ignorieren Sie den roten Text; es ist für Tracking-Zwecke.

@@223@@Danke

Vielen Dank für Ihr Interesse an diesem Projekt! Ihr seid großartig! ❤️