楓之谷商城 (MapleStory Shop)

歡迎來到楓之谷商城，這是我的 Vue.js 電商網站作品，裡面充滿著我對 Vue.js 與 MapleStory 的熱愛 🍁

📝 Change Log | 更新日誌

2020

• [2020/01/22]：完成 Vue Router 路由配置
• [2020/01/24]：建立前台初始版型
• [2020/01/26]：新增商品列表的響應式排版
• [2020/01/27]：修正 Navbar 錯誤
• [2020/01/28]：完善商品列表頁面
• [2020/01/29]：新增頁碼至商品列表頁面、新增個別商品頁面
• [2020/02/01]：完成首頁
• [2020/02/03]：修改地板元件與讀取效果的樣式，新增 Footer 的版權聲明
• [2020/02/04]：完成購物車頁面、結帳頁面、後台頁面
• [2020/02/05]：完成登入頁面
• [2020/02/07]：新增打字動畫，首頁新增顧客評價區塊
• [2020/02/09]：新增懸浮購物車元件與 AlertMessage 功能
• [2020/02/10]：為 GitHub 的 Repository 新增 README，部署 GitHub Pages
• [2020/02/12]：升級 Vue CLI 版本並加入 ESLint (Airbnb)
• [2020/02/13]：前台畫面修改與調整
• [2020/02/15]：修正套件未正確載入的問題，修改產品詳細頁的畫面
• [2020/02/16]：修改購物車與行動版的畫面
• [2020/03/12]：完成 Vue CLI 4 + Vuex 的版本

2021

• [2021/01/17]：檢查更新專案內的套件
• [2021/01/18]：使用 Axios instance 的寫法串接 API，並重構 Vuex 模組化
• [2021/04/25]：設置 ESLint 搭配 Vue.js Style Guide
• [2021/04/26]：修改專案 SCSS 設定
• [2021/04/27]：VeeValidate V2 to V3 Upgrade

2023

• [2023/03/22]：Fix Security Vulnerabilities
• [2023/03/23]：Downgrade to Node 14

✏️ Skills | 使用技術

• Node.js 18
• Vue 2 (Vue CLI + Vue Router + Vuex)
• JavaScript (ES6)
• ESLint (Airbnb) + Vue.js Style Guide (Recommended)
• Axios
• Bootstrap 4
• RWD
• SCSS

📌 Plugins | 使用套件

• vue-loading-overlay
• swiper v6
• vue-awesome-swiper
• Vue I18n v8.x
• vee-validate v3

🔍 Introduction | 前端畫面介紹

過場動畫

首頁畫面

商品列表

購物車

管理員登入介面

懸浮購物車

確認訂單畫面

付款成功畫面

後台介面

其餘更多細節部分，歡迎至 Demo 網站觀看：https://sealman234.github.io/MapleStoryShopV4/

🎨 Sources | 圖片來源

• Google
• MapleStory.Wiki
• The Spriters Resource
• 【楓之谷】遊戲 GIF @ Raccoon :: 痞客邦 ::
• HipWallpaper
• 新楓之谷透視鏡
• RE:【情報】春風櫻爛漫，楓谷抽福袋
• 新楓之谷 maplestory 中文官方網站—最團結的冒險！

🍁 About Shop | 關於楓之谷電商

• 網站名稱：MapleStory Shop
• 網站描述：楓之谷電子商務網站
• 網站網址：https://sealman234.github.io/maplestory-shop/
• 網站狀態：維護階段

🍔 About Author | 關於作者

• 暱稱：海豹人 Sealman
• 描述：你不需要很厲害才能開始，但你需要開始才會很厲害
• 狀態：前端菜鳥一枚
• 專業：前端開發與資訊管理
• 網站：海豹人的第一個家
• 信箱：sealman.dev@gmail.com

📎 Statement | 聲明

本作品內的圖片與內容，純粹為個人練習前端使用，不做任何商業用途。