Wanderer Land

https://annchoucode.github.io/WandererLand/

Node.js 版本建議為：18.17.1 以上

專案說明

以販售藝術微噴為主題的電商網站，分為前台客戶使用，以及後台管理者使用。

製作者：Ann Chou
設計師：Ann Chou
文案來源：chatGPT
圖片來源：unsplash

使用技術

使用 Vue 3 和 create-vue 構建開發環境
選用 Bootstrap 5 搭配 Sass 進行網頁切版
整合 ESLint Standard 以保持程式碼風格的一致性
運用 Pinia.js 作為狀態管理工具，實現跨元件資料的傳遞

套件

以下是已經安裝在專案中的套件。

axios (^1.6.5)
bootstrap (^5.3.2)
bootstrap-icons (^1.11.3)
dotenv (^16.3.1)
pinia (^2.1.7)
vue (^3.3.11)
vue-router (^4.2.5)
@vitejs/plugin-vue (^4.5.2)
eslint (^8.49.0)
eslint-config-standard (^^17.1.0)
eslint-import-resolver-alias (^1.1.2)
eslint-plugin-import (^2.29.1)
eslint-plugin-n (^16.6.2)
eslint-plugin-promise (^6.1.1)
eslint-plugin-vue (^9.20.1)
gh-pages (^6.1.1)
sass (^1.69.7)
vite (^5.0.10)
vite-plugin-eslint (^1.8.1)
swiper (^10.3.1)
vee-validate (^4.12.5)
vue-loading-overlay (6.0)
vue-sweetalert2 (^5.0.5)
ckeditor5-vue (^5.1.0)
chart.js (^4.4.2),
vue-chartjs (^5.3.0")

前台簡介

首頁

最新消息、作品、藝術家一覽
複製優惠券代碼
聯絡平台

作品、藝術家列表

可進行排序與篩選顯示

作品介紹

將作品加入購物車
關聯相同作者作品

猜你喜歡與收藏作品

依據顧客瀏覽紀錄推薦作品
顧客可藉由商品 ♥️ 收藏喜歡作品

後台簡介

營業總覽

用戶營業狀態一覽
視覺化銷售額圖表

作品與藝術家管理

web 與 mobile 均可操作
可上傳本機端或網址圖片

訂單管理

可手動更改付款與出貨狀態
檢視訂單動作流程

文章管理

可設定首頁置頂文章
快速選擇文章標籤
設定文章相關聯作品

安裝與使用

以下將會引導你如何安裝此專案到你的電腦上。

取得專案

git clone https://github.com/AnnChouCode/WandererLand.git

環境變數

請將 .env.example 複製一份並命名為 .env，並將裡面的環境變數設定為你的值。

cp .env.example .env

安裝套件

npm install

啟動開發環境

npm run dev

打包專案

npm run build

部署專案

npm run deploy

資料夾結構

.vscode：Visual Studio Code 的設定檔
dist：打包後的檔案
public：公開的靜態檔案
src：專案的程式碼
- assets：靜態檔案
- components：元件
- router：路由
- store：狀態管理
- views：頁面
- App.vue：根元件
- main.js：進入點
.env.example：環境變數範本
.eslintrc.js：ESLint 設定檔
.gitignore：Git 忽略檔案
.nvmrc：Node.js 版本
index.html：進入點 HTML
package-lock.json：套件版本鎖定
package.json：專案資訊
README.md：專案說明
vite.config.js：Vite 設定檔

gh-pages 部署說明

內建預設是使用 gh-pages 進行部署，因此只需要在專案根目錄下執行以下指令即可。

npm run deploy

（請記得將 .env 中的 REPOSITORY_NAME 改為你的專案名稱即可。）

AnnChouCode/WandererLand