小提示

在開始使用 Vite 之前，請確認電腦中已經安裝好 Node.js。因為我們後續用來下載專案、啟動伺服器的 npm 指令，以及 Vite 在電腦背後運作的引擎，都是依賴 Node.js 環境。

（可以在終端機輸入 node -v 確認是否安裝成功！）

昨天已經知道 Vite 做為一個建置工具擁有的特點，今天就要利用它來開啟 Vue 啦~

Vite 環境建置

1. 打開電腦終端機 (Terminal 或 PowerShell)，先切換到想放專案的資料夾，再輸入以下指令：

npm create vite@latest quiet-wonders

• 這行指令可以讓 Vite 幫我們下載官方的 Vue3 模板，並建立一個名為 quiet-wonders 的專案資料夾。

2. 輸入後終端機會出現互動式選單，請依序選擇 Vue 與 JavaScript，完成後再接著輸入後續的指令。
   

3. 建立完成後，依序輸入這三行指令進入專案、安裝依賴，並啟動開發伺服器：

powershell
cd quiet-wonders
npm install
npm run dev

4. 這時終端機應該會顯示一個網址（通常是 http://localhost:5173/）。按住 Ctrl（或 Mac 上的 Cmd）點擊網址，或用瀏覽器打開它，就會看到 Vite 和 Vue 的預設歡迎畫面。
   

若將電腦關機或不小心把終端機關閉，只需重新打開終端機、移動到專案資料夾，輸入這條指令：npm run dev

查看專案結構

到專案資料夾裡會看到 index.html 這個檔案，這是整個專案的門面，也是整個網頁的入口；再往下看有一個名為 src 的資料夾，裡面放著三個重要的檔案，分別為 main.js、App.vue、style.css。

• 用 vs code 開啟檔案來仔細看看內容吧！

main.js 檔案：專案指揮官

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

負責的工作：

• 引入全域樣式（style.css）。
• 引入根元件（App.vue）。
• 執行 createApp(App).mount('#app')，把 Vue 渲染出來的畫面掛載到 index.html 裡面那個 id="app" 的空白容器中。平時我們很少需要頻繁改動它。

App.vue：專案根元件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

這是整個應用程式的主畫面，也是我們接下來主要寫程式的地方。

Vue 採用了「單一檔案元件（Single File Component, SFC）」架構，一個副檔名為 .vue 的檔案裡，整齊摺疊了三個區塊。

• <script setup>：負責元件邏輯運作（JavaScript 變數、點擊事件、計算邏輯）。
• <template>：負責結構（HTML 標籤、文字、按鈕）。
• <style scoped>：負責外觀（CSS 樣式），加上 scoped 可以確保這裡寫的樣式只會影響這個元件，不會影響到其他地方。

你可能會注意到，Vite 剛建好的預設 App.vue 裡並沒有看到 <style scoped>，因為官方把初始樣式都直接丟在全域的 style.css 裡了。不過別擔心，這三個區塊是 Vue SFC 的標準配置，未來我們動手改造採集瓶時，就會自己把 <style scoped> 加進去，替瓶身打造專屬的外觀！

小叮嚀

這段要認真看喔！往後幾篇還會提及~~

style.css 檔案：頁面樣式設計

這裡定義整個網頁畫面的呈現，例如全域的背景顏色、邊距大小以及預設字體等。

小試身手

看到這麼多的程式碼先不用緊張，這只是預設畫面，可以看看裡面有哪些元素。

1. 我們將 style.css 裡的程式碼清空，並輸入以下程式碼：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #0d1117;
  color: #f0f6fc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

2. 將 App.vue 清空，並輸入以下程式碼：

<script setup>
// 採集瓶主要程式區
</script>

<template>
  <main class="bottle-app">
    <h1>微光採集瓶</h1>
    <p class="subtitle">在每一天的最後，採集一道微小的美好</p>
  </main>
</template>

<style scoped>
.bottle-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
}

h1 {
  font-weight: 300;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.subtitle {
  color: #8b949e;
  font-size: 0.95rem;
}
</style>

3. 切換到剛剛瀏覽器的網址應該會看到原本的歡迎頁面變成了如下圖的樣子。
   

也可以在 style.css 裡隨意更改字型大小，背景顏色等，玩玩看改了什麼元素會讓畫面變成什麼不同的模樣！

今日完成

• 利用 Vite 建置好開發環境與專案結構
• 初步認識了單一檔案元件（SFC）各個區塊的職責
• 做出第一個頁面

明日預告（現在才發現前兩天都寫成前情提要...…）

Day 04 我們將正式說明 <script setup> 的元件邏輯，用雙大括號與 ref()，做出第一個點下去數字真的會變的互動式按鈕！