Rent Ride

歡迎來到 Rent Ride，一個以 Vue3 + Pinia 製作的重機租車網

Demo

https://linlaose.github.io/RentRide/#/

已存在的 Demo 帳號密碼：

帳號: [email protected]

密碼: 1qaz2wsx

簡介

重機是本人感興趣的主題，正好作為 Vue3 前端技術練習，其主要功能如下：

• 前台:
  1. 最新消息
  2. 租賃車種總覽 (搜尋車種、單一車款介紹等)
  3. 重機販售
  4. 預約租車/賞車
  5. 加入收藏
• 後台: 頁面製作當中

使用技術

• 設計:

  • Figma => 設計稿連結

• 前台:

  • Vue3
  • VueRouter
  • Pinia
  • JavaScript(ES6)
  • RWD
  • TailwindCSS
  • Vite
  • ESlint(airbnb)
  • prettier

• 模擬資料庫:

  • json-server-auth
  • Vercel -> Render

使用 Plugin

• Font Awesome
• axios
• Vee-validate
• Swiper
• GSAP
• date-fn
• V-calendar
• Vue-datepicker
• Vue-kinesis
• Lodash
• sweetalert2
• daisyUI

前端頁面介紹

Preloader

首頁畫面

Banner

最新消息

前三名熱租車款

會員中心頁

最新消息頁面

租車頁面

租車總覽

租車詳情

確認租車

重機商城頁面

販售車輛總覽

車輛詳情

相似車型列表

開發時程

• 設計稿繪製 - 20 小時
• 首頁開發 - 66 小時
• 會員功能 (含會員中心、登入註冊) - 17 小時
• 最新消息頁 - 6 小時
• 租車頁 - 30 小時
• 重機商城頁 - 24 小時

本次第一版完成時間為 2023/03/24

聲明

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

作品心得

這一次從設計、前台開發、模擬資料庫都是一人製作，在開發上甚感困難，作品盡可能完善使用者體驗，後續會進行優化。