爲團隊成員依依的自有品牌 -「綠羊珠寶 GreenSheep」所開發的珠寶電商網站。品牌希望透過獨一無二的設計，讓每一位佩戴者能感受到自身的獨特及魅力。
在這個世界只有黑羊與白羊世界，身為一隻綠羊，我們就是最獨特的存在。
- 技術堆疊：
這是一個使用
Vue.js和Vite建置的網站，以提供高效的前端開發和更好的性能。 - 路由管理：
專案使用
Vue Router來管理前端應用程式的路由，以確保流暢的頁面切換。 - 狀態管理：
利用
pinia來有效地管理和共享應用程式中的狀態。 - API路徑統一管理：
通過統一的配置
.env文件，有效地管理整個應用程式中的API路徑，以提高程式碼的可維護性。 - 布局和樣式：
使用
Bootstrap 5和Sass實現網站的布局，以及進行樣式的擴展和自定義。前後台均有RWD，最小可支援375px的螢幕尺寸。 - 動畫效果： 使用
AOS增加頁面動畫效果，提升使用者體驗。 - UI元件庫：
整合了
Bootstrap Icons、Swiper和Vue Loading Overlay，以實現的良好的使用者體驗。 - 日期選擇與照片拖曳工具:
使用
Vue Datepicker和Vue draggable，讓使用者可以輕鬆地選擇日期及排序商品照片。 - 表單驗證和文字編輯器：
使用
vee-validate實現表單驗證，ckeditor供豐富的文字編輯功能，確保管理者上傳文章時有更好的編輯體驗。 - 第三方註冊及登入： 使用google及line 登入API，讓使用者可以更方便註冊和登入網站。
- 後台管理系統： 開發了一個基礎的後台管理系統，提供管理者取得訂單通知，查看和管理訂單、建立產品、上傳文章、建立優惠券等功能。
- 電商展示： 首頁、產品列表、產品詳細介紹、商品顯示方式切換、商品排序更換、推薦商品、商品全站搜尋、分類檢索、加入收藏
- 關於品牌： 關於品牌故事及精神
- 專欄文章： 文章列表、文章詳細內容
- 常見問題： 保養方式、購物說明、退換貨政策
- 電商購物車： 加入購物車、刪除、修改數量、使用優惠券、結帳方式選擇、送出訂單
- 搜索： 產品查詢
- 登入註冊： 一般會員註冊登入、google / line 註冊登入、忘記密碼、驗證碼發送
- 會員中心： 會員資料修改、查看歷史訂單、查看最愛收藏
- 管理者登入
- 首頁： 全部訂單數量、未付款訂單數、新訂單提醒
- 產品管理： 新增、刪除、編輯、查閱商品、多張商品上傳、排序商品圖片、商品顯示方式切換、商品排序更換
- 文章管理： 新增、刪除、編輯、查閱文章、圖片上傳、設定置頂文章、切換草稿及公開文章、文章顯示方式切換
- 優惠券管理： 新增、刪除、編輯、查閱優惠券、表單驗證
- 訂單管理： 刪除、編輯、查閱訂單、勾選商品進度
庫存小於 5 會出現提醒文字，數量選擇按鈕 有最高庫存數量限制
git clone https://github.com/RitaYang0811/greensheep.gitnpm installnpm run dev