前言：

本文基于在较为成熟完整的项目，进行甘特图模块开发的内容。并不涉及node相关下载、安装及vue的相关使用。

1 需安装的模块

npm install dhtmlx-gantt
npm install font-awesome

(1) dhtmlxgantt是进行甘特图开发过程中所用到的插件库，用于跨浏览器和跨平台应用程序的功能较为齐全的Gantt图表。其祖家组件为一个JavaScript库，提供了一套完整的Ajax驱动的UI组件。

(2)font-awesome为图标字体库和css框架。提供了各类css样式。

2 引入模块

    import { gantt } from 'dhtmlx-gantt';
    import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
    import 'font-awesome/css/font-awesome.min.css';

（1）引用dhtmlxgantt.css样式，显示插件界面；

（2）引用font-awesome.min.css图标,为了显示各种图表插件。

3 设计页面格式内容

（1）前端展示界面设计：

//采用html5的el插件进行前端界面设计
<template>
//建立容器，在容器下存储界面样式与风格
  <div class="app-container">
//容器下设计gantt-container，用以装载甘特图界面的显示内容
    <div ref="gantt" class="gantt-container"></div>
//调用官方在线接口，设置摁钮方式实现甘特图导出（支持多种常见格式）
    <input value="导出PDF" type="button" onclick="gantt.exportToPDF()"/>
    <input value="导出Excel" type="button" onclick='gantt.exportToExcel()'/>
    <input value="导出Png" type="button" onclick="gantt.exportToPNG()"/>
    <input value="载入execl" type="button" onclick="gantt.load()"/>
    //自动导入文件并解析为json格式，便于后续开发导入json数组自动生成甘特图。
<form action="https://export.dhtmlx.com/gantt" method="post"
          enctype="multipart/form-data">
          <input type="file" name="file" />
          <input type="" name="type" value="excel-parse"/>
          <button type="submit">转为json文件</button>
    </form>
  </div>
</template>

（2）甘特图显示设计（请参考官方文件（内容很全只是为英文文档）：

界面示例，可在线编辑操作，便于学习：Gantt : Samples (dhtmlx.com)

官方学习文档：Gantt API Gantt Docs (dhtmlx.com)

一个网址讲解基本与官方文档一致较为详细：dhtmlxGantt使用教程：如何导出/导入Excel，导出到iCal-控件新闻-慧都网 (evget.com)

一个官方博客，里面解决一些较为复杂的问题，并有示例代码可在线编辑操作：

DHTMLX Blog - DHTMLX JavaScript Library - News, tips, and info.