DHTMLX Gantt是一種 JavaScript 應用程序，它可以與Vue框架結合使用。Vue框架可以非常方便地與DHTMLX Gantt一起使用，以創建具有個性化功能的Gantt圖。以下是如何集成和使用DHTMLX Gantt Vue組件的示例代碼：

<template>
<div id="gantt_here" ref="ganttContainer"></div>
</template>
<script>
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import "dhtmlx-gantt/codebase/dhtmlxgantt.js";
import "dhtmlx-gantt/codebase/locale/locale_cn.js";
import { gantt } from "dhtmlx-gantt";
export default {
name: "DhtmlxGanttVue",
data() {
return {};
},
mounted() {
gantt.init(this.$refs.ganttContainer);
gantt.locale.labels.section_duration = "持續時間";
gantt.locale.labels.section_start = "開始時間";
gantt.locale.labels.section_add = "";
gantt.config.start_date = new Date(2021, 5, 1);
gantt.config.end_date = new Date(2021, 6, 1);
gantt.templates.task_class = () =>"gantt-task-info";
gantt.parse([
{
id: 1,
text: "Task #1",
start_date: "2021-06-05",
duration: 5,
progress: 0.3,
},
{
id: 2,
text: "Task #2",
start_date: "2021-06-04",
duration: 3,
progress: 0.6,
},
{
id: 3,
text: "Task #3",
start_date: "2021-06-08",
duration: 5,
progress: 0.1,
},
{
id: 4,
text: "Task #4",
start_date: "2021-06-05",
duration: 2,
progress: 0.8,
},
]);
},
};
</script>

以上代碼使用了Vue組件聲明周期中的mounted方法初始化和使用了gantt組件。還定義了Gantt圖的配置和數據。通過這個示例，可以很容易地開始創建自己的DHTMLX Gantt圖。