【亲测免费】 Frappe Gantt 源码安装与使用教程

Frappe Gantt 是一个用于构建 Gantt 图表的开源 JavaScript 库，尤其适合集成到 Web 应用程序中以展示任务管理和项目进度。接下来我们将详细介绍该项目的目录结构、启动文件以及配置文件。

1. 项目目录结构及介绍

在克隆或下载 frappe/gantt 仓库之后，你会看到以下主要目录结构：

frappe-gantt/
├── dist/        # 包含编译后的生产环境文件
├── src/         # 源代码目录
│   ├── app.js    # 主应用文件
│   ├── index.html
│   └── styles.css
├── tests/       # 测试相关文件
└── package.json  # 项目依赖和脚本

• dist/: 存放通过 npm run build 命令生成的优化过的前端资源，适用于部署。
• src/: 开发源代码所在目录。
  • app.js: 应用的主要入口文件，定义了 Gantt 组件和一些全局配置。
  • index.html: 示例 HTML 页面，展示了如何引入 Gantt 组件。
  • styles.css: 样式文件，定制 Gantt 的外观。
• tests/: 单元测试和其他测试文件。
• package.json: 项目依赖和 npm 脚本，用于安装依赖和执行任务。

2. 项目的启动文件介绍

src/app.js

app.js 文件是整个应用的核心，它包含了 Gantt 组件的实例化和基本配置。示例代码如下：

import Gantt from './gantt/Gantt';
import data from './data';

document.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('gantt');
  const gantt = new Gantt(el, {
    // 配置项...
  });
  
  gantt.fromJSON(data);
});

在这个例子中，Gantt 类被导入并创建了一个新的实例。fromJSON() 方法用于加载数据，数据通常是从服务器获取的 JSON 格式。

3. 项目的配置文件介绍

Frappe Gantt 的配置主要是通过 app.js 中传递给 Gantt 构造函数的参数完成的。以下是部分常见配置选项：

new Gantt(element, {
  height: '100%',  // Gantt 图表的高度
  minHeight: 600,  // 最小高度
  displayWeekNumbers: true,  // 是否显示周编号
  displayDaysInWeek: 7,  // 显示一周中的天数
  startDate: new Date(),  // 起始日期
  endDate: new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000),  // 结束日期
  showTaskNames: true,  // 是否显示任务名称
  showTimes: true,  // 是否显示时间
  showAssignees: false,  // 是否显示负责人
  defaultView: 'day'  // 默认视图（可选：year, quarter, month, week, day）
});

你可以根据实际需求调整这些配置，以满足你的项目需求。

要运行开发环境，确保已安装 Node.js 并在项目根目录下执行以下命令：

npm install
npm start

这将启动本地服务器，并且当源代码发生变化时自动重新编译。然后在浏览器中访问 http://localhost:8080 查看实时更新的 Gantt 图表。

希望这个指南对理解 Frappe Gantt 项目有所帮助，更多详细信息可以参考项目官方文档或者查看源代码。祝你在使用过程中一切顺利！