點擊上方的語言選單以切換語言
此頁面是為了說明本專案中名為演奏曲目分類（融合Marimba Real、Perfect Piano，以及實體鋼琴彈奏的曲目）的頁面及與其為原形而開發的Vue.js框架版本的差異
傳統 HTML 是單一靜態檔案，而 Vue 採用「組件化 (Component-based)」的動態架構。 Vue 又可分為兩種主要開發形式：多檔案的標準專案架構，以及單一檔案的 Vue 組件（SFC）。
傳統 HTML 把所有內容都放在同一個檔案中，簡單但不易維護。
▲ 傳統 HTML：所有內容集中在單一檔案中。
Vue 將畫面切成多個「組件 (Component)」，每個組件有自己的
<template>、<script>、<style> 區塊。
▲ Vue 標準專案架構：App.vue 為主組件，下方有多個子組件。
Vue 也能以「單一檔案」的方式存在，即一個 .vue 檔中同時包含
HTML、CSS、與 JavaScript，方便快速展示或教學使用。
▲ 單檔 Vue 組件 (SFC)：結構、邏輯與樣式集中於同一檔案。
| 類型 | 檔案結構 | 特性 | 適用情境 |
|---|---|---|---|
| 傳統 HTML | 單一檔案 | 靜態、簡單、無狀態綁定 | 靜態頁面、簡單展示 |
| Vue 標準專案 | 多檔案（App.vue + main.js + components） | 模組化、支援 reactivity、維護性高 | 正式開發專案 |
| 單檔 Vue 組件 (SFC) | 單一 .vue 檔 | 簡潔、可展示、支援 Vue 語法 | 教學、範例、Demo |
✅ 總結：
- HTML 是靜態文件導向，強調結構；
- Vue 標準專案 是組件化開發，強調模組化與資料驅動；
- 單檔 Vue 組件 則是簡化版的 Vue，用於快速展示與教學。