1 專案作品 - 使用Vite建立React專案

Vite requires Node.js version 18+ or 20+

確認 Node 版本有18以上 nvm -v //v18.14.0
npm create vite@latest 專案名稱 -- --template react
建立好後，進入專案資料夾
cd 專案名稱
npm install
npm run dev

需要 Vite 在啟動伺服器後自動打開瀏覽器，可以在 vite.config.js 文件中進行配置。

//vite.config.js 
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],

  //新增
  server: {
    open: true
  }
});

專案架構

定義主要頁面會有8個，使用react-router定義路由
1 & 2 註冊頁和登入頁
3 ShopCategories為登入後看到的頁面，包含不同分類的店家清單
456為不同分類的店家頁面

• FavoriteShops 喜愛的店家
• LastChanceShops 商品數量快售完的店家
• RecentShops 新加入平台的店家

7 CheckoutPage 下訂單頁面
8 OrderConfirmationPage 已完成訂單的頁面