一、項目前端頁面展示

二、項目整體目錄結構

三、項目流程
1. vue快速創建基礎項目
創建項目
vue create hk-shop
1
選擇需要的配置

創建基礎文件夾目錄
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);
}
1
2
3
4
5
6
7
8

Ⅱ 在plugin文件夾中新建FastClick.js并在其中配置，并將其在main.js中引入

3. 在public文件夾下的index.html中，修改頁面標題（title）和logo（ico）

4. 配置全局樣式
在style文件夾下新建commen.less，并在里面寫好全局樣式
在main.js中引入

5. 搭建主界面
要進行多界面切換，要在views文件夾內進行配置不同界面。在views文件夾下，每一個模塊對應一個子文件夾。home — 主頁、category — 分類、cart — 購物車、mine — 我的、dashboard — 主面板。
在每一個子文件夾（home、category、cart、mine、dashboard）下創建對應的頁面。
舉例：dashboard.vue

6. 配置路由
在router.js中，新建index.js文件夾。

在main.js中，引入router。并將其掛載到Vue對象上。

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

① 在這里，只有DashBoard在界面刷新的時候就加載，其余界面采用懶加載的方式，在點擊跳轉或者訪問的時候才進行加載，便于提升性能。
② dashboard一級路由存在的必要性：為后續注冊登錄等功能提準備。
③ 不直接export default new Router的原因：便于做路由守衛
效果

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快速引入組件

active 當前選中標簽的索引 Number
active-color 選中標簽的顏色 String #000000
inactive-color 未選中標簽的顏色 String #ffffff
replace to 路由跳轉
圖片屬性 :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）輪播圖（借助Swipervue-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]);
1
2
3

如果想在組件中使用或者控制輪播圖，可以在監聽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

將Home.vue中請求到的數據通過props傳遞到FlashSale.vue，再傳遞到FlashSaleItem.vue，并進行遍歷展示

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