/drmeme

Dr. Meme 官網

Primary LanguageVue

Dr. Meme 的斜槓人生

點擊查看網站

html css Bootstrap JavaScript Vue Vite Sass Axios

首頁Image

專案說明

整合網紅相關資訊兼具電商性質的個人網站，分為前台用戶使用，以及後台管理者使用。

  • 網站前台、後台規劃：阿榮
  • 網站實作：阿榮
  • 首頁設計師：Tori Chen
  • 文案來源：Dr. Meme / 阿榮
  • 圖片：Dr. Meme / 部分來自圖庫

主要開發技術

  • 使用 Vue 3 和 Vite 構建開發環境
  • 使用 HTML、CSS、Bootstrap 5 和 Sass 進行網頁切版
  • 透過 ESLint 和 Prettier 以保持程式碼風格的一致性
  • 運用 Pinia 作為狀態管理工具

套件

  • axios: ^1.6.3
  • bootstrap: ^5.2.3
  • bootstrap-icons: ^1.9.1
  • ckeditor/ckeditor5-build-classic: ^41.1.0
  • ckeditor/ckeditor5-vue: ^5.1.0
  • clipboard: ^2.0.11
  • cloudinary/url-gen: ^1.19.0
  • cloudinary/vue: ^1.12.1
  • eslint-plugin-n: ^15.6.1
  • eslint-plugin-promise: ^6.1.1
  • eslint: ^8.7.0
  • eslint-config-standard: ^17.0.0
  • eslint-import-resolver-alias: ^1.1.2
  • eslint-plugin-import: ^2.26.0
  • eslint-plugin-vue: ^9.7.0
  • firebase: ^10.9.0
  • lodash: ^4.17.21
  • mojojoejo/vite-plugin-purgecss: ^1.1.0
  • pinia: ^2.1.7
  • prettier: ^2.5.1
  • sass: ^1.55.0
  • swiper: ^11.0.5
  • stylistic/eslint-plugin-js: ^1.5.1
  • vee-validate/i18n: ^4.12.5
  • vee-validate/rules: ^4.12.5
  • vee-validate: ^4.12.5
  • vite-plugin-live-reload: ^3.0.3
  • vitejs/plugin-vue: ^4.0.0
  • vite: ^4.0.0
  • vite-plugin-eslint: ^1.8.1
  • vue: ^3.4.15
  • vue-axios: ^3.5.2
  • vuepic/vue-datepicker: ^8.1.1
  • vue-draggable-next: ^2.2.1
  • vue-gtag: ^2.0.1
  • vue-loading-overlay: 6.0
  • vue-masonry: ^0.16.0
  • vue-router: ^4.1.6
  • vue-sweetalert2: ^5.0.5
  • vue-eslint-parser: ^8.0.0

前台簡介

首頁

  • Banner 簡介
  • Instagram 貼文
  • PODCAST 試聽
  • 限量週邊
  • 粉絲好評

精選文章

  • 瀑布流文章列表
  • 查看文章內文
  • 側欄隨機文章推薦
  • 廣告欄位

限量周邊

  • 分類篩選
  • 查看商品
  • 加入購物車
  • 商品推薦
  • 點擊愛心收藏/取消收藏商品
  • 複製優惠碼

我的收藏

  • 查看目前收藏商品

購物車

  • 查看購物車品項
  • 修改、刪除商品品項
  • 優惠券套用
  • 結帳/送出訂單流程

常見問答

  • 收合查看問答

後台簡介

商品管理

  • 透過 cloudinary 上傳本地端圖片或圖片 URL
  • 新增、編輯、刪除商品

訂單管理

  • 檢視訂單狀態
  • 刪除訂單

文章管理

  • 新增、編輯、刪除文章
  • 管理發布狀態

聯絡

gmail：stu90233@gmail.com