安装配置

本节详细介绍 GanttFlow 的安装过程和环境配置。

环境要求

要求	版本	说明
Node.js	>= 18.0.0	推荐使用 LTS 版本
npm	>= 9.0.0	或 yarn、pnpm
React	>= 16.8.0	推荐 React 18+
Vue	>= 3.0.0	推荐 Vue 3.4+
TypeScript	>= 5.0+	推荐使用以获得完整类型支持

安装

npm

npm install @agions/gantt-flow

yarn

yarn add @agions/gantt-flow

pnpm

pnpm add @agions/gantt-flow

React 项目配置

基础配置

// main.tsx 或 App.tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { EnhancedGanttChart } from "@agions/gantt-flow"
import "@agions/gantt-flow/style"
import "./App.css"

function App() {
  const tasks = [
    { id: "1", name: "任务一", start: "2024-01-01", end: "2024-01-05", progress: 100 },
    { id: "2", name: "任务二", start: "2024-01-03", end: "2024-01-10", progress: 60 },
  ]

  return (
    <div style={{ height: "500px" }}>
      <EnhancedGanttChart tasks={tasks} viewMode="week" />
    </div>
  )
}

export default App

TypeScript 配置

GanttFlow 完全使用 TypeScript 编写，自带类型定义。确保 tsconfig.json 配置正确：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

Vite 项目配置

如果是使用 Vite 创建的 React 项目，确保安装了必要的依赖：

npm install @agions/gantt-flow

Vite 配置文件 vite.config.ts 通常无需修改，GanttFlow 可开箱即用。

Vue 项目配置

基础配置

<template>
  <div style="height: 500px">
    <GanttChart :tasks="tasks" view-mode="week" />
  </div>
</template>

<script setup lang="ts">
import { GanttChart } from "@agions/gantt-flow/vue"
import "@agions/gantt-flow/style"

const tasks = [
  { id: "1", name: "任务一", start: "2024-01-01", end: "2024-01-05", progress: 100 },
  { id: "2", name: "任务二", start: "2024-01-03", end: "2024-01-10", progress: 60 },
]
</script>

TypeScript 支持

// shims-vue.d.ts
declare module "*.vue" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

Nuxt 项目配置

对于 Nuxt 3 项目，创建插件文件 plugins/gantt-flow.client.vue：

// plugins/gantt-flow.client.vue
import { GanttChart } from "@agions/gantt-flow/vue"
import "@agions/gantt-flow/style"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("GanttChart", GanttChart)
})

样式导入

WARNING

重要：必须引入样式文件

GanttFlow 的样式文件是组件正常显示的必要条件，请务必在入口文件中导入：

import "@agions/gantt-flow/style"

如果不引入，组件将只显示 HTML 结构，没有任何样式。

CSS 变量覆盖（可选）

可以在项目中覆盖默认样式：

/* App.css */
:root {
  --gf-primary: #4f46e5;
  --gf-accent: #06b6d4;
  --gf-success: #10b981;
  --gf-warning: #f59e0b;
  --gf-error: #ef4444;
}

字体配置（可选）

GanttFlow 推荐使用 Inter 字体以获得最佳显示效果：

<!-- index.html -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

常见问题

安装失败？

如果遇到安装问题，尝试以下步骤：

1. 清除 npm 缓存：npm cache clean --force
2. 删除 node_modules 和 package-lock.json
3. 重新安装：npm install
4. 确保 Node.js 版本 >= 18.0.0

网络问题？

如果 npm 安装慢，可以使用淘宝镜像：

npm install @agions/gantt-flow --registry=https://registry.npmmirror.com

下一步

• 快速开始 - 核心概念
• 5 分钟快速上手 - 快速上手教程
• API 参考 - 完整的组件属性