vue 引入dhtmlxgantt.js 的方法

要在 Vue 中使用 dhtmlxGantt，可以按照以下步骤：

1. 安装 dhtmlxGantt

可以使用 npm 或 yarn 安装 dhtmlxGantt，命令如下：

npm install dhtmlx-gantt

或

yarn add dhtmlx-gantt

2. 引入 dhtmlxGantt

可以在 main.js 中引入 dhtmlxGantt，如下所示：

import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

3. 在组件中使用 dhtmlxGantt

在 Vue 组件中使用 dhtmlxGantt，可以在 mounted 钩子中创建 gantt 实例，如下所示：

mounted() {
  gantt.init(this.$refs.gantt);
  gantt.parse(this.tasks);
}

其中，`this.$refs.gantt` 是一个 div 元素，在该元素上创建 gantt 实例。`this.tasks` 是一个数组，包含 gantt 的任务数据。

完整的示例代码如下所示：

<template>
  <div ref="gantt" style="width: 100%; height: 500px;"></div>
</template>

<script>
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

export default {
  data() {
    return {
      tasks: [
        {
          id: 1,
          text: "Project #1",
          start_date: "01-04-2021",
          duration: 6,
          progress: 0.4,
        },
        {
          id: 2,
          text: "Task #1",
          start_date: "02-04-2021",
          duration: 2,
          parent: 1,
          progress: 0.5,
        },
      ],
    };
  },
  mounted() {
    gantt.init(this.$refs.gantt);
    gantt.parse(this.tasks);
  },
};
</script>