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


Posted by mijouhsieh on 2024-07-22

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
  }
});

專案架構
tgtg-project-structure.png
定義主要頁面會有8個,使用react-router定義路由
1 & 2 註冊頁和登入頁
3 ShopCategories為登入後看到的頁面,包含不同分類的店家清單
456為不同分類的店家頁面

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

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


#project-structrue #專案架構 #Vite







Related Posts

Object Recognition Kitchen 透明物體辨識(演算法概念)

Object Recognition Kitchen 透明物體辨識(演算法概念)

C 語言練習程式(8) -- 可應付不同型態的function(generic function)寫法 -- 指標相關程式集錦(7)

C 語言練習程式(8) -- 可應付不同型態的function(generic function)寫法 -- 指標相關程式集錦(7)

用 PHP 打造留言板 實作筆記

用 PHP 打造留言板 實作筆記


Comments