一文搞定dhtmlx-gantt调度界面，vue下使用dhtmlxgantt进行项目甘特图模块设计开发（前端界面显示篇（1））

前言：

本文基于在较为成熟完整的项目，进行甘特图模块开发的内容。并不涉及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插件进行前端界面设计

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