初探 VueJS 系列前言
許久未更新網站了，最近也已經畢業並進入職場工作了，由於在學校的緣故，應該會有機會開始更新一些主題。
本次將更新的是 Vue 的基本系列，由於前一陣子找工作的時候，很多企業都是使用 Vue 作為前端函式庫（或框架），反而 ReactJS 以及 Angular 都相對較少，所以給自己一個新的目標。
VueCLI 與 Vite
Vue 作為一個受歡迎的前端框架，自然也有類似於 React 以及 Angular 的 CLI 工具可以使用，都可以 協助開發者建立一個具有基本架構的專案，稱之為「Scaffolding」(鷹架)。目前有不同的兩種工具可以選擇：VueCLI 以及 Vite，目前如果依照官方文件執行以下指令
npm init vue@latest預設版本為 Vue3，而CLI 工具則是使用 Vite 而不是 Vue CLI。
如果你去 VueCLI 的官方文件上(https://cli.vuejs.org/guide/)可以看到一行提示：
⚠️ Vue CLI 處於維護模式！
對於新項目，現在建議使用
create-vue腳手架基於Vite的項目。另請參閱Vue 3 工具指南以獲取最新建議。
所以沒有什麼特殊需要，例如需要對 Webpack 做特殊設定的話，建議就按照官方建議直接使用 Vite 即可。
VueCLI
VueCLI 是基於 webpack 的官方CLI 工具，開發環境、正式環境編譯打包都是依賴 webpack。如果你寫過 ReactJS 或是 ReactNative 應該都會覺得開發伺服器啟動得很慢。
Vite
Vite 在開發環境下會以 ESM 的原生方式讓瀏覽器載入，而開發環境則是使用 Rollup 來打包，這邊就不去比較 webpack 以及 Rollup 的差異了，具體需要研究一下。
最大的差異 - 開發伺服器的速度
VIte 是真的很快，以往在開發環境以 webpack 編譯的話，需要耗時 10s -30s 不等，隨著專案壯大會更慢。而 Vite 以原生 ESM 讓瀏覽器載入，因此新專案的編譯時間大約只耗費 100ms - 200ms左右。
使用 Vite 建立第一個 Vue 專案
確認 Nodejs 版本
開始之前，請確認電腦安裝的 Node版本高於 16.0，沒有特別需求的話就直接使用最新版就可以。
建立專案
確認完成之後就執行下列指令
npm init vue@latest
執行之後，會詢問是否允許安裝 "create-vue@latest" 套件
✔ Project name: … <your-project-name>然後輸入 Project Name，我沒輸入的話預設會使用 vue-project 作為名稱
選擇相關套件
除了可以選擇是否使用 JSX 、 TypeScript 之外，還有一些額外的預設套件可以選擇：
- Vue Router : VueJS 官方的前端路由套件，建議安裝
- Pinia : 狀態管理器，可安裝
- Vitest : 單元測試框架
- Cypress : E2E測試框架
- ESLint : 程式碼格式檢查(通常會裝)
- Prettier : 格式化程式碼
完成之後，就可以使用 cd 指令進入到專案目錄底下。
運作第一個專案
下載相依套件
create-vue 會產生一個 package.json 檔案，而不會在建立階段下載相依套件(跟 React JS 有些不一樣)
npm i
//OR
npm install先下指令，根據 package.json 下載相依套件。
運作開發伺服器
npm run dev執行指令後，就可以進入瀏覽器網址(通常是 http://localhost:5173)
就可以看到下面成功執行第一個 Vue 專案了！
下一篇我們再來看一下關於 Vue 一些基本的資料夾結構。
