此為參與 2023 年底六角學院 Vue 直播班的個人專案作品。
純屬開發練習，不做任何商用。
Personal Side Project for Practice, Not For Any Commercial Use.
當前進度：根據 PageSpeed Insights 指南進行效能優化、另開分支改寫為 Composition API
以販售藝術品、工藝品為主的電商平台，亦透過專欄文章推廣及分享相關的藝文知識。
瀏覽文章
- 瀏覽最新消息，透過路由控制切換不同分類的消息
- 瀏覽專欄文章，透過路由控制切換不同分類的文章
購物流程
- 瀏覽商品列表，透過路由控制切換不同分類的商品
- 搜尋特定商品
- 新增、刪除、編輯、清空購物車
- 填寫收件資訊
- 進行付款結帳
其他
- 瀏覽、加入、移除、清空收藏
- 追蹤訂單進度
身份驗證
- 登入
- 登出
管理商品
- 瀏覽、新增、編輯、刪除商品
- 切換商品上下架狀態
- 篩選不同分類的商品
管理訂單
- 瀏覽、刪除訂單
- 根據出貨情形，切換訂單狀態
- 根據付款狀況、出貨情形，篩選不同進度的訂單
管理文章
- 瀏覽、新增、編輯、刪除文章
- 切換文章的公開狀態
- 篩選不同分類的文章
管理優惠券
- 瀏覽、新增、編輯、刪除優惠券
- 切換優惠券的上下架狀態
其他
- 圖片上傳
- 追蹤已付款的未處理訂單
| 主要功能 | 工具 | 適用版本 |
|---|---|---|
| 套件管理 | PNPM | |
| 開發環境 | Vite |  |
| 前端框架 | Vue.js -- Options API |  |
| 路由控制 | Vue Router |  |
| 資料管理 | Pinia |  |
| 後端環境 | 六角學院提供給學員的電商 API | |
| 程式碼品質控制 | ESLint -- Airbnb |  |
-
AXIOS | ^ 1.6.7
處理所有的 API 串接
-
Bootstrap 5 | ^ 5.3.2 ( @popperjs/core @ 2.11.8 )
在 BS5 提供的既有模板上，以客製化變數建立自定義的 CSS 樣式
-
Bootstrap 5 icons | ^ 1.11.3
-
vee-validate | ^ 4.12.5 ( vue @ 3.4.19 )
表單驗證
-
ckeditor5 | ^ 41.1.0
使用 CKEditor5 提供的模板及插件，整合 Vite 及 BS5 樣式，客製化符合專案需求的文字編輯器
-
SweetAlert2 | ^ 11.10.5
互動視窗
-
moment.js | ^ 2.30.1
時間戳記轉換工具
-
AOS | ^ 2.3.4
視差滾動動畫效果
-
animate.css | ^ 4.1.1
動畫效果
-
Swiper | ^ 11.0.7
以 Swiper 提供的 Shadow DOM 製作動態輪播元件，並配合網站整體風格製作客製化樣式
-
clipboard.js | ^ 2.0.11
剪貼板
-
vue-loading-overlay | ^ 6.0.4
loading 動畫
-
vue3-lottie | ^ 3.3.0
lottie 動畫檔案播放器
Node.js 建議版本：18.0.0 以上
--
1. 取得專案
git clone https://github.com/QuantumParrot/2024-Art-Webshop-Project.git2. 開啟專案
cd /.../2024-Art-Webshop-Project # ... 為您下載位置的路徑3. 安裝套件（ 使用 npm / pnpm 皆可 ）
pnpm i4. 運行專案（ 使用 npm / pnpm 皆可 ）
pnpm run dev網站內的所有圖片及文字皆有明確的來源與參考出處，
目前已經彙整至文件中，如有興趣可以前往了解。
另外，一部分的版型設計、切版技巧及程式撰寫亦參考自以下幾位前輩及同學的作品，非常謝謝！🙇
✨ Moreene：嘿毛寵物旅館
✨ zasper32171：GOLDEN RONNY
✨ recall131477：午分之食
✨ hoongyuu：齊托洋酒
✨ ericacadu & HuskyHsu：パンヤ
✨ verakang：藝享世界
✨ AnnChouCode：WandererLand
✨ huan5678、eee317、sp1daTomm、echocarriet：選集
✨ PayRoom：原生 HTML 標籤的各種應用
謝謝協助審核這份作品的焦糖助教、Jessica Wang 設計師，
兩位在批改過程中不吝給予各種專業建議，
收穫良多，非常感謝 🙇