Vue Gantt

Vue Gantt — официальная обертка Vue для DHTMLX Gantt. Она нацелена на Vue 3 и сохраняет полный доступ к API Gantt, при этом добавляя Vue-дружелюбные пропсы, события и composables.

Что вы получаете вместе с оберткой

• Декларативная настройка через пропсы (config, templates, plugins, theme, locale)
• Синхронизация данных для задач/связей и продвинутых наборов данных
• Подключение событий Gantt через карту events
• Точка входа в жизненный цикл Vue через @ready
• Доступ к ref компонента к базовому instance
• Типизированные фабрики-помощники и composables для распространённых рабочих процессов обертки

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

Если вам сначала нужна архитектура и карта возможностей, прочтите Обзор Vue Gantt.

Рекомендуемый путь обучения

Используйте этот порядок, если вы новичок во wrapper:

1. Установка для выбора канала пакета и импортов
2. Быстрый старт для отрисовки вашей первой диаграммы
3. Справочник по конфигурации для деталей по пропсам и колбэкам
4. Основы привязки данных и управления состоянием для выбора модели владения данными
5. Учебник по интеграции Pinia для реализации на основе хранилища
6. Паттерны настройки для шаблонов, lightbox, встроенных редакторов и модальных окон

Обертка против низкоуровневой JS-интеграции

Выбирайте путь интеграции в зависимости от того, сколько логики жизненного цикла и синхронизации вы хотите управлять самостоятельно.

• Используйте официальную обертку (@dhtmlx/trial-vue-gantt или @dhx/vue-gantt) для Vue пропсов/событий, синхронизации, управляемой оберткой, и типизированных API-помощников.
• Используйте низкоуровневую JS-интеграцию только если хотите прямой контроль над жизненным циклом экземпляра и ручной оркестрацией API.

Для низкоуровневого пути см. dhtmlxGantt with Vue.js (Low-Level Integration).

Вводная точка по данным и состоянию

Начните с раздела состояния, если вы уже знаете, что вам нужна синхронизация со Store/бэкендом:

• Данные и управление состоянием
• Основы привязки данных и управления состоянием
• Использование Vue Gantt с Pinia

Примеры и ресурсы для оценки

Ознакомьтесь с публичными примерами Vue Gantt для работоспособных демо обертки:

• Живой демо - все возможности обертки работают в браузере
• GitHub репозиторий - исходники для каждого примера, упомянутого в обзоре

Минимальные стартовые проекты (по одному функционалу обертки на проект):

• vue-gantt-quick-start - минимальная возможная настройка, соответствует Быстрому старту
• vue-gantt-pinia-starter - хранилище Pinia с batchSave и undo/redo на уровне хранилища, соответствует учебнику по Pinia

Если вы оцениваете Vue Gantt, страница оценки предоставляет доступ к технической поддержке в период оценки. См. Установка.