實戰Vue：基于Vue的移動端購物商城

前情提要：文章很長，基本是整個項目完整開發的流程。代碼下載下傳後可以直接運作，支付接口慎用，可能會有錯誤，其他功能都是完整的。

完整項目下載下傳​​基于Vue的移動端的購物商城​​

一、項目前端頁面展示

二、項目整體目錄結構

三、項目流程

1. vue快速建立基礎項目

2. 建立項目

vue create hk-shop      

選擇需要的配置

建立基礎檔案夾目錄

src檔案夾下檔案夾目錄：

① views 檔案夾存放界面

② components 檔案夾存放界面中局部元件

③ config 檔案夾存放各種全局配置

④ images 檔案夾存放圖檔

⑤ plugins 檔案夾存放各種插件

⑥ router 檔案夾存放路由

⑦ store 檔案夾存放vuex相關檔案

⑧ service 檔案夾存放伺服器端相關操作，接口等

⑨ style 檔案夾存放樣式

2. 移動端開發——配置FastClick

什麼是FastClick？

① FastClick 是一個簡單易用的庫，它消除了移動端浏覽器上的實體點選和觸發一個 click 事件之間的 300ms 的延遲 ；

② 目的就是在不幹擾你目前的邏輯的同時，讓你的應用感覺不到延遲，反應更加靈敏；

③ 實作原理: 在檢測到touchend事件的時候，會通過DOM自定義事件立即出發模拟一個click事件，

并把浏覽器在300ms之後真正的click事件阻止掉。

為什麼會存在延時？

① 移動端浏覽器會從你點選按鈕之後，等待大約 300ms 才會觸發點選事件

② 原因是浏覽器會等待看你的行為是否會是輕按兩下

配置方法

① 将fastclick拉取到項目中 ​

​npm i fastclick -S​

​ ② 配置方案

Ⅰ直接在main.js中進行配置

main.js

// 1. 引入FastClick
import FastClick from 'fastclick'
// 2. 配置FastClick
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
    }, false);
}      

Ⅱ 在plugin檔案夾中建立FastClick.js并在其中配置，并将其在main.js中引入

3. 在public檔案夾下的index.html中，修改頁面标題（title）和logo（ico）

4. 配置全局樣式

2. 在style檔案夾下建立commen.less，并在裡面寫好全局樣式
3. 在main.js中引入

   

5. 搭建主界面

2. 要進行多界面切換，要在views檔案夾内進行配置不同界面。在views檔案夾下，每一個子產品對應一個子檔案夾。home — 首頁、category — 分類、cart — 購物車、mine — 我的、dashboard — 主面闆。

3. 在每一個子檔案夾（home、category、cart、mine、dashboard）下建立對應的頁面。

   舉例：dashboard.vue

   

6. 配置路由

2. 在router.js中，建立index.js檔案夾。

   

3. 在main.js中，引入router。并将其挂載到Vue對象上。

   

4. 在建立的index.js中，配置路由

   

   ① 在這裡，隻有DashBoard在界面重新整理的時候就加載，其餘界面采用懶加載的方式，在點選跳轉或者通路的時候才進行加載，便于提升性能。

   ② dashboard一級路由存在的必要性：為後續注冊登入等功能提準備。

   ③ 不直接export default new Router的原因：便于做路由守衛

5. 效果

   

   

7. 內建UI元件庫Vant

安裝vant ​

​npm i vant –S​

​

安裝babel-plugin-impor支援vant局部引用 ​

​npm i babel-plugin-import -D​

​

在babel.config.js中進行配置

在plugins檔案夾下，建立vant.js。配置引入不同的vant元件。

在main.js中引入vant.js。需要引入什麼元件直接在vant.js中做修改即可。

8. 內建Vant底部Tabbar标簽欄

直接借助官網API快速引入元件

2. active 目前選中标簽的索引 Number
3. active-color 選中标簽的顔色 String #000000
4. inactive-color 未選中标簽的顔色 String #ffffff
5. replace to 路由跳轉
6. 圖檔屬性 :src=“props.active ? icon.active : icon.inactive” 設定選中/非選中圖檔

9. 配置首頁界面

（1）在Home.vue中，通過axios請求網絡資料

安裝axios ​

​npm i axios -S​

​，并且封裝axios網絡請求

在service檔案夾中，建立子檔案夾api，并在api中建立檔案index.js。負責彙總各種接口。

在api檔案夾中建立ajax.js

在ajax.js中封裝axios網絡請求，并以函數ajax的形式向外界暴露

在index.js中，從ajax.js中引入ajax方法

在index.js中，定義接口基礎路徑

在index.js中，定義getHomeData方法，該方法是請求首頁的資料，為get方法，拼接完整URL調用ajax方法發起axios的get請求，并向外界暴露該方法。

在Home.vue中，引入資料請求方法，并在建立元件完成後的created鈎子選項中發起ajax請求。

（2）頂部位址定位、搜尋欄

在home檔案夾内，建立子檔案夾components，存放home.vue的子元件

在子檔案夾components中建立header檔案夾，在header檔案夾内建立Header.vue元件

在Header.vue中将寫好的html即樣式拷貝過來

在Home.vue中引入元件Header.vue

（3）輪播圖（借助Swiper​

​vue-awesome-swiper​

​實作）

在home子檔案夾components内建立子檔案夾sowing，并在sowing檔案夾中建立Sowing.vue

安裝vue-awesome-swiper ​

​npm install​

​

配置輪播圖

注意：

① 下載下傳最新版本的vue-awesome-swiper可能按照官方文檔有些功能無法使用，可以直接下載下傳低版本

② 配置分頁、自動播放等功能無效的話，引入的時候加入以下代碼。其他功能無效也可以試一下這個。

import Swiper2, {Navigation, Pagination, Autoplay} from 'swiper';

Swiper2.use([Navigation, Pagination, Autoplay]);      

如果想在元件中使用或者控制輪播圖，可以在監聽computer中對swiper進行監聽，并在元件的其他地方使用。

将首頁的資料傳輸到輪播圖元件中，并進行渲染

（4）中部導航nav

在home子檔案夾components内建立子檔案夾nav，并在nav檔案夾中建立Nav.vue

将靜态界面放在Nav.vue中，并在Home.vue中引入

将Home.vue中請求到的資料通過props傳遞到Nav.vue，并進行周遊展示

（5）限時搶購

在home子檔案夾components内建立子檔案夾flashSale，并在flashSale檔案夾中建立FlashSale.vue和FlashSaleItem.vue

将靜态界面放在FlashSale.vue和FlashSaleItem.vue中，并在FlashSale中引入FlashSaleItem，在Home.vue中引入FlashSale

1. 将Home.vue中請求到的資料通過props傳遞到FlashSale.vue，再傳遞到FlashSaleItem.vue，并進行周遊展示

   

   

   

（6）配置猜你喜歡靜态界面

在home子檔案夾components内建立子檔案夾youLike，并在youLike檔案夾内建立YourLike.vue和YourLikeItem.vue

将靜态界面放在YourLike.vue和YourLikeItem.vue中，并在YourLike中引入YourLikeItem，在Home.vue中引入YourLike

将Home.vue中請求到的資料通過props傳遞到YourLike.vue，再傳遞到YourLikeItem.vue，并進行周遊展示

（7）傳回頂部元件

在home子檔案夾components内建立子檔案夾markPage，并在markPage檔案夾内建立MarkPage.vue

将傳回頂部SVG靜态頁面放到MarkPage.vue中，并在Home.vue中引入

在父元件Home.vue中定義事件，并以props的方式傳遞給MarkPage.vue。并通過屬性showBackStatus控制MarkPage是否顯示。

判斷是否顯示傳回頂部按鈕是一個可能全局都要使用的事件。是以将其抽出來。

① 在config檔案夾中，建立global.js

② 在global.js中寫滾動、觸摸監聽代碼，并在滿足條件的時候執行回調函數。

③ 在Home.vue中，引入global.js，并在created鈎子中進行監聽，通過判斷是否需要顯示傳回頂部按鈕，設定showBackStatus值，控制是否需要顯示。

④ 在global.js中，寫緩動函數

⑤ 在Home.vue中引入animate動畫，并在點選事件中調用。

10. 配置分類界面

（1）建立文檔

建立一下檔案目錄，并在對應子檔案下建立vue元件

（2）在created鈎子中請求資料

2. 首先，要在server檔案夾下的api檔案夾下的index.js中，封裝資料請求方法

   

3. 在界面中引入接口，并使用​

   ​async 和 await​

   ​将異步函數轉化為同步函數執行後續操作

   

（3）将Header.vue作為單獨元件，在Category.vue中引入

（4）左側推薦導航欄

左側推薦導航欄基本沒有擴充性，直接在Catergory.vue中寫即可。同時，借助better-scroll進行滾動。

對請求下來的資料進行周遊，動态加載渲染左側li标簽

處理左側推薦導航欄點選事件

① 導航欄樣式處理

選中樣式綁定在selected類上，通過對不同li标簽删除添加class為selected即可實作更換

樣式

通過給li标簽綁定點選事件，更改​

​currentIndex​

​來更改目前具有selected類名的li标簽，同時借助better-scroll中的控制滾動位置，同時，擷取新的右側資料

③ 與右邊關聯展示

（5）搭建右側界面

将ContentView靜态界面和ProductItem靜态界面放到對應vue中，并在ContentView.vue中引入ProductItem.vue，在Category.vue中引入ContentView.vue

将Category.vue中請求到的數組傳遞到子元件中，并進行v-for顯示即可

3. 如果想按照價格排序，可以定義一個新的數組，存儲

11. 配置購物車界面

（1）将購物車靜态界面放到Cart.vue中

（2）✨✨✨使用vuex管理購物車資料✨✨✨

在store中建立index.js，并在main中引入

在store檔案夾下建立state.js（資料）、mutations（同步操作）、mutations-type（限制名稱）、actions（異步操作）、getters（與state中資料相關的計算屬性）。将vuex進行拆分。

并在index.js中進行彙總輸出

在state.js中定義購物車商品對象

在mutations-type中定義方法名稱

在mutations中實作添加方法

在界面上進行操作，調用ADD_GOODS添加商品方法

① 向購物車中添加的事件很多地方都要調用，是以借助消息訂閱（pubsub-js），在元件中跨級通信。

② 安裝pubsub-js​

​npm install pubsub-js -S​

​ ③ 在Home.vue中，監聽添加到購物車消息

④ 在YourLikeItem.vue中釋出消息

⑤ 其他需要添加到購物車的地方操作相同

（3）借助vant中的回報元件Toast文字提示，提示使用者添加成功

2. 在vant.js中引入

   

3. 在需要提示的地方使用

   

（4）定義購物車資料本地化的接口

（5）因為購物車有一個數量标志要試試變化，是以在初始DashBoard的時候，就應該調用INIT_SHOP_CART初始化購物車

（6）增加計算屬性，通過計算shopCart每個shop的num和，利用vant的tabbar的info屬性，控制購物車數量商标

（7）在購物車界面周遊shopCart并在界面上顯示

（8）購物車數量加減操作

2. 首先在mutations.js中定義将商品移出購物車的方法——即商品數量為1仍然減得操作

   

3. 在Cart.vue中配置删除商品的方法

   

（9）直接将ADD_GOODS引入到Cart.vue中進行商品數量的 增加

（10）商品單選事件處理

2. 首先在mutations中定義單選事件

   

3. 在Cart.vue中對單選a标簽進行事件綁定

   

（11）商品全選事件處理

2. 首先在mutations中定義全選事件

   

3. 在cart中使用計算屬性selectedAll辨別是否全選，并通過改屬性控制是否全選點選事件

（12）總價計算

利用計算屬性，通過shopCart中checked為true的資料，計算商品總價

（13）去結算數量

通過計算屬性，計算選中的商品數量

（14）清空購物車

在mutations中定義清空購物車方法

在Cart.vue中引入并使用清空購物車方法

12. 配置訂單界面

（1）配置填寫訂單路由

填寫訂單界面應該是和dashboard平行的，是以在views目錄下建立order子檔案夾，并在order檔案夾下建立Order.vue

在router檔案夾内的index.js中配置路由

在購物車中點選去結算的時候，轉到訂單界面

将去結算的a标簽改為​

​router-link​

​标簽，并用tag辨別其原本标簽名，并用to表示其跳轉路由

引入NavBar實作導航欄

① 在vant.js中引入NavBar

② 在Order.vue中進行引入配置

引入ContactCard 實作收貨位址

① 在vant.js中引入ContactCard

② 在Order.vue中進行引入配置

（2）配置我的位址界面

在order檔案夾下，建立children檔案夾，children檔案夾下建立MyAddress.vue

配置路由

在我的訂單中，實作點選選擇收貨位址跳轉路由

引入vant元件AddressList實作我的位址

① 在vant.js中引入AddressList

② 在MyAddress.vue中進行引入配置

③ MyAddress.vue中，對div進行絕對定位，結合Order.vue中的transition，形成動畫效果

（3）配置位址編輯界面和配置新增位址界面

在MyAddress.vue同級目錄下，建立children檔案夾，并在children檔案夾内建立AddAddress.vue和EditAddress.vue

在index.js中配置路由

借助AddressEdit實作編輯位址和新增位址

① 引入AddressEdit

② 在EditAddress.vue中配置并實作編輯位址（添加位址類似）

③ 在我的位址中增加路由跳轉

（4）配置下方Cell單元格 —— 借助vant中Cell元件

在vant.js中引入Cell和CellGroup

在Order.vue中進行定制

① 送達時間

② 商品展示

③ 支付方式

④ 備注

⑤ 商品金額、配送費

（5）配置下方送出欄——SubmitBar 送出訂單欄

2. 引入SubmitBar

   

3. 在Order.vue中使用

   

   

13. 配置我的界面

(1) 導航 —— vant的nav-bar

(2)頭像及其他資訊 —— vant的cell

(3)我的訂單、檢視所有訂單 —— vant的cell

(4)待支付、待收貨、待評價、售後/退款 —— vant的Grid, GridItem

2. 引入

   

3. 使用

   

(5) 我的優惠券、我的收貨位址、聯系客服、意見回報、下載下傳APP —— vant中的cell

14. 使用者角色配置

（1）建立選擇登陸界面、登入界面及配置選擇登陸界面、登入界面路由

views建立檔案夾login，并在子檔案夾login中建立Login.vue和SelectLogin.vue，并将靜态界面配置好

（2）在vuex的state中存儲使用者資料，并存儲在本地

首先在state中，在vuex中聲明userInfo資料。通過判斷本地userInfo中是否存在token資料，來判斷是否需要登入。

（3）在購物車中進行判斷是否顯示選擇登陸方式界面

（4）在我的中進行判斷是否顯示選擇登陸方式界面

（5）給Login.vue登入界面配置獨立路由

（6）在選擇登陸方式界面，給手機登入配置路由跳轉，并設定tag

（7）通過屬性及時間控制登入界面方式及密碼顯示方式

15. 使用者中心接口

（1）短信驗證碼、手機驗證碼登入

2. 在service/api/index.js中，實作接口

   

3. 在Login.vue中調用接口

   

4. 調用登入接口

   

5. 登入成功後，将使用者資訊儲存到本地

   ① 在vuex中實作将使用者資訊儲存到本地以及擷取使用者資訊的方法

   

（2）????????????????????異步操作不可以使用mutations了，需要使用actions是????????????????????

手機号碼驗證登入的時候是異步操作了，不能直接通過mutations操作vuex，必須通過actions異步轉同步。

2. 在actions中定義同步方法，并調用mutations中的異步方法

   

3. 在Login.vue中，使用異步方法

   

16. 賬号密碼登入

2. 頁面配置資料與input綁定

   

3. 點選登入判斷有沒有值

   

4. service/api/index.js中實作pwdLogin使用者名、密碼登入方法

   

5. Login中調用方法

   

17. 我的界面對本地資料進行渲染

18. 登出實作

2. 新增界面

   

3. 配置路由

   

4. 界面中引用，配置轉場動畫

   

5. 在service/api/index中實作自動登入/登出實作

   

6. 在mutations中實作重置使用者資料

   

7. 在UserCenter中實作登出

8. 在dashBoard中對使用者資料進行同步

   ① 在actions中實作擷取使用者資訊自動登入接口

   

   ② 在DashBoart.vue中實作自動登入

   

19. 購物車與使用者角色進行綁定

（1）設定登入後才能向購物車中添加資料

（2）商品添加到購物車後，首先将商品同步到伺服器，再存儲到本地

定義添加到購物車接口

在添加購物車的時候，将商品存放在本地之前，首先将商品同步到伺服器

（3）登出的時候清空購物車

20. 購物車優化

（1）自動登入

從伺服器擷取使用者購物車資料，進行本地化并在購物車中顯示

（2）商品修改從伺服器同步修改

（3）清空購物車

21. 使用者位址相關

（1）位址相關接口

（2）選擇位址擷取賬戶位址并顯示

（3）新增位址

（4）編輯位址

2. 在改變路由的時候，通過拼接url傳遞參數

   

   擷取的時候通過this.$route.query擷取參數

   

3. 将傳遞過來的資訊在編輯界面顯示——通過addressInfo綁定

   

4. 修改位址

   

5. 删除位址

   

（5）選擇位址後放到填寫訂單界面

22. 我的訂單界面完善

（1）商品選中、删除生成訂單商品等接口的實作

（2）購物車中單選、全選等與伺服器同步

23. 去結算完善

（1）根據總額度判斷能否點選去支付

（2）商品清單頁面配置

2. 建立OrderDetail.vue元件
3. 配置路由
4. 結合vant——Cart元件實作商品清單展示

（3）其他細節處理

24. 送出訂單完善

（1）訂單接口以及支付接口慎用

（2）送出訂單

（3）生成支付二維碼——借助vue-qriously

（4）驗證使用者是否支付成功

（5）後續處理

25. 待支付、待收貨——借助vant的tab、tabs實作

2. 配置路由

   

3. 界面實作

   

26. rem配置

2. 在config檔案夾下建立rem.js

   

3. rem.js裡面寫以下代碼，需要修改rem基準比例隻需要修改BASE即可

// 設定基準
const BASE = 15;

(function (doc, win) {
let docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recall = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = BASE * (clientWidth / 320) + 'px';
        };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recall, false);
doc.addEventListener('DOMContentLoaded', recall, false);
})(document, window);      

在main.js中引入

27. 樣式穿透

在配置swiper輪播圖選中樣式的時候，始終不生效。

在樣式上，加上/deep/或者>>>即可

28. 加載中

在請求資料的時候，可能元件已經加載完成，此時可能就會導緻一些BUG（比如輪播圖跳轉到最後一頁後不再繼續跳轉、輪播圖剛開始在最後一頁）。這時候可以加上一個正在加載功能，當資料全部請求完成後再加載元件。

2. 在vant.js中引入vant的Loading元件

   

3. 在需要顯示加載中的界面（Home.vue）中進行配置

   

29. 圖檔懶加載—借助vant的image元件實作

2. vant.js中引入Image元件

   

3. 配置圖檔

   

30. 全局過濾器

在config檔案夾下建立檔案夾filters，配置全局過濾器

在main.js中引入全局過濾器

在全局中使用​

​| moneyFormat​

​即可使用過濾器

31. 頁面緩存 keep-alive

有些頁面不需要每次進入的都是都重新加載，可以keep-alive，當下拉的時候進行重新整理重新加載即可。

針對首頁和分類進行頁面緩存

2. 在router中的index.js配置路由的時候，給需要添加緩存的界面增加一個meta屬性，并在其中配置keepAlive:true

   

3. 這這兩個路由的出口——DashBoard.vue中增加一個keep-alive标簽，裡面存放需要進行緩存的路由，外面放不需要進行緩存的路由。是否需要緩存根據meta中的keepAlive屬性進行判斷。

   

32. 借助better-scroll實作滾動

2. 安裝內建​

   ​npm install better-scroll -S​

   ​
3. 滾動原理：外層嵌套div，上下預留白間，監聽點選滾動等事件

4. 使用方法：

   ① 在需要使用的地方引入元件

   

   ② 初始化better-scroll（等到資料完全請求完成後，再初始化better-scroll）。一般初始化滾動架構的時候，是在下一個周期執行（使用​

   ​this.$nextTick(()=>{})​

   ​）確定在下一個執行周期前初始化。

   

   ③ 在父元件上進行初始化

   

33. Tabbar索引緩存

在重新整理界面的時候，不應該每次都回到首頁

解決方法：進行本地緩存

34. 将本地化存儲、擷取、删除抽成全局方法

在config檔案夾下的global.js中，寫三個方法

35. 代了解決跨域

2. 在項目根目錄建立檔案​

   ​vue.config.js​

   ​

   

3. 在vue.config.js中寫入以下代碼

   

   其中’/api’路由中被比對到的路徑，target是存在跨域的目标路徑，changeOrigin為設定允許跨域，pathRewrite是重寫路徑，因為目标路徑中原本就存在/api，是以将路徑中第一個/api重寫為空

​​vue中axios通過代了解決跨域問題​​

36. 點選驗證碼圖檔，重新請求圖檔并指派

加時間戳確定請求不同

37. 借助pubsub.js實作消息的釋出訂閱的時候，一定要注意釋出、訂閱資訊的銷毀

一定要及時銷毀，不然在調用釋出訂閱的時候，消息隊列中所有的消息都會被執行

38. 內建底部彈出日期元件

結合Popup彈出層和DatetimePicker時間選擇內建底部彈出日期元件

2. 引入Popup彈出層和DatetimePicker時間選擇

   

3. 配置元件

   

39. 借助vue-qriously生成二維碼

引入​

​npm install vue-qriously -S​

​

在main.js中配置

// 6. 配置二維碼插件
import VueQriously from "vue-qriously/dist/vue-qriously";

Vue.use(VueQriously)      

使用

qrcode：生成二維碼的URL位址

40. 定位

借助騰訊地圖實作定位

2. 首頁引入定位js

   

3. Header.vue使用