前言

仿餓了麼app是基於vue2.x最新實戰專案，用到的技術棧

vue2 + vue-router2 + vue-cli2 + vue-resource + stylus + flex佈局 + es6 + eslint + webpack2 

頁面相對簡單，所以沒有用到vuex， 它更適合對複雜的單頁面進行狀態管理

實現功能：

•    Goods、Ratings、Seller元件檢視均可上下滾動
•    商品頁 點選左側menu，右側list對應跳轉到相應位置
•    點選list檢視商品詳情頁，父子元件的通訊
•    評論內容夠可以篩選檢視
•    購物車元件，包括新增刪除商品及動效，購物控制元件與購物車元件之間非父子元件通訊，點選購物車圖示，展示選擇的商品列表
•    商家實景圖片可以左右滑動 
•    loaclStorage快取商家資訊（id
 
、name）

如果覺得對您有幫助，您可以在右上角給我個star支援一下，謝謝！

1-專案結構分析：

common/---- 資料夾存放的是通用的css和fonts
components/----資料夾用來存放我們的 Vue 元件
router/----資料夾存放的是vue-router相關配置（linkActiveClass,routes註冊元件路由）
build/----檔案是 webpack 的打包編譯配置檔案
config/----資料夾存放的是一些配置項，比如我們伺服器訪問的埠配置等
dist/----該資料夾一開始是不存在，在我們的專案經過 build 之後才會產出
prod.server.js----該檔案是測試是模擬的伺服器配置，用來執行dist裡面的檔案，在config/index.js中,build物件中新增一條埠設定port：9000，
 

App.vue----根元件，所有的子元件都將在這裡被引用，eventHub空例項是用來元件間通訊的中央資料匯流排作用，主要連線購買控制元件和購物車元件之間的資料通訊
index.html----整個專案的入口檔案，將會引用我們的根元件 App.vue
main.js----入口檔案的 js 邏輯，在 webpack 打包之後將被注入到 index.html 中

2-各元件之間的關係：

├──APP.vue
  │  ├──Header.vue--頭部元件
  │  │  ├──iconClassMap--圖示元件（減，折，特，票，保）
  │  │  ├──Star.vue--星星評分元件
  │
 
  ├──Goods.vue--商品元件
  │  │  ├──iconClassMap--圖示元件（減，折，特，票，保）
  │  │  ├──Shopcart.vue--購物車元件,包括小球飛入購物車動畫,使用this.\$root.eventHub.\$on('cart.add', this.drop)接收，並給drop方法使用
  │  │  ├──CartControl.vue--購買控制元件--選中數量返回給父元件goods，goods響應後，重新計算選中數量，並用this.\$root.eventHub.\$emit（'name',event.target）將資料傳送給購物車元件，
  │  │  ├──Foodinfo.vue--商品詳情頁
  │  │  │  ├──RatingSelect.vue--評價內容篩選元件    
  │  ├──Ratings.vue--評論元件
  │  │  ├──RatingSelect.vue--評價內容篩選元件
  │  ├──Seller.vue--商家元件
  │  │  ├──iconClassMap--圖示元件（減，折，特，票，保）

獨立元件
  ├──iconClassMap--圖示元件（減，折，特，票，保）
  ├──split.vue--關於分割線元件
  ├──RatingSelect.vue--評價內容篩選元件

3-開發過程問題彙總：

3-1、better-scroll外掛在移動端使用時需要設定click：true，否則移動端滑動無效

3-2、分開設定css樣式：

• 圖示icon.css--文字圖示樣式，通過icommon.io網站 將svg圖片轉成文字圖示樣式

• 公共base.css--處理裝置畫素比的一些樣式,針對border-1px問題，不同裝置畫素比，顯示的線條粗細不同

• 工具mixin.css--設定border-1px樣式和背景樣式

3-2-1、這裡著重解釋一下border-1px的實現

當樣式畫素一定時,因手機有320px,640px等.各自的縮放比差異,所以裝置顯示畫素就會有1Npx，2Npx.為保設計稿還原度,解決就是用media + scale.

• 公式：裝置上畫素 = 樣式畫素 * 裝置畫素比

螢幕寬度： 320px 480px 640px
裝置畫素比： 1    1.5    2

通過查詢它的裝置畫素比 devicePixelRatio

在裝置畫素比為1.5倍時, round(1px 1.5 / 0.7) = 1px 
在裝置畫素比為2倍時, round(1px 2 / 0.5) = 1px

// stylus語法
border-1px($color)
    position:relative
    &:after
        content:''
        display:block
        position:absolute
        left:0
        bottom:0
        width:100%
        border:1px solid $color
        
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
    .border-1px
        &::after
            -webkit-transform:scaleY(0.7)
            transform:scaleY(0.7)
            
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
    .border-1px
        &::after
            -webkit-transform:scaleY(0.5)
            transform:scaleY(0.5)

3-3、sticky-footer佈局

header元件的詳情頁採用sticky-footer佈局，主要特點是如果內容不夠長，頁尾部分也會貼在視窗底部，內容足夠長，就會將頁尾推到內容底部，父級position:fixed,內容設為padding-bottom:64px，頁尾相對定位，margin-top:-64px

3-4、要求自適應的佈局

3-4-1、左側寬度固定，右側寬度自適應

// 左側固定width：80px，右側自適應
parent:
    display:fiexd;
child-left:
    flex:0 0 80px
child-right:
    flex:1

3-4-2、元素寬度自適應裝置寬度，且元素要求等寬高樣式

例如：商品詳情頁面的商品圖片展示樣式

// stylus語法
.img_header
    position:relative
    width:100% // width是 裝置寬度
    height:0
    padding-top:100% // 高度設為0,使用padding撐開
    .img
        position:absolute //定位佈局
        top:0
        left:0
        width:100%
        height:100%

3-5、背景模糊效果

filter：blur(10px),注意，所有在內的子元素也會模糊，包括文字，所以採用定位佈局，背景單獨佔用一個層，ios有一個設定backdrop-filter:blur(10px)，只會模糊背景,但不支援android

3-6、transition過渡

在購買控制元件中使用transition過渡效果，實現新增減少按鈕的動效，和小球飛入購物車的動效（模仿貝塞爾曲線的效果）

vue2.x裡面定義了transition過渡狀態，
name - string, 用於自動生成 CSS 過渡類名。

例如：name: 'fade' 將自動拓展為.fade-enter，.fade-enter-active等。預設類名為 "v"

fade-enter
fade-enter-active
fade-leave
fade-leave-active
            

包括transition過渡的鉤子函式

before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled (v-show only)
appear-cancelled

3-7、seller元件：

3-7-1問題一：seller頁面中商品商家實景圖片橫向滾動

解決方案：每個li要display：inline-block，因為width不會自動撐開父級ul，所以需要計算ul的width，（每一張圖片的width+margin）*圖片數量-一個margin，因為最後一張圖片沒有margin
同時new BScroll裡面要設定scrollX: true,eventPassthrough: 'vertical',// 滾動方向橫向

3-7-2問題二：開啟seller頁面，無法滾動

問題分析：出現這種現象是因為better-scroll外掛是嚴格基於DOM的，資料是採用非同步傳輸的，頁面剛開啟，DOM並沒有被渲染，所以，要確保DOM渲染了，才能使用better-scroll，
解決方案：用到mounted鉤子函式，同時搭配this.$nextTick()

3-7-3問題三：在seller頁面，重新整理後，無法滾動

問題分析：出現這種情況是因為mounted函式在整個生命週期中只會只行一次
解決方案：使用watch方法監控資料變化，並執行滾動函式 this._initScroll();this._initPicScroll();

3-8、快取資料

使用window.localStorage儲存和設定快取資訊，封裝在store.js檔案內

//將頁面資訊儲存到localStorage裡
export function saveToLocal(id, key, value) {
  let store = window.localStorage._store_; // 新定義一個key值_store_，存放要儲存的資料物件
  // _store_ {
  //   store[id]: {
  //     key: value
  //   }
  // }
  if (!store) {
    store = {};
    store[id] = {};
  } else {
    store = JSON.parse(store); // String格式--> json格式
    if (!store[id]) {
      store[id] = {};
    }
  }
  store[id][key] = value;
  window.localStorage._store_ = JSON.stringify(store); // 將json格式轉成String格式，存放到window.localStorage._store中
}



//將localStorage資訊設定到頁面中
export function loadFromLocal(id, key, defaults) {
  let store = window.localStorage._store_;
  if (!store) { // 一開始是沒有的，因為沒有點選事件，所以顯示預設資料
    return defaults;
  }
  store = JSON.parse(store)[id]; // 將json格式-->String格式
  // console.log(store); // {"isFavorite":true}
  if (!store) {
    return defaults;
  }
  let ret = store[key];
  return ret || defaults;
}

3-9、解析url，得到商家資訊，包括id，name，在獲取資料時，直接賦值，商家的id或name會被丟掉

使用window.localStorage.search獲取url地址，並進行解析 
封裝在tools.js檔案內

/**
 * http://localhost:8080/#/Seller
 *  https://h5.ele.me/shop/#id=151667422
 * ?id=1234&name=zpxf
 */
 
/////////方法一：
export function urlParse() {
  let url = window.location.search;
  let obj = {};
  let reg = /[?&][^?&]+=[^?&]+/g;
  let arr = url.match(reg);
  // ['?id=12345', '&a=b']
  if (arr) {
    arr.forEach((item) => {
      let tempArr = item.substring(1).split('=');
      // 因為tempArr是url中的引數，所以要用decode進行轉化
      let key = decodeURIComponent(tempArr[0]);
      let val = decodeURIComponent(tempArr[1]);
      obj[key] = val;
    });
  }
  return obj;
};

/////////方法二：
export function urlParse() {
  let urlArr = window.location.search.substr(1).split('&'); // 擷取掉?,並以&分開，存入陣列
  // console.log(urlArr); // ["id=1234", "name=zpxf"]
  let obj = {};
  if (urlArr) {
    urlArr.forEach((item) => {
      let arr = item.split('='); // 每一項用=分開存入陣列,arr[0]=key,arr[1]=value
      // console.log(arr); // [id,1234] [name,zpxf]
      let key = decodeURIComponent(arr[0]); // 對url解碼
      let val = decodeURIComponent(arr[1]);
      obj[key] = val;
    });
  }
  // console.log(obj); // {id: "1234", name: "zpxf"}
  return obj;
};

我們需要將得到的id和name帶到資料中，實際上在獲取資料的時候，並沒有帶著id和name，這時就要用到es6語法中Object.assign(),官方解釋為：可以把任意多個的源物件自身的可列舉屬性拷貝給目標物件，然後返回目標物件。

this.seller = Object.assign({}, this.seller, response.data);

//即將vm.seller屬性和請求返回資料物件合併到空物件，然後賦值給vm.seller,這裡加上this.seller即提供了一種可擴充套件的機制，倘若原來的屬性中有預定義的其他屬性。

3-10、goods,ratings,seller元件之間切換時會重新渲染

解決方案：在app.vue內使用keep-alive，保留各元件狀態，避免重新渲染

<keep-alive>
    <router-view :seller="seller"></router-view>
</keep-alive>

4-專案總結

4-1、vue-router

使用<router-link>元件完成導航，<router-link>預設會被渲染成一個 <a> 標籤，但必須使用to屬性，指定連線

 <!-- 導航 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>

<!-- 路由出口 元件渲染容器 -->
<router-view></router-view>

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Resource);
// 定義每個路由對應一個元件
let router = new Router({ // 建立 router 例項，然後傳 `routes` 配置
  linkActiveClass: 'active',
  routes: [{
      path: '/Header',
      name: 'Header',
      component: Header
    },
    {
      path: '/Seller',
      name: 'Seller',
      component: Seller
    },
    {
      path: '/Goods',
      name: 'Goods',
      component: Goods
    },
    {
      path: '/Ratings',
      name: 'Ratings',
      component: Ratings
    }
  ]
});
export default router;
router.push('goods');// 相當於頁面初始化，顯示goods的內容

// 掛載
new Vue({
  el: '#app',
  template: '<App/>',
  router: router,
  components: { App }
});

//或者另一種掛載
new Vue({
  template: '<App/>',
  router: router,
  components: { App }
}).$mount(#app);//手動掛載，#app

4-2、vue-resource

通過 this.$http.get來定義通過vue例項來發送get請求，然後通過then後面的回撥函式將請求成功的資料接收，通過狀態碼來判斷是否成功以及複製給vue的資料物件。由於這裡是用的mock資料（模擬後臺資料），所以用的模擬狀態碼。

同時，這裡省略了errorcallback的定義，正常開發中需要進行定義，甚至可以利用vue-resource的inteceptor進行體驗優化，比如定義請求時的loading動畫介面。在vue中即可以提取出loading元件。

const ERR_OK = 0;//表示沒有錯誤資訊，即獲取資料成功
this.$http.get('/api/seller').then((response) => {
  response = response.body;
  if (response.errno === ERR_OK) {
    this.seller = Object.assign({}, this.seller, response.data);
  }
});

相關推薦