CLUCKDOM 雞蛋王國

DEMO

桌面版

手機版

專案簡介

此作品使用 Vue3 開發的雞蛋網站，以 Vite 建立開發環境，使用 Firebase Cloud Firestore 建置資料庫、Vue Router 處理路由和實現 SPA 單頁應用。

目錄

• 首頁 - 圖片自動輪播、Navbar 轉換、牧場介紹、產品輪播
• 關於我們 - 圖片輪播、翻牌效果、滾動視差效果、從培養雞隻到出貨的流程圖
• 精選商品 - 產品清單、點擊進入產品詳情資訊、點擊下拉查看成分表、周邊禮盒清單
• 產品詳情 - 點小圖換大圖、查看產品詳細資訊，並選擇購買數量
• 實體通路 - 全台通路門市、Google Map 及自訂圖標
• 聯絡我們 - 表單驗證並點擊提交、彈窗通知
• 會員登入 - 表單驗證、會員註冊登入、支持 Google 第三方登入
• 購物車 - 此功能正在努力開發中 🎯

使用技術

• Vite - 快速建立專案環境
• Vue Router - 統一管理路由
• Vue Composables - 實現封裝和重用邏輯功能
• Vue Components - 使用 props 和 emit 實現元件間的資料傳遞
• Firebase Authentication - 實現會員註冊、登入及 Google 第三方登入
• Firebase Cloud Firestore - 儲存表單資料及產品資訊
• Firebase Hosting - 部署作品網站
• GitHub Actions - 自動部署至 Firebase Hosting
• HTML5、CSS3 - 純手刻 CSS 樣式，並使用 RWD 製作響應式設計
• SCSS - 使用 SCSS 預處理器管理 CSS

使用套件及工具

• VeeValidate 表單驗證
• Vue3-carousel 輪播套件
• AOS scroll 動畫效果
• vue3-google-map

前台導覽

首頁：

圖片自動輪播、Navbar 轉換、牧場介紹、產品輪播

當使用者向下滾動超過 250px 時，改為顯示扁型Navbar

關於我們：

圖片輪播、翻牌效果、滾動視差效果、從培養雞隻到出貨的流程圖

CSS 翻牌效果

從培養雞隻到出貨的流程圖

當螢幕尺寸小於768px時，使用者需點擊按鈕以展開內文，避免頁面過長

精選商品：

動態背景滾動及介紹、產品清單、點擊進入產品詳情資訊、點擊下拉查看成分表、周邊禮盒清單

周邊禮盒清單

當螢幕尺寸小於768px時，使用者需點擊按鈕以展開查看內容物，避免頁面過長

產品詳情：

點小圖換大圖、查看產品詳細資訊，並選擇購買數量

數量最少為1，最多為1000

實體通路：

全台通路門市、Google Map 自訂圖標

透過標籤切換動態元件

聯絡我們：

表單輸入驗證並可進行提交

使用 Yup 驗證工具定義表單規則

表單送出成功或失敗皆會跳出彈窗吿知使用者

會員註冊及登入：

表單輸入驗證、會員註冊、會員登入、支持 Google 第三方登入

註冊時，輸入的密碼與確認密碼需一致

若註冊成功，則彈出"註冊成功"視窗，並導回登入頁進行登入

若登入成功，則導回首頁，並於右上方顯示使用者名稱

持續更新

🎯 購物車功能持續開發中