Skip to content

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

Notifications You must be signed in to change notification settings

hsiangfeng/RagnarokShopV3

Repository files navigation

RagnarokShopV3 (仙境傳說RO電商V3)

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

新舊頁面差異

舊版首頁(V2版)

RagnarokShopV2

新版首頁(V3版)

RagnarokShopV3

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

仙境傳說

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等皆有小驚喜。

更多內容

每一次登入介面背景圖片將會不同圖片(共有六種登入圖片)。

其中裡面還包含經典音樂,約五首左右。

表情符號

後臺登入游標

其餘更多細節部分,歡迎至Demo網站觀看。

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

內容來源&圖片來源

Google

仙境傳說官方網站

仙境傳說(RO)幻想廳

仙境傳說(RO)透視鏡

聲明

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

作者小言

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published