Vue Gantt

Vue Gantt ist der offizielle Vue-Wrapper für DHTMLX Gantt. Er zielt auf Vue 3 ab und behält vollen Zugriff auf die Gantt-API, während er Vue-freundliche Props, Events und Composable-Funktionen hinzufügt.

Was Sie mit dem Wrapper erhalten

• Deklarative Einrichtung über Props (config, templates, plugins, theme, locale)
• Daten-Synchronisierung für Aufgaben/Verknüpfungen und erweiterte Datensätze
• Gantt-Ereignis-Verkabelung durch die events-Map
• Vue-Lebenszyklus-Einstiegspunkt durch @ready
• Zugriff über eine Komponenten-Referenz auf das zugrunde liegende instance
• Typisierte Hilfs-Fabriken und Composables für gängige Wrapper-Workflows

<script setup lang="ts">
import VueGantt from "@dhtmlx/trial-vue-gantt";
import "@dhtmlx/trial-vue-gantt/dist/vue-gantt.css";
</script>

<template>
  <div style={{height: '520px'}}>
    <VueGantt :tasks="tasks" :links="links" />
  </div>
</template>

Wenn Sie zuerst die Architektur- und Fähigkeitsübersicht wünschen, lesen Sie Vue Gantt Overview.

Empfohlener Lernpfad

Verwenden Sie diese Reihenfolge, wenn Sie neu beim Wrapper sind:

1. Installation zur Auswahl des Paketkanals und der Importe
2. Quick Start um Ihr erstes Diagramm zu erstellen
3. Configuration Reference zu Details von Props und Callbacks
4. Data Binding and State Management Basics um ein Datenbesitz-Modell auszuwählen
5. Pinia Integration Tutorial für eine store-gesteuerte Implementierung
6. Customization Patterns für Templates, Lightbox, Inline-Editoren und Modale

Wrapper Vs Low-Level JS-Integration

Wählen Sie den Integrationspfad basierend darauf aus, wie viel Lebenszyklus- und Synchronisierungslogik Sie selbst verwalten möchten.

• Verwenden Sie den offiziellen Wrapper (@dhtmlx/trial-vue-gantt oder @dhx/vue-gantt) für Vue-Props/Events, wrapperverwaltete Synchronisierung und typisierte Hilfs-APIs.
• Verwenden Sie die Low-Level JS-Integration nur, wenn Sie direkte Kontrolle über den Instanzlebenszyklus und manuelle API-Orchestrierung wünschen.

Für den Low-Level-Pfad verwenden Sie dhtmlxGantt with Vue.js (Low-Level Integration).

Einstiegspunkt für Daten- und Zustandsverwaltung

Beginnen Sie mit dem State-Abschnitt, wenn Sie bereits wissen, dass Sie Store-/Backend-Synchronisierung benötigen:

• Data & State Management
• Data Binding and State Management Basics
• Using Vue Gantt with Pinia

Beispiele und Evaluationsressourcen

Durchstöbern Sie die öffentlichen Vue Gantt-Beispiele für lauffähige Demos des Wrappers:

• Live demo - alle wrapper-Funktionen laufen im Browser
• GitHub repository - Quelle für jedes im Überblick referenzierte Sample

Minimale Starterprojekte (jeweils eine Wrapper-Funktion):

• vue-gantt-quick-start - die kleinstmögliche Einrichtung, entspricht dem Quick Start
• vue-gantt-pinia-starter - Pinia Store mit batchSave und Undo/Redo auf Store-Ebene, entspricht dem Pinia tutorial

Wenn Sie Vue Gantt evaluieren, bietet die Evaluationsseite technischen Support während der Evaluationsphase. Siehe Installation.