Vue 的 Chart.js 插件為開發者提供了一個強大的工具，能夠幫助你快速創建各種類型的圖表。在本文中，我們將使用 Chart.vue 組件，結合 Vue CLI 3 來創建一個帶有柱狀圖的簡單網站。

首先，讓我們安裝 Chart.js 和 vue-chartjs，以便我們可以輕松地創建圖表。在終端中運行以下命令：

npm install chart.js vue-chartjs --save

下一步是創建 Chart.vue 組件。我們使用以下代碼創建一個最簡單的組件：

<template>
<div>
<canvas id="myChart"></canvas>
</div>
</template>
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
}
</script>

我們擴展了 vue-chartjs 中的 Line 類，并在 mounted 鉤子中使用 renderChart() 方法定義圖表數據和選項。

在 App.vue 中，我們可以像以下代碼一樣使用 Chart.vue 組件：

<template>
<div id="app">
<chart></chart>
</div>
</template>
<script>
import Chart from './components/Chart.vue'
export default {
name: 'app',
components: {
Chart
}
}
</script>

現在，我們已經準備好了從終端啟動 Vue CLI 3，查看我們創建的網站。運行以下命令：

vue serve

把瀏覽器打開 localhost:8080 就可以看到一個帶有簡單柱狀圖的頁面了。

在這篇文章中，我們通過 Chart.vue 和 Vue CLI 3，了解并學習了使用 vue-chartjs 和 Chart.js 來創建圖表。希望這篇文章能夠幫助您開始使用這些強大的工具，讓您輕松創建各種類型的圖表。