前言&第一天記錄

本系列心得參考 2022 iThome 鐵人賽 - 真的好想離開 Vue 3 新手村，並跟著實作，原文中紀錄的內容基本上不太會重複，有興趣的原文章支持原作者唷。

安裝環境

以下為安裝 Vue 3.3.4 版本適用

1. nodejs - 16.20.0
2. npm - 8.19.4
   這部分筆者是使用 NVS 去控制多版本的 Node.js 版本，後續有機會再補充有關 NVS 介紹與常用指令。(老高上身?!)

安裝步驟

1. 確認當前的 node 安裝與版本確認。

   npm version
   

   
2. 確認可安裝的 Vue 版本，於 2023/06/07 最後版本為 3.3.4，可參考 https://www.npmjs.com/package/vue?activeTab=readme
   
3. 使用 NPM 進行 VUE 安裝，這裡原文建議指令為 npm init vue@latest，由於在實際開發有版本控制的需求，因此本文在練習時會以下列指令進行安裝

   npm init vue@3.3.4
   

   PS1. 上述指令將會詢問是否安裝並執行 create-vue ，該工具會自動幫開發者建置 Vue 專案。
   PS2. 根據上方備註，在 CMD 或者是 POWERSHELL 中，需要移動到的目錄應為你要建立專案資料夾的目錄即可。例如預想的 VUE 專案資料夾為 D:\VUE_PROJECT ，只需要移動到 D:\ 項下，接著 create-vue 就會處理專案資料夾建立了。
4. 設定專案(專案資料夾)名稱
   PS. 在這之前應當會有詢問是否也安裝 create-vue ，需要回答 Y
   

5. 選擇專案初始設定
   此時學習時其實也不明白各選項的影響，除了 TypeScripts 之外，其餘按原文章建議選擇

   • TypeScript
   • Vue Router: Vue.js 的官方路由，可用來開發單頁應用程式
   • Pinia: Vue.js 核心團隊開發的狀態管理器
   • ESLint: 檢查程式碼

   • Prettier: 將程式碼格式化

     以下為原文章說明但本文未選用項目

   • Vitest: 基於 Vite 的單元測試框架
   • Cypress: E2E 測試框架
     create-vue 應當會幫你建立你命名的專案資料夾，此時就可以使用慣用的編譯器處理
     
6. 調整版本控制
   在步驟3的時候我們有提過版本控制這件事，此時需要修改專案資料夾下的 package.json ，此文件是用來管理專案所使用的各種套件狀況，其中套件名稱如果帶著
   • ^ 代表鎖定到第一版號，如現在為 3.2.X，如果當前有最新版本為 3.9.x ，在執行 npm install 時將會安裝 3.9.x。
   • ~ 代表鎖定到第二版號，如現在為 3.2.2，如果當前有最新版本為 3.9.x ，在執行 npm install 時將會安裝 3.2.x，這裡的 x 代表 3.2 的最後一版。
   • 無任何前綴，僅有版號則是鎖定。
     此專案我按名稱猜功能調整為，主要調整邏輯為 vue 相關元件保持鎖定版本，如 vue 、 pinia 、 vue-router 等，其餘保持原生預設，如果有需要可以參考下方圖片，調整後即可下 npm install 進行安裝
     
7. 等待安裝完畢後，即可使用下列指令開啟前端伺服器

   npm run dev
   

   
   

致此基本環境已架設完畢...