項目介紹

#01-項目介紹

目的：了解下項目的基本功能。

• 電商發展十余年，是個成熟的模式，小兔鮮兒是B2C電商平臺，綜合品類平臺。

• 平臺理念：（品質）新鮮、（價格）親民、（物流）快捷。

目標功能：

• 首頁模塊：頂部通欄，吸頂導航，網站頭部，左側分類，輪播圖，新鮮好物，人氣推薦，熱門品牌，分類商品推薦，專題推薦，網站底部。
• 一級分類：面包屑，輪播圖，全部二級分類，二級分類推薦商品。
• 二級分類：篩選區域，排序功能，商品列表，無限加載。
• 商品詳情：商品圖片展示，基本信息展示，配送城市選擇，SKU選擇，庫存選擇，商品詳情展示，商品評價展示，24小時熱銷，相關專題，加入購物車。
• 購物車
  • 頭部購物車：展示商品數量和列表，刪除商品，跳轉購物車頁面。
  • 購物車頁面：購物車商品展示，選擇商品，修改數量，修改商品規格，價格計算，跳轉下單
• 登錄模塊：表單校驗，賬戶密碼登錄，手機號登錄，第三方登錄，綁定手機，完善信息
• 填寫訂單：訂單商品展示，收貨地址選擇，收貨地址修改，支付方式選擇，生成訂單。
• 進行支付：訂單信息展示，跳轉支付網關，提示正在支付，等待支付結果，跳轉支付成功頁面。
• 個人中心
  • 中心首頁：展示個人信息，近期收藏商品，近期足跡，猜你喜歡
  • 訂單管理：全部訂單，待付款，待發貨，待收貨，待評價，已完成，已取消。立即付款，取消訂單，確認收貨，刪除訂單，查看物流。
  • 訂單詳情：訂單狀態，訂單進度，詳細信息。

總結：完成電商支付閉環。

#02-配套資源

目的：了解真實企業開發都會有哪些配套資源。

企業開發配套：

• 設計圖(opens new window)
• 原型稿(opens new window)
• 接口文檔(opens new window)

我們學習配套：

• 接口文檔
• 參照案例vue3.0(opens new window)
• 參照案例vue2.0(opens new window)

總結：

• 在學習開發階段使用本地API文檔與vue3.0版本樣例。

#03-使用技術

目的：概述下項目會運用到的技術點。

項目基于vue技術來實現，大概會使用以下技術：

• vue3.0 (使用組合api的方式來開發)
• vue-cli (項目腳手架)
• axios (請求接口)
• vue-router (單頁路由)
• vuex (狀態管理)
• vuex-persistedstate (vuex數據持久化)
• normalize.css (初始化樣式)
• @vueuse/core (組合api常用工具庫)
• 算法?Power Set(opens new window)
• dayjs (日期處理)
• vee-validate （表單校驗）

重點：?電商常見業務和解決方案，掌握基于vue3.0的組合api開發模式。

說明：?由于前臺項目，沒有合適的UI組件庫（沒有適用vue3.0的ui庫），所有組件基本自己封裝。

• 輪播圖組件
• 面包屑組件 render+createVnode
• 查看更多組件
• 骨架屏組件
• 復選框組件
• 單選框組件
• 對話框組件
• 消息提示組件 函數調用
• 消息確認組件 函數調用
• 分頁組件
• 步驟條組件
• 時間線組件
• 標簽頁組件 render + jsx
• 城市選擇組件

總結：基于vue3.0的技術棧，大量的組件封裝。

#04-前情提要

目的：說明在學習開發過程當中可能遇到的問題。

后臺接口基本完畢，但是數據缺乏（分類，商品），所以會有一些本地mock數據。

采用vuex來管理購物車和用戶數據，vuex的使用會淋漓盡致。

使用vue3.0來開發，所以小兔鮮兒項目，會很?鮮嫩?酸爽?。 但是會慢慢過渡。

重點難點，第三方登，商品詳情，購物車，支付結算，訂單管理。

絕大多數第三方UI組件，組件庫不支持vue3.0，會大量自己封裝和布局。有些基本樣式會預制好。

總結：

• 預告下我們開發的劇情

?

總結

以上是生活随笔為你收集整理的二、小兔仙Vue3（项目介绍）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。