甘特圖（Gantt Chart）是一種項目管理工具，通常用來表示項目中各個任務的進度和時間。Vue是一種現代化的JavaScript框架，可以讓開發者更高效地構建用戶界面。

在Vue中，我們可以用第三方庫vue-gantt-schedule來畫甘特圖。首先，我們需要安裝這個庫，并將它添加到項目中：

npm install vue-gantt-schedule

接著，在我們的Vue組件中，我們可以像使用其他組件一樣使用vue-gantt-schedule來畫甘特圖。以下是一個簡單的例子：

<template>
<div>
<vue-gantt-schedule :tasks="tasks" :options="options" />
</div>
</template>
<script>
import VueGanttSchedule from 'vue-gantt-schedule'
export default {
components: {
VueGanttSchedule
},
data () {
return {
tasks: [
{
id: 1,
name: '任務一',
start: new Date('2021-01-01'),
end: new Date('2021-01-15'),
progress: 50
},
{
id: 2,
name: '任務二',
start: new Date('2021-01-16'),
end: new Date('2021-01-28'),
progress: 30
},
{
id: 3,
name: '任務三',
start: new Date('2021-01-29'),
end: new Date('2021-02-10'),
progress: 0
}
],
options: {
headerHeight: 50,
columnWidth: 30,
step: 24,
viewModes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month']
}
}
}
}
</script>

在這個例子中，我們創建了一個Vue組件，使用了vue-gantt-schedule來畫甘特圖。我們定義了一個數組tasks，表示要顯示的任務。每個任務都有一個唯一的id、一個名稱name、一個開始時間start、一個結束時間end、和一個進度progress（0到100）。我們還定義了一個對象options，表示甘特圖的各種配置。

最后，我們將vue-gantt-schedule組件放在模板中，并將tasks和options傳遞給它。這樣就可以在頁面上顯示出我們的甘特圖了。

總的來說，使用vue-gantt-schedule畫甘特圖非常簡單，只需要定義好任務和配置，然后在Vue組件中使用vue-gantt-schedule組件即可。這個庫還提供了很多靈活的配置選項，可以根據自己的需要進行調整。