前幾天都在學演算法、Big O、Bubble Sort 等基礎概念，今天終於要正式開始建立我的演算法視覺化平台了！

這次預計使用 Vue 3 + Vite + TypeScript 開發。今天的目標：先把專案環境建立好，至於演算法怎麼顯示在畫面上，就留到下一篇再開始。

建立 Vue 專案

首先確認 Node.js 版本符合 Vue 官方目前的環境需求，接著在 Terminal 執行：

npm create vue@latest

因為我的 Git Repository 資料夾已經先建立好了，不希望 Vue 再幫我建立一層資料夾，所以這次使用：

npm create vue@latest .

. 代表直接在「目前目錄」建立專案。

不過我一開始遇到一個問題：根目錄原本有 README.md，create-vue 偵測到目前不是空目錄，因此會詢問是否移除既有檔案。為了避免原本的 README 被刪除，我先備份後再建立專案。

接著依照需求選擇設定：

Package name: algorithm
Use TypeScript? Yes

Select features:
Router
Pinia

Select experimental features:
none

Skip all example code and start with a blank Vue project?
Yes

這次先不使用實驗性功能，盡量保持開發環境單純。

完成後執行：

npm install
npm run dev

看到 Vue 的 You did it! 頁面，就代表專案已經成功跑起來了。

先設定 Router

因為目前第一個要實作的是 Bubble Sort，所以暫時直接把首頁指向 BubbleSort.vue：

const routes = [
  {
    path: '/',
    name: 'BubbleSort',
    component: () => import('@/page/BubbleSort.vue'),
  },
]

目前只有一個頁面，未來加入其他演算法時，再慢慢擴充 Router。

加入 SCSS

這次平台的視覺化會使用不少共用顏色，例如未排序、比較中、交換中、排序完成等狀態，因此我決定使用 SCSS 管理樣式。

先安裝 Sass：

npm add -D sass

目前先建立基本的專案結構：

src/
├── components/
├── layout/
├── page/
│   └── BubbleSort.vue
├── router/
├── scss/
│   ├── _variables.scss
│   └── main.scss
├── stores/
├── App.vue
└── main.ts

_variables.scss 預計放平台共用的顏色、字體等變數；main.scss 則負責全站共用的基本樣式，並在 main.ts 載入。

另外，我希望之後每個 Vue 元件都能像以前使用 Quasar variables 一樣，直接取得 SCSS 變數，因此會透過 Vite 的 SCSS 設定統一載入 _variables.scss，避免每個元件都要重複引用。

今天完成了什麼？

今天主要把 Vue 專案、Router 和 SCSS 的基礎環境準備完成。

環境準備完成之後，下一步就是開始思考：

程式裡的 [5, 3, 8, 1]，到底要怎麼變成使用者看得見的畫面？

參考資料

MUKI space，〈Vue3 使用 Vite 設定 Sass/SCSS 與 CSS Module〉
https://muki.tw/vue3-vite-sass-scss-css-module/

Vue.js，〈Quick Start〉
https://vuejs.org/guide/quick-start.html