Skip to content

🍁 Show my LOVE for MapleStory over the years by building this website featuring iconic items!

License

Notifications You must be signed in to change notification settings

castle2668/maplestory-shop

Repository files navigation

楓之谷商城 (MapleStory Shop)

pages-build-deployment CodeQL Known Vulnerabilities

歡迎來到楓之谷商城,這是我的 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 | 使用技術

HTML5 CSS3 jQuery Bootstrap JavaScript ESLint Airbnb Vue.js GitHub GitHub Pages Markdown Dependabot

  • 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 | 使用套件

🔍 Introduction | 前端畫面介紹

過場動畫

聖誕綠水靈

首頁畫面

首頁畫面

商品列表

商品列表

購物車

購物車

管理員登入介面

管理員登入介面

懸浮購物車

懸浮購物車 Icon

懸浮購物車介面

確認訂單畫面

準備付款

付款成功畫面

付款成功

後台介面

後台

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

🎨 Sources | 圖片來源

🍁 About Shop | 關於楓之谷電商

🍔 About Author | 關於作者

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

📎 Statement | 聲明

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