RagnarokShopV3 (仙境傳說RO電商V3)

歡迎來到仙境傳說V3，這是一份Vuejs電商前端練習V3版(VueCli3+Vuex)。

新舊頁面差異

舊版首頁(V2版)

新版首頁(V3版)

此作品主要是仿線上遊戲 仙境傳說 所製作，故畫面會雷同。

Demo

RagnarokShop (舊版V2)

https://hsiangfeng.github.io/RagnarokShop/

RagnarokShopV3 (新版V3)

https://hsiangfeng.github.io/RagnarokShopV3/

簡介

此作品為Vuejs前端練習，其主要功能有以下:

前台:
1. 電商展示(商品分類、單一商品介紹、遊戲內容說明等)
2. 購物車
3. 優惠卷
4. 結帳/下單
後台:
1. 管理者登入
2. 控制介面
3. 商品管理(CRUD)
4. 訂單管理
5. 優惠卷管理
6. 模擬訂單功能

使用技術&練習技術

Vue Cli 3
Vuex
VueRouter
VueComponents
API
RWD
Bootstrap4
jQuery
JavaScript(ES6、LocalStorage等)
PUG
SCSS
Webpack
ESlint(aribnb)

使用Vue-Plugin or Other-Plugin

前端介紹

過場動畫

初心者坐騎

首頁畫面

右下方有首頁音樂控制，若沒播放可手動開啟。

商品列表

關於仙境

購物車

後台登入介面

每次重新背景將會不同。

小商人購物車

快速選購

訂單

準備付款

付款成功

404 首頁(我猜你喜歡)

觸發條件:首頁將會依照你上一次觀看過的產品詳細做類別推薦。

後臺控制台

支援Keydown

以下鍵盤按鍵非數字鍵。

前往首頁：組合鍵【ALT+Q】 or 鍵盤鍵【ALT+1】
產品列表：組合鍵【ALT+W】 or 鍵盤【ALT+2】
關於仙境：組合鍵【ALT+S】 or 鍵盤【ALT+3】
購物車內容：組合鍵【ALT+A】 or 鍵盤【ALT+4】
登入畫面：組合鍵【ALT+Z】 or 鍵盤【ALT+5】
開啟購物車：組合鍵【ALT+C】購物車 or 鍵盤【ALT+6】
開關介面視窗：組合鍵【ALT+V】
快捷鍵：鍵盤【ALT+0】

針對介面視窗增加提示訊息

HP、SP、Name、Exp、Job等皆有小驚喜。

內容來源&圖片來源

聲明

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

作者小言

沒想到一個電商的開發如此複雜，盡可能忠於仙境傳說介面，小地方可能還有一些bug(舉凡切換畫面過快背景音樂會重疊的問題。)

About

歡迎來到仙境傳說 V3，這是一份 VueCli3 + Vuex 電商前端練習 V3 版。