今天開頭先提一下，如果是照Day4的方式建專案的各位，我們建的是一個基於Vite的Vue專案喔

在專案中應該會看到vite.config.js和package.json，就是vite的設定檔

Vue官方在Vue 3開始時就將Vite作為建立專案的預設工具，取代了舊的Vue CLI，所以當我們執行npm creact vue@latest這項命令時，就是使用Vite這項建構工具喔!

為何使用Vite建構呢?
1.啟動快，即時更新
Vue CLI是基於傳統方式Webpack，打包後才能啟動，若是大型專案速度就會慢很多
Vite用原生ES Modules + Replacement，啟動後幾乎秒開
2.打包效能好
使用Rollup打包，效能好，輸出體積小，打包效能高效
3.開發體驗更好
預設支援Vue 3、React、TypeScript，不須自行設定一堆webpack.config

好的關於Vue官方也推薦使用的Vite就先簡單介紹到這裡，接著來世著撰寫第一個程式吧

Hello Vue
開啟我們的終端機，cd (你的專案名稱)
接著輸入指令 code . 在VSCode中開啟專案
輸入npm run dev啟動專案並將顯示出的網址貼到瀏覽器上就能顯示畫面

功能方面(黃色框區塊) : 放資料(data)、方法(methods)
程式結構(綠色框區塊) : 放畫面結構
排版設計(藍色框區塊) : 放樣式設定

將<h1>這行改成

<h1> Hello Vue! </h1>

下方增加一行程式

<input v-model="message" placeholder="輸入會即時更新上方文字" />

則可以新增輸入欄

在<style scoped> </style>間加入對輸入欄的樣式設定

<style scoped>
  input {
    padding: 10px;
    font-size: 20px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
   }
</style>

就能改變輸入欄的樣式

好的今天就先這樣，稍微碰了一點點程式，各位明天見~