現代化開發組合

這次我們會選擇Firebase作為我們現代的資料庫
使用 TypeScript 結合Vue 3 和 VueFire
讓我們摩拳擦掌，以嶄新的活力開始吧！

安裝工具 簡單步驟

1. Install vscode

這個應該不用說明，就是編輯器IDE
筆者安裝套件TypeScript Vue Plugin (Volar)有發生衝突

原來是Vuetor這一個只支援Vue2的套件
卸載後就可以了

2. Install Node.js version 16.0 or higher

根據往常的除錯經驗
都會留意一下版本號

3. Install Vue3&TypeScript

這裡筆者是Mac M2 是使用pnpm
也可根據個人習慣使用npm
另外筆者也是選擇 Vite

pnpm create vite@latest

// 記錄一下目前是create-vite@4.4.1

• 輸入專案名稱命名 mybooksystem
• 選擇框架 Vue
• 選擇 TypeScript

安裝很快，也有教學指引

  cd mybooksystem
  pnpm install
  pnpm run dev

最後跑完以後就會出現 http://localhost:5173/
貼上瀏覽器就可以看到畫面囉！

現在，現在我們可以愉快地邁入下一個章節
開始編寫程式碼了
充滿了無限的樂趣

但等等，還有重要的事情要提醒大家... 🚀😄

4.Install VueFire

在你的本地專案目錄底下輸入指令

pnpm i vuefire firebase

就完成這步驟囉！(撒花)

5.Install UnoCSS

最後，我們還需要一些可愛、漂亮、精美的小圖標
所以選擇了這個強大的CSS引擎😊🎨
主要是Anthony Fu 是個值得敬仰的開源作者
當然要好好推廣一下

• UnoCSS官方Vite說明

一樣在專案目錄底下輸入指令

pnpm add -D unocss

6.Install Vue-Router

pnpm install vue-router@4

7.Install Pinia

pnpm install pinia

恭喜！等待安裝的時間
我們可以喝杯咖啡休悠哉地休息一下，完成後環境就都準備好囉！

後來筆者發現還有更快地方法

pnpm install vite vuefire unocss vue-router pinia

一行就可解決了
是不是很很快速呢？

再接著繼續看下一章節٩(๑❛ᴗ❛๑)۶٩(๑❛ᴗ❛๑)۶