Vue3 Typescript
This project is developed using Vite.js with TypeScript, Tailwind CSS, and HTML Pug syntax. The state management tool Pinia is chosen to provide type inference, and the Vue3 Composition API is applied to decompose and reuse logic, which improves maintainability.
Vue3 + TypeScript + Pug + Tailwind CSS
Random-user
- Random-user
- 無使用 UI 組件的切版及狀態練習，手刻
Pagination實現換頁處理。 - 串接使用第三方
Random-UserAPI，並透過Pagination及當頁總數來載入所需資料，減少流量。 - 使用
Route.query紀錄頁面狀態與可以分享 URL，重新整理保留原有頁面狀態。 - 多狀態的切換練習，使用
Pinia作為狀態管理工具。 - 使用
Tailwind CSS進行樣式切版。 - 使用
firebase進行頁面發布。
Nested-tree
- Nested-tree
- 樹狀結構的渲染練習，以
.作為分割，使用遞迴組件做出結構渲染。 - 使用
Tailwind CSS進行樣式切版。 - 使用
firebase進行頁面發布。
如何啟動專案
請先確認 Node 版本為 version 14.18+, 16+ 才能正常啟動專案
🚀 啟動專案 Random-user
- 移動至該資料夾
$ cd apps/Random-user
- 安裝所需 node_modules
$ npm i
- 啟動
$ npm run dev
🚀 啟動專案 Nested-tree
- 移動至該資料夾
$ cd apps/Nested-tree
- 安裝所需 node_modules
$ npm i
- 啟動
$ npm run dev
