項(xiàng)目效果預(yù)覽  ele效果預(yù)覽
項(xiàng)目源碼地址 ele源碼
跟著慕課網(wǎng)黃軼老師  敲餓了么 vue 項(xiàng)目

作者項(xiàng)目源代碼地址

這本來是寫在最后面一段的，我現(xiàn)在把他寫在了最前面，方便我們事先知道，整個(gè)項(xiàng)目做完之后是什么樣子的

項(xiàng)目完成之后在 根目錄 下 npm run build （就是 npm run dev 的那個(gè)目錄）

會(huì)在根目錄下生成一個(gè) dist 目錄，其中包含著 index.html 和一個(gè)css目錄，一個(gè)js目錄

按官方說，這個(gè) dist 目錄必須 http server 環(huán)境下才能運(yùn)行

下個(gè) xampp 在本地服務(wù)下訪問

訪問時(shí)出現(xiàn)了以下幾個(gè)問題：

css js 引用路徑出錯(cuò) （將 cofig目錄下的 index.js 里的 assetsPublicPath:"./" 這樣設(shè)置即可）

由于視頻上是寫了一個(gè) node 后端服務(wù)，訪問本地的 data.json 文件，然后用 vue-resource 訪問這個(gè) node 服務(wù)才請求到的接口
打包之后，訪問不到這個(gè) node 服務(wù)了，自然就出錯(cuò)了
如何解決：我在朋友的幫助下，知道了 easy-mock這個(gè)東西，然后 把data.json 文件 用 easy-mock 制作成了 一個(gè) http 接口
后來因?yàn)?github 不能訪問 http 接口，又把 http 改成了 https（我最后打包的項(xiàng)目放在了 gitpages上了）

添加靜態(tài)資源文件，修改 build、dev-serve.js mock模擬數(shù)據(jù)，
添加 meta 標(biāo)簽
碰到 換臺(tái)機(jī)器 報(bào)錯(cuò)-沒有 modules ，暫時(shí)解決方法，刪除整個(gè) node_modules,然后重新 npm install

學(xué)習(xí)了 1px 邊框制作（不過感覺用處不大）
編寫 stylus mixin 函數(shù)并在引用
(注意：引入外界stylus樣式文件時(shí)：只能用 @import 在style標(biāo)簽里引用
且路徑不可以在 webpack.base.conf.js alias別名)

全局通用樣式，字體文件，圖標(biāo)文件
可以用統(tǒng)一在同級目錄下用一個(gè) index.styl
文件作為出口，在其內(nèi)部 用 @import "./minix.styl" 引入
然后在再 webpack.base.conf.js  統(tǒng)一配置 alias 別名
之后再在 main.js  引入這個(gè) index.styl 文件 即可使用這些樣式文件
如：import "common/stylus/index.styl"

stylus 文件書寫
    1.盡量使用類 css 語法即 {}
    2.盡量避免拷貝代碼，產(chǎn)生多余的空格縮進(jìn)問題

做完之后好好學(xué)習(xí)一下 flex 布局
display:flex  flex:1
完成 header 組件 ，goods組件 完成布局

better-scroll  的用法

better-scroll 實(shí)現(xiàn)列表滾動(dòng)聯(lián)動(dòng)
1. 初始化 better-scroll
    _initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuWrapper,{
            click:true        //默認(rèn)派發(fā)點(diǎn)擊事件
        });

        this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
            click:true,
            probeType:3   //實(shí)時(shí)偵測滾動(dòng)
        });
    },

2. 在 vue 鉤子函數(shù) created 內(nèi) this.$nextTick 回調(diào)里面調(diào)用 better-scroll初始化函數(shù)

菜單欄根據(jù)foodList列表滾動(dòng)實(shí)時(shí)高亮

1. 通過 _calculateHeight 方法動(dòng)態(tài)計(jì)算出 每個(gè)列表的標(biāo)題 的 clientHeight 值，并將其推進(jìn)一個(gè) listHeight 數(shù)組
2. 當(dāng)滾動(dòng) foods 列表時(shí)，會(huì)動(dòng)態(tài)計(jì)算出 pos.y 的值，
3. 把這個(gè) pos.y 的值在計(jì)算屬性里判斷 其在 listHeight 數(shù)組中對應(yīng)的 index 值
4. 然后將菜單列表數(shù)組中的 index 值 設(shè)置為高亮 

點(diǎn)擊左側(cè)菜單欄，右側(cè) foods 列表實(shí)時(shí)滾動(dòng)到相應(yīng)位置

1. 給 menu-item 綁定一個(gè) setMenu(index) 方法
2. 然后根據(jù)這個(gè) index 獲取foodslist 里面對應(yīng)的 li dom 元素
3. 利用 scrollToElement(el,100) api 自動(dòng)將foodlist滾動(dòng)到合適位置

selectMenu(index) {
    // 因?yàn)橛凶詣?dòng)派發(fā)事件，所以需要阻止，
    if(!event._constructed) return; 
    console.log(index);
    let foodList = this.$refs.foodList;  //通過 $refs.foodList獲取當(dāng)前dom元素
    let el = foodList[index];
    this.foodsScroll.scrollToElement(el,10);
}  

購物車計(jì)算屬性使用

1. 將 item.foods 數(shù)據(jù) 通過 props 屬性傳遞到子組件（cartcontrol組件）

2. 在 cartcontrol 組件內(nèi) 執(zhí)行  addCart、decreaseCart 方法改變  item.foods.count 的值

    如果 item.count 值不存在，使用  Vue.set(this.food,"count",1) ; 
    給foods增加 count 屬性，如果直接增加 count 屬性，不會(huì)產(chǎn)生響應(yīng)式數(shù)據(jù)，必須用  Vue.set() 方法

3. 在子組件改變 item.foods對象的值，相應(yīng)的父組件內(nèi)的 item的值會(huì)隨之改變（js復(fù)雜數(shù)據(jù)類型地址引用）

4. 在父組件 goods.vue 利用計(jì)算屬性 動(dòng)態(tài)的生成購物車數(shù)據(jù)，然后通過 props屬性傳遞給 shopcart.vue 組件

    計(jì)算屬性的計(jì)算出的值為響應(yīng)式數(shù)據(jù)可以直接拿來使用,即在  v-for 中直接遍歷  selectFoods 
    
    // 選中的商品即購物車內(nèi)的商品
    selectFoods() {
        let foods = [];
        this.goods.forEach((good) => {
            good.foods.forEach((food) => {
                if(food.count){
                    foods.push(food);
                }
            })
        });
        console.log(foods);
        return foods;
    }
    
    

cartcontrol 增加和減少商品小球動(dòng)畫

1. 減少商品小球動(dòng)畫
    利用 vue transition 組件-過度動(dòng)畫 和 v-show 配合 可以給任何元素和組件添加 entering/leaving過度 
    條件渲染 （使用 v-if）
    條件展示 （使用v-show）
    動(dòng)態(tài)組件
    組件根節(jié)點(diǎn)
    當(dāng)插入或刪除包含在 transition 組件中的元素時(shí)，Vue將做如下處理：
    1.自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 css 過度或動(dòng)畫，如果是在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 css 類名
    2.如果過渡組件提供了 JavaScript鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用
    3.如果沒有找到鉤子并且也沒有檢測到css動(dòng)畫，DOM操作（插入/刪除）在下一幀中立即執(zhí)行

    過度的 css 類名
    1. v-enter 定義進(jìn)入過渡的開始狀態(tài)，在元素插入式時(shí)生效，在下一幀移除
    2. v-enter-active 定義進(jìn)入過渡的結(jié)束狀態(tài)。在元素被插入時(shí)生效，在 transition/animation 完成之后移除
    3. v-leave 定義離開過度的開始狀態(tài)。在離開過渡被觸發(fā)時(shí)生效，在下一幀移除
    4. v-leave-active 定義離開過渡的結(jié)束狀態(tài)，在離開過渡被觸發(fā)時(shí)生效，在下一幀被移除


    html:
    
        
        

            
               
        
    


    css：
    
    .decrease{
        transition:all 0.4s linear;
        transform:translate3d(0,0,0);
        opacity:1;
        .inner{
            transition:all 0.4s linear;
            transform:rotate(0deg);
        }
    }
    
    &.move-enter,&.move-leave-active{
        transition:all 0.4s linear;
        transform:translate3d(24px,0,0);
        opacity:0;
        .inner{
            transform:rotate(180deg);
        }
    }

2. 增加小球動(dòng)畫

    實(shí)現(xiàn)過程：

    1、小球最終的落點(diǎn)都是一致的，在左下角購物車按鈕處 （transform:translate(0,0,0)）

    2、傳遞點(diǎn)擊的 dom 對象
        在 cartcontrol 組件里點(diǎn)擊 + 時(shí)， 將點(diǎn)擊的 dom 元素，通過通過 $emit 派發(fā)給父組件 goods.vue
        this.$emit("add",event.target);
        

            
            
        
        // 子組件$emit派發(fā)而來的事件
        addFood(target) {
            this._drop(target);  //傳遞 target
        },
        _drop(target) {
            // 體驗(yàn)優(yōu)化,異步執(zhí)行下落動(dòng)畫
            this.$nextTick(() => {
            //調(diào)用 shopcar 組件中的 drop 方法，向 shopcar組件 傳入當(dāng)前點(diǎn)擊的 dom 對象
                this.$refs.shopcart.drop(target);
            });
        }

    3.在 shopcar 組件里，創(chuàng)建 小球 dom 結(jié)構(gòu)

        
        

            

                
                
                    
                    

                        

                    
                
            
        


    4. 創(chuàng)建 一個(gè)小球數(shù)組，內(nèi)置5個(gè)對象（5個(gè)小球，均有 show 屬性，初始值為false）
        以便在多次快速點(diǎn)擊時(shí)，屏幕出現(xiàn)多個(gè)小球
        5個(gè)小球的初始位置 均在 左下角 購物車按鈕處
        創(chuàng)建一個(gè) dropBalls 數(shù)組用于存儲(chǔ) 處在下落過程中的小球
        執(zhí)行下落時(shí) 將 父組件傳遞過來的 dom 對象 當(dāng)做一個(gè)屬性 給 ball，方便 在下面的方法中計(jì)算 ball 的位置
        data() {
            return {
                // 創(chuàng)建5個(gè)小球用于動(dòng)畫
                balls:[{show:false},{show:false},{show:false},{show:false},{show:false}],
                dropBalls:[], // 存儲(chǔ)下落小球
            }
        },
    5.執(zhí)行 v-on:before-enter="beforeDrop"  過度前鉤子函數(shù)
        設(shè)置 ball 初始位置，計(jì)算處 初始位置與目標(biāo)位置的 差值 x,y ，將小球 transform ：translate（x,y,0）到動(dòng)畫初始位置

    6.執(zhí)行 v-on:enter="dropping"  過度中鉤子函數(shù)
        手動(dòng)觸發(fā)瀏覽器重繪，將 ball 通過 transform ：translate（0，0，0） 移動(dòng)到目標(biāo)位置

    7. 執(zhí)行 v-on:after-enter="afterDrop"  過度結(jié)束鉤子函數(shù)
        從存儲(chǔ)下落小球的數(shù)組里 unshift 當(dāng)前小球
        并將當(dāng)前小球 display:none; show:false

    8.樣式
    .ball-container{
        //外層 做縱向運(yùn)動(dòng)
        .ball{
            position:fixed
            left:32px
            bottom:22px
            z-index:200
            //y 軸 貝塞爾曲線
            transition:all 2s cubic-bezier(0.49, -0.29, 0.75, 0.41)
            //內(nèi)從做橫向運(yùn)動(dòng)
            .inner{
                width:16px
                height:16px
                border-radius:50%
                background-color:rgb(0,160,220)
                //x 軸只需要線性緩動(dòng)
                transition:all 2s linear
            }
        }

購物車列表的顯示隱藏狀態(tài)

    按鈕控制 fold => fold 控制 => listShow ， listShow => 控制狀態(tài)顯示 (在totalCount>0)
    在 data 選項(xiàng)里，定義一個(gè) fold（折疊，true） 控制購物車的顯示隱藏狀態(tài)
    在 computed 計(jì)算屬性里，定義一個(gè) listshow 方法，來表示購物車列表的顯示隱藏狀態(tài)

    listShow() {
        if(!this.totalCount){  //假如所選商品為 0 ，return 掉結(jié)果，并將 fold 置為初始值
            this.fold = true;
            return false;
        }
        let show = !this.fold; // 否則，取 fold 的反值，靠 fold 的變化來 決定 列表顯示與否
        return show;
    }

    在 method 方法里有個(gè) toggleList 方法控制 fold 狀態(tài)
    toggleList(){
        if(!this.totalCount){
            return;
        }
        this.fold = !this.fold;
    },

詳情頁組件

    將選中的商品 通過 props 傳給 子組件
    
    food 組件 通過 $emit 將food 組件添加購物車按鈕傳遞給 父組件 以便實(shí)現(xiàn)小球動(dòng)畫

    addFood(target){
        console.log(target);
        //當(dāng)前組件必須在父組件 引入處，bangding @add="xxx",繼而執(zhí)行 父組件的 xxx 方法
        this.$emit("add",target);
    },

    詳情頁 過渡動(dòng)畫
    

    &.fly-enter-active, &.fly-leave-active {
        transition: all 0.2s linear
    }
    &.fly-enter, &.fly-leave-active {
        transform: translate3d(100%, 0, 0)
    }

ratingselect 組件（評價(jià)選擇組件）

    1. 評價(jià)組件
    全部、推薦、吐槽 類似一個(gè) tab 選項(xiàng)卡的欄目
    只看有內(nèi)容的評價(jià) 篩選
    因?yàn)檎麄€(gè)項(xiàng)目會(huì)有兩個(gè)地方有這個(gè)東西，所以將其抽象為 ratingselect 組件

    組件書寫：
    上邊是一個(gè) tab 選項(xiàng)卡
    1. 定義 三個(gè)常量 代表這三種狀態(tài)
        const Positive = 0;     //推薦
        const Negative = 1;     //吐槽
        const All = 2;          //全部

        

            {{desc.all}} {{ratings.length}}
        
        在點(diǎn)擊事件中，將這三個(gè)狀態(tài)，發(fā)送給 父組件
        由于這 三個(gè)選項(xiàng) 的 選中狀態(tài)，是由父組件（food.vue）父組件通過 props 傳遞過來的，所以不可以在子組件中修改

        select(type,event){
            if(!event._constructed){
                return;
            }
            //不可以在子組件內(nèi)，隨意改變父組件傳過來的值，通過 $emit 將子組件需要改變的值，發(fā)送給父組件，然后父組件在通過 props 傳給 子組件，然后 view 就會(huì)發(fā)生相應(yīng)的改變
            this.$emit("select",type);
        }


        父組件：
            使用子組件
            
            
            //在 父組件 methods 對象中 用 selectRating 方法接收子組件 emit 過來的值，賦值給 父組件 selectType 然后在通過 props傳遞給子組件，從而實(shí)現(xiàn)改變
            selectRating(type){
                this.selectType = type;
                this.$nextTick(()=> {
                    this.scroll.refresh();
                })
            },

            //只看有內(nèi)容的 評價(jià) 也是同理 

food.vue 組件中的時(shí)間轉(zhuǎn)換函數(shù)

    在 common 目錄下創(chuàng)建一個(gè)公共工具函數(shù) utils.js ,然后在需要用到的 組件中，進(jìn)行 import 引入 

    utils.js
        export 
            function formatDate(fmt){
                ......
            }


    在 food 組件中使用,只需用 import 引入要使用到的 方法 即可
    import { format } from "common/js/utils"
    在組件中即可直接使用 該方法

　food.vue 里這種列表布局

    上下左右的間距，用 padding 撐開
    左邊 用 flex 給個(gè)固定的尺寸 flex: 0 0 28px
    右側(cè) 用 flex:1 ，右側(cè)剩余空間 自動(dòng)充滿
    然后右側(cè)內(nèi)容自然流布局，上下 margin 分配
    右側(cè)時(shí)間采用絕對定位
    布局：清晰簡單明了
    
    一般情況下：列表中文字垂直居中的布局一般用 上下 padding 撐開，不要直接設(shè)置高度，用line-height居中
    文字高度用 line-height 撐開

商家頁面(seller.vue) 商家實(shí)景頁面

    商家實(shí)景左右滾動(dòng)列表圖片
    
    先根據(jù)圖片尺寸和左右 margin 計(jì)算出 list 列表容器的 寬度，然后 用 better-scroll 進(jìn)行左右滾動(dòng)

    一般情況下，要在 vue mounted 之后就可以初始化 better-scroll 
    但是這時(shí)候，圖片資源還沒有請求到，所以無法得知 圖片的 pics 的 length，繼而無法得知，列表容器的寬度

    解決辦法：
    vue 提供了一個(gè) watch 對象，來用來監(jiān)測數(shù)據(jù)的變化
    當(dāng) watch 監(jiān)測到 seller 數(shù)據(jù)的變化，然后調(diào)用 _initPicScroll，初始化 better-scroll 
    watch:{
        "seller"(){
            this.$nextTick(()=>{
                this._initPicScroll();
            })
        }
    },
    methods:{
        _initPicScroll() {
            if(this.seller.pics){
                let picWidth = 120;
                let margin = 6;
                let width = this.seller.pics.length * (picWidth + margin) - margin;
                this.$refs.picList.style.width = width + "px";
                
                //better-scroll左右滾動(dòng)
                this.picScroll = new BScroll(this.$refs.picWrapper,{
                    scrollX: true,
                    eventPassthrough: "vertical"
                })
            }
        }
    }

　 利用localStorage 在本地收藏商家

    收藏商家是放在本地緩存 localStorage 里的

    #１.　在　common/js/utils 文件里創(chuàng)建兩個(gè)公共函數(shù)函數(shù) 寫入 localStorae 和 讀取 localStorage 
    # 2.  在點(diǎn)擊收藏按鈕時(shí)，調(diào)用存儲(chǔ) 方法，首次進(jìn)入頁面時(shí)，調(diào)用 讀取方法

    由于 確定收藏與否的 favorite 屬性，是在 data 選項(xiàng)上被vue監(jiān)測的，所以在data 選項(xiàng)上 favorite 是一個(gè)立即執(zhí)行函數(shù)

    data:{
        favorite: ( () => {
            // 要讀取的對象，key值，默認(rèn)值
            return loadFromLocal(this.seller.id, "favorite", false);    
        } )()
    }  

路由切換時(shí)，各組件會(huì)保持原來的狀態(tài)

    # 在路由外連上加上   即可