# webapp vue2.x仿餓了麼app專案總結

  專案地址：https://github.com/harrietjia/vue2-webapp.git如果覺得有幫助，希望可以在右上角給我個star支援一下，謝謝！

部分截圖：

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


    common/---- 資料夾存放的是通用的js,css和fonts
    components/----資料夾用來存放我們的 Vue 元件
    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 中


## 各元件之間的關係：
```
├──APP.vue
  │  ├──Header.vue--頭部元件
  │  │  ├──star.vue--星星評分元件
  │  ├──goods.vue--商品元件
  │  │  ├──shopcart.vue--購物車元件,包括小球飛入購物車動畫,使用this.\$root.$on('cart.add', this.drop)接收，並給drop方法使用,這裡特別說明`$root`，官方解釋：表示當前組建樹的根例項，如果根例項沒有父例項，次例項將會是自己
  │  │  ├──cartcontrol.vue--購買控制元件--選中數量返回給父元件goods，goods響應後，重新計算選中數量，並用this.\$root.$emit（'name',event.target）將資料傳送給購物車元件，
  │  │  ├──food.vue--商品詳情頁
  │  │  │  ├──ratingselect.vue--評價內容篩選元件
  │  ├──ratings.vue--評論元件
  │  │  ├──ratingselect.vue--評價內容篩選元件
  │  ├──seller.vue--商家元件


獨立元件
  ├──split.vue--關於分割線元件
  ├──ratingselect.vue--評價內容篩選元件
```
## 開發過程問題和技巧彙總：


### 1、分開設定css樣式：
圖示icon.css--文字圖示樣式，通過icommon.io網站 將svg圖片轉成文字圖示樣式
公共base.css--處理裝置畫素比的一些樣式,針對1px border的實現：主要是利用偽類和通過設定class針對DPR的一個y軸的縮放
工具mixin.css--設定border-1px樣式和背景樣式
css書寫規範: 1、先設定佈局 (display,position)
     2、設定寬高 (觸發重繪的)
     3、設定字型、顏色 (可被繼承的)


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


### 3、要求寬度自適應的佈局，
採用flex佈局,父級display:fixed,子元素flex:放大倍數，縮小倍數，基準值


### 4、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 name="fade"></transition>


          opacity: 1
          background: rgba(7, 17, 27, .8)
          &.fade-enter-active, &.fade-leave-active
            transition: all .5s
          &.fade-enter, &.fade-leave-active
            opacity: 0
            background: rgba(7, 17, 27, 0)


包括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


### 5、seller元件：


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


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


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


### 6、goods,ratings,seller元件之間切換時會重新渲染
解決方案：在app.vue內使用`keep-alive`，保留各元件狀態，避免重新渲染


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


### 7、food頁面中圖片的設定
pading-top設定為100%時，會根據寬度來計算padding，所以width:100%; height: 0;padding-top: 100%會是一個正方形的盒子


### 8、better-scroll的設定
better-scroll依賴於文件，所以最好在mounted中對其進行初始化
在初始時要對文件中的內容進行引用，最好放在vue.$nextTick()中進行，這樣可以保證該引用已經存在於文件流中




## 總結


    將相同樣式或功能的區塊單獨提出來，作為一個元件。


另外元件中用到的圖片等資源就近維護，即可以考慮在元件資料夾中新建images資料夾。


抽離元件遵循原則：
*要儘量遵循單一職責原則，複用性更高，不要設定額外的margin等影響佈局的東西*


### -css前處理器--stylus
全域性安裝，安裝之前你需要你安裝 nodejs


    $ npm install stylus -g
index.styl是stylus檔案的入口檔案，裡面使用@import 引入各種styl檔案


### vue2相較vue1有很多地方改動
比如


>*  v-for 中的隱式變數$index,$key已經取消，可以自己定義，例如 v-for="(itemClass,index) key="index"
>*  transition書寫格式不在是在元素標籤上寫，而是作為一個標籤`<transition></transition>`將目標元素包起來,過渡狀態變為4種狀態
>*  v-el 和 v-ref 都棄用，改為使用`ref`屬性為元素或元件新增標記，通過`$refs`獲取
>*  只允許一個根元素
>*  $dispatch廢除，vue2.0中的事件用vue.$emit, vue.$on, $vue.off來派發，響應和解除(增加按鈕案例)
>*  vue2.0中props中的資料只可以父元件來改變，當子元件試圖對該屬性進行改變之後vue的編譯器會發出警告資訊，我們一般不建議子元件對props中的資料進行改變，
    當必需時，可以用vue.$emit()方法將這個改變的事件派發出去，在你元件中進行接收並進行相應的改變
>*  生命週期的鉤子函式
    beforeCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeDestroy
    destroyed

###專案執行
```
克隆專案到本地
git clone https://github.com/harrietjia/vue2-webapp.git

安裝依賴
npm install

本地開發，開啟伺服器，瀏覽器訪問http://localhost:8888
npm run dev

構建生產
npm run build

執行打包檔案
node prod.server.js

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

```

 PC端預覽網址：http://73eabb3f-d836-425b-87b0-2d13a4c1c73d.coding.io

移動端也可掃描以下二維碼預覽：