摘要：前言這是我第一個基于的項目作品，目的很簡單，學(xué)以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現(xiàn)出來。即將屬性和請求返回數(shù)據(jù)對象合并到空對象，然后賦值給這里加上即提供了一種可擴(kuò)展的機(jī)制，倘若原來的屬性中有預(yù)定義的其他屬性。

這是我第一個基于 Vue 的項目作品，目的很簡單，學(xué)以致用，將之前的前端知識積累加上目前流行的前端框架，以項目的形式展現(xiàn)出來。

源代碼：https://github.com/nanyang24/...
演示地址：https://ele.n-y.io/

Vue有自己的腳手架構(gòu)建工具vue-cli,使用起來非常方便，使用webpack來集成各種開發(fā)便捷工具，比如：

Hot-reload Vue的熱更新，修改代碼之后無需手動刷新網(wǎng)頁，對前端開發(fā)來說非常方便

PostCss，再也不用去管兼容性的問題了，只針對chrome這樣的現(xiàn)代瀏覽器寫css代碼，會自動編譯生成兼容多款瀏覽器的css代碼

ESlint，統(tǒng)一代碼風(fēng)格，規(guī)避低級錯誤，對于有代碼潔癖的人來說是不可或缺的

Bable，ES2015出來已經(jīng)有一段時間了，但是不少瀏覽器還沒有兼容ES6，有了bable，放心使用ES6語法，它會自動轉(zhuǎn)義成ES5語法

SCSS，一款 CSS預(yù)處理器，編譯后成正常的CSS文件。為CSS增加一些編程的特性

…

除此之外，vue-cli已經(jīng)使用node配置了一套本地服務(wù)器和安裝命令等，本地運(yùn)行和打包只需要一個命令就可以搞定，非常的方便

Goods、Ratings、Seller 組件視圖均可上下滾動

商品頁 點(diǎn)擊左側(cè)menu，右側(cè)list對應(yīng)跳轉(zhuǎn)到相應(yīng)位置

點(diǎn)擊list查看商品詳情頁，父子組件的通信

評論內(nèi)容可以篩選查看

購物車組件，包括添加刪除商品及動效，購物控件與購物車組件之間為兄弟組件通信，點(diǎn)擊購物車圖標(biāo)，展示已選擇的商品列表

商家實景圖片可以左右滑動

loaclStorage 緩存商家信息（id、name）

├──app.vue
  │  ├──header.vue--頭部組件
  │  │  ├──star.vue--星星評分組件
  │  ├──goods.vue--商品組件
  │  │  ├──shopcart.vue--購物車組件,包括小球飛入購物車動畫
  │  │  ├──cartcontrol.vue--購買加減圖標(biāo)控件--選中數(shù)量返回給父組件goods，goods響應(yīng)后，重新計算選中數(shù)量，將數(shù)據(jù)發(fā)送給購物車組件，
  │  │  ├──food.vue--商品詳情頁
  │  │  │  ├──ratingselect.vue--評價內(nèi)容篩選組件
  │  ├──ratings.vue--評論組件
  │  │  ├──ratingselect.vue--評價內(nèi)容篩選組件
  │  ├──seller.vue--商家組件

獨(dú)立組件
  ├──split.vue--關(guān)于分割線組件

common/---- 文件夾存放的是通用的css和fonts
components/---- 文件夾用來存放 Vue 組件
router/---- 文件夾存放的是vue-router相關(guān)配置（linkActiveClass,routes注冊組件路由）
build/---- 文件是 webpack 的打包編譯配置文件
config/---- 文件夾存放的是一些配置項，比如我們服務(wù)器訪問的端口配置等
dist/---- 該文件夾一開始是不存在，在項目經(jīng)過 build 之后才會生成
prod.server.js---- 該文件是測試是模擬的服務(wù)器配置，用來運(yùn)行dist里面的文件，在config/index.js中,build對象中添加一條端口設(shè)置port：9000，
App.vue---- 根組件，所有的子組件都將在這里被引用
index.html---- 整個項目的入口文件，將會引用我們的根組件 App.vue
main.js---- 入口文件的 js 邏輯，在 webpack 打包之后將被注入到 index.html 中

圖標(biāo)icon.css--文字圖標(biāo)樣式，通過icommon.io網(wǎng)站 將svg圖片轉(zhuǎn)成文字圖標(biāo)樣式

公共base.css--處理設(shè)備像素比的一些樣式，針對border-1px問題，不同設(shè)備像素比，顯示的線條粗細(xì)不同

工具mixin.css--設(shè)置border-1px樣式和背景樣式

當(dāng)樣式像素一定時,因手機(jī)有320px,640px等.各自的縮放比差異,所以設(shè)備顯示像素就會有1Npx，2Npx。

公式：設(shè)備上像素 = 樣式像素 * 設(shè)備像素比

為了保證設(shè)計稿高度還原，采用 media + scale 的方法解決

屏幕寬度： 320px 480px 640px
設(shè)備像素比： 1    1.5    2

通過查詢它的設(shè)備像素比 devicePixelRatio

在設(shè)備像素比為1.5倍時, round(1px 1.5 / 0.7) = 1px 
在設(shè)備像素比為2倍時, round(1px 2 / 0.5) = 1px

實現(xiàn)代碼

// SCSS 語法
@mixin border-1px($color) {
  position: relative;
  &::after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid $color;
    content: "";
  }
}

@mixin border-none() {
  &::after{
    display: none;
  }
}

@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);
    }
  }
}

在 header 組件的詳情頁采用 sticky-footer 布局，主要特點(diǎn)是如果頁面內(nèi)容不夠長的時候，頁腳塊粘貼在視窗底部；如果內(nèi)容足夠長時，頁腳塊會被內(nèi)容向下推送

父級 position:fixed，內(nèi)容設(shè) 為padding-bottom:64px，頁腳相對定位，margin-top:-64px，clear:both
為了保證兼容性，父級要清除浮動

參考：
https://www.cnblogs.com/shico...
https://www.w3cplus.com/css3/...

// 左側(cè)固定width：80px，右側(cè)自適應(yīng)
parent:
    display:fiexd;
child-left:
    flex:0 0 80px
child-right:
    flex:1

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

// stylus語法
.img_header {
    position:relative
    width:100% // width是 設(shè)備寬度
    height:0
    padding-top:100% // 高度設(shè)為0,使用padding撐開
    .img {
        position:absolute //定位布局
        top:0
        left:0
        width:100%
        height:100%
    }
}

filter：blur(10px),注意，所有在內(nèi)的子元素也會模糊，包括文字，所以采用定位布局，背景多帶帶占用一個層，ios有一個設(shè)置backdrop-filter:blur(10px)，只會模糊背景,但不支持android

在購買控件中使用transition過渡效果，實現(xiàn)添加減少按鈕的動效，和小球飛入購物車的動效（模仿貝塞爾曲線的效果）

vue2.x里面定義了transition過渡狀態(tài)，
name - string, 用于自動生成 CSS 過渡類名。

例如：name: "fade" 將自動拓展為.fade-enter，.fade-enter-active等。默認(rèn)類名為 "v"

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

包括transition過渡的鉤子函數(shù)

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

解決方案：每個 li 要 display：inline-block，因為width不會自動撐開父級ul，所以需要將計算后的寬度賦值給ul的width，（每一張圖片的width+margin）*圖片數(shù)量-一個margin，因為最后一張圖片沒有margin
同時new BScroll里面要設(shè)置scrollX: true,eventPassthrough: "vertical", // 滾動方向橫向

問題分析：出現(xiàn)這種現(xiàn)象是因為better-scroll插件是嚴(yán)格基于DOM的，數(shù)據(jù)是采用異步傳輸?shù)模撁鎰偞蜷_，DOM并沒有被渲染，所以，要確保DOM渲染了，才能使用 better-scroll，
解決方案：用到mounted鉤子函數(shù)，同時必須搭配this.$nextTick()

問題分析：出現(xiàn)這種情況是因為mounted函數(shù)在整個生命周期中只會只行一次
解決方案：使用watch方法監(jiān)控數(shù)據(jù)變化，并執(zhí)行滾動函數(shù) this._initScroll();this._initPicScroll();

使用window.localStorage保存和設(shè)置緩存信息，封裝在store.js文件內(nèi)

//將頁面信息保存到localStorage里
export function saveToLocal(id, key, value) {
  let store = window.localStorage._store_; // 新定義一個key值_store_，存放要保存的數(shù)據(jù)對象
  // _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格式轉(zhuǎn)成String格式，存放到window.localStorage._store中
}



//將localStorage信息設(shè)置到頁面中
export function loadFromLocal(id, key, defaults) {
  let store = window.localStorage._store_;
  if (!store) { // 一開始是沒有的，因為沒有點(diǎn)擊事件，所以顯示默認(rèn)數(shù)據(jù)
    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;
}

使用window.localStorage.search獲取url地址，并進(jìn)行解析
封裝在util.js文件內(nèi)

/**
 * 解析URL參數(shù)
 * @example ?id=12345&a=b
 * @return Object {id:12345, a:b}
 **/

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 temArr = item.substring(1).split("=");
      let key = decodeURIComponent(temArr[0]);
      let value = decodeURIComponent(temArr[1]);
      obj[key] = value;
    });
  }
  return obj;
};

我們需要將得到的 id 和 name 帶到數(shù)據(jù)中，實際上在獲取數(shù)據(jù)的時候，并沒有帶著id和name，這時就要用到 es6 語法中Object.assign(),官方解釋為：可以把任意多個的源對象自身的可枚舉屬性拷貝給目標(biāo)對象，然后返回目標(biāo)對象。

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

//即將vm.seller屬性和請求返回數(shù)據(jù)對象合并到空對象，然后賦值給vm.seller,這里加上this.seller即提供了一種可擴(kuò)展的機(jī)制，倘若原來的屬性中有預(yù)定義的其他屬性。

解決方案：在 app.vu 內(nèi)使用 keep-alive，保留各組件狀態(tài)，避免重新渲染

使用組件完成導(dǎo)航， 默認(rèn)會被渲染成一個 標(biāo)簽，但必須使用 to屬性，指定連接

// app.vue
 
home
about

// router: index.js

import Vue from "vue";
import Router from "vue-router";
import goods from "components/goods/goods.vue";
import ratings from "components/ratings/ratings.vue";
import seller from "components/seller/seller.vue";

Vue.use(Router);

const routes = [{
  path: "/",
  redirect: "/goods"
}, {
  path: "/goods",
  component: goods
}, {
  path: "/ratings",
  component: ratings
}, {
  path: "/seller",
  component: seller
}];

export default new Router({
  routes,
  linkActiveClass: "active"
});

const ERR_OK = 0;//表示沒有錯誤信息，即獲取數(shù)據(jù)成功
this.$http.get("/api/seller").then((response) => {
  response = response.data;
  if (response.errno === ERR_OK) {
    this.seller = Object.assign({}, this.seller, response.data);
  }
});

// 父組件


// 子組件 header.vue
props: {
  seller: {
    type: Object
  }
}

// 子組件 RatingSelect.vue，派發(fā)自定義事件isContent，將this.onlyContent數(shù)據(jù)傳給父級

this.$emit("isContent", this.onlyContent);
this.$emit("selRatings", this.selectType);

// 父組件 foodInfo.vue 在子組件的模板標(biāo)簽里，使用v-on監(jiān)控isContent傳過來的數(shù)據(jù)

//在router的index.js文件中設(shè)置，要多寫一個對象，指向目標(biāo)組件

Vue.use(Router);

const routes = [{
  path: "/",
  redirect: "/goods"   // 重定向
}, {
  path: "/goods",
  component: goods
}, {
  path: "/ratings",
  component: ratings
}, {
  path: "/seller",
  component: seller
}];

export default new Router({
  routes,
  linkActiveClass: "active"
});

router.push("/Goods");

    

      

      //用了兩種方式的動畫,css和js鉤子
        
        //外層動畫
          

          //內(nèi)層動畫
            

          
        
      
    

 data(){
      return {
        balls: [
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false}
        ],
        dropBalls: []
      }
    },

methods: {
      drop(el) { 
      //觸發(fā)一次事件就會將所有小球進(jìn)行遍歷
        for (let i = 0; i < this.balls.length; i++) {
          let ball = this.balls[i];
          if (!ball.show) { //將false的小球放到dropBalls
            ball.show = true;
            ball.el = el; //設(shè)置小球的el屬性為一個dom對象
            this.dropBalls.push(ball); 
            return;
          }
        }
      },

      beforeDrop(el){ //這個方法的執(zhí)行是因為這是一個vue的監(jiān)聽事件
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect(); //獲取小球的相對于視口的位移(小球高度)
            let x = rect.left - 32;
            let y = -(window.innerHeight - rect.top - 22); //負(fù)數(shù),因為是從左上角往下的的方向
            el.style.display = ""; //清空display
            el.style.webkitTransform = `translate3d(0,${y}px,0)`; 
            el.style.transform = `translate3d(0,${y}px,0)`;
            //處理內(nèi)層動畫
            let inner = el.getElementsByClassName("inner-hook")[0]; //使用inner-hook類來單純被js操作
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
            inner.style.transform = `translate3d(${x}px,0,0)`;
          }
        }
      },

      dropping(el, done) { //這個方法的執(zhí)行是因為這是一個vue的監(jiān)聽事件
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight; //觸發(fā)重繪html
        this.$nextTick(() => { //讓動畫效果異步執(zhí)行,提高性能
          el.style.webkitTransform = "translate3d(0,0,0)";
          el.style.transform = "translate3d(0,0,0)";
          //處理內(nèi)層動畫
          let inner = el.getElementsByClassName("inner-hook")[0]; //使用inner-hook類來單純被js操作
          inner.style.webkitTransform = "translate3d(0,0,0)";
          inner.style.transform = "translate3d(0,0,0)";
          el.addEventListener("transitionend", done); //Vue為了知道過渡的完成，必須設(shè)置相應(yīng)的事件監(jiān)聽器。
        });
      },

      afterDrop(el) { //這個方法的執(zhí)行是因為這是一個vue的監(jiān)聽事件
        let ball = this.dropBalls.shift(); //完成一次動畫就刪除一個dropBalls的小球
        if (ball) {
          ball.show = false;
          el.style.display = "none"; //隱藏小球
        }
      }
    }

    .ball-container
      .ball
        position: fixed //小球動畫必須脫離html布局流
        left: 32px
        bottom: 22px
        z-index: 200 
        transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: rgb(0, 160, 220)
          transition: all 0.4s linear

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

備注:父組件food.vue傳入的數(shù)據(jù)

方法有：@select="selectRating" @toggle="toggleContent"，通過將字組件的方法和父組件的方法進(jìn)行關(guān)聯(lián)，這樣就能夠?qū)崿F(xiàn)跨組件通訊和操作

屬性有：:selectType="selectType":onlyContent="onlyContent" :desc="desc":ratings="food.ratings"，這是通過pros傳入到子組件的屬性，將父組件的數(shù)據(jù)傳到子組件里面，也帶有一種通過父組件來初始化子組件屬性的意思.

  

  
    

    
      {{desc.all}}{{ratings.length}}
      {{desc.positive}}{{positives.length}}
      {{desc.negative}}{{negatives.length}}
    
    
    

      
      只看有內(nèi)容的評價
    
  

@click="select(2,$event)" select方法傳入類型和事件,然后在methods里面調(diào)用父組件的方法,實現(xiàn)子組件控制父組件的目的

:class="{"active":selectType ===2}" 根據(jù)類型來確定顯示的class,實現(xiàn)不同類型顯示不同樣式的目的

positives.length 使用計算屬性自動計算類型數(shù)組的長度,用來顯示不同類型的數(shù)量

@click="toggleContent" :class="{"on":onlyContent}"

toggleContent 控制是否展示有內(nèi)容的rate,也是在methods里面調(diào)用父組件的方法,實現(xiàn)子組件控制父組件的目的

綁定on這個class來控制該按鈕的樣式

  const POSITIVE = 0; //設(shè)置顯示常量
  const NEGATIVE = 1;
  const ALL = 2;

  export default{
    props: {
      ratings: { //傳入ratings數(shù)組,跟food.ratings關(guān)聯(lián)
        type: Array,
        default(){
          return [];
        }
      },
      selectType: { //跟selectType關(guān)聯(lián),通過在父組件里面設(shè)置這3個值來實現(xiàn)控制子組件的操作
        type: Number,
        default: ALL
      },
      onlyContent: { //跟onlyContent關(guān)聯(lián)
        type: Boolean,
        default: true
      },
      desc: { //跟desc關(guān)聯(lián)
        type: Object,
        default(){
          return {
            all: "全部",
            positive: "滿意",
            negative: "不滿意"
          }
        }
      }
    },
    computed: {
      positives(){ //自動過濾rateType(正面的rate)
        return this.ratings.filter((rating) => { //js的filter函數(shù)會返回一個處理后的(為true)結(jié)果的結(jié)果數(shù)組
          return rating.rateType === POSITIVE;
        })
      },
      negatives(){ //自動過濾rateType(反面的rate)
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE;
        })
      }
    },
    methods: {
      select(type, event) { // 選擇rateType并且通知父組件
        if (!event._constructed) {
          return;
        }
        this.$emit("select", type); // 派發(fā)事件，父組件監(jiān)聽此事件
      },
      toggleContent(event) { // 選擇是否顯示有內(nèi)容的rate,并且通知父組件
        if (!event._constructed) {
          return;
        }
        this.$emit("toggle");
      }
    }
  }

v-for使用已經(jīng)很常見了,不過這里需要了解，vue1和2有區(qū)別,現(xiàn)在是用vue2,所以index變量傳遞會變成現(xiàn)在這種模式 (item,index) in goods

vue傳遞原生事件使用$event

:class="{"current":currentIndex === index}" 是vue的綁定class的使用方法，通過綁定一個class變量來直接操作，并且這里的邏輯會跟js代碼里面對應(yīng)

通過currentIndex和index做對比，來確認(rèn)是否添加current類，他們之間的對比關(guān)系也就是 menu 區(qū)域和 foods 區(qū)域的顯示區(qū)域的對比關(guān)系

通過添加current類來實現(xiàn)當(dāng)前頁面的區(qū)域的樣式變化

currentIndex是一個計算屬性，可以隨時變化并且直接反應(yīng)到dom上(看js里面邏輯)

v-show 和 v-if 的區(qū)別官網(wǎng)已經(jīng)說過

v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。

一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時條件不太可能改變，則使用 v-if 較好。

$refs 的使用是vue操作dom的一種方式:

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例:

hook鉤子類的使用,需要結(jié)合js里面的語法來看,這個類只是用來操作,不會產(chǎn)生dom的渲染,方便js控制清晰.

是通過selectFood方法寫入到vue實例里面,然后傳給子組件food

這里selectFoods被自動添加了count屬性,是為了讓購物車更加簡單的計算已選擇的food

@import "./base";
@import "./mixin";
@import "./icon.css";

import "common/css/index.scss";

克隆項目到本地
git clone [email protected]:nanyang24/eleme-vue.git

安裝依賴
npm install

本地開發(fā)，開啟服務(wù)器，瀏覽器訪問http://localhost:8080
npm run dev

構(gòu)建生產(chǎn)
npm run build

運(yùn)行打包文件
node prod.server.js 

會看到 Listening at http://localhost:9000 在瀏覽器中打開即可