用vue仿某外賣app項目總結(jié)

github地址:https://github.com/MissNanLan/vue-takeoutApp.git

先看效果


商品頁.jpg

商家頁jpg
購物車.jpg
評論頁jpg

公告頁S80202-230340.jpg

路由配置

1、main.js
記得要引入各個組件

const  router = new VueRouter({
mode:"hash",
linkActiveClass:"myactive",//設(shè)置高亮顯示。myactive的樣式在app.vue當(dāng)中設(shè)置
routes:[
 {path:'/',redirect:'goods'},  //設(shè)置默認的頁面
 { path:'/goods',
    component:goods
  },
  { path :'/ratings',
    component:ratings
  },
  { path:'/seller',
    component:seller
  }
]
}) 
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

2、App.vue

 <div class="tab border-1px">
        <div class="tab-item">
         <router-link to="/goods" activeClass="myactive" >商品</router-link>
        </div>
          <div class="tab-item">
         <router-link to="/ratings">評論</router-link>
          </div>
          <div class="tab-item">
            <router-link to="/seller" >商家</router-link>
          </div>
        </div>
        <!--keep-alive只讓頁面請求一次-->
        <router-view :seller="seller" keep-alive></router-view>

myactive在style里面設(shè)置高亮顯示的樣式

設(shè)置數(shù)據(jù)來源

要安裝vue-resource
在build的webpack.dev.conf.js的文件里面配置路由代理

const app = express()
var appData = require('../data.json') //設(shè)置數(shù)據(jù)來源
var seller = appData.seller; 
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router();
app.use('/api',apiRoutes);

    //配置路由代理
    before(app){
      app.get('/api/seller',(req,res)=>{
        res.json({
          errno:0,
          data:seller
        })
      }),
          app.get('/api/goods',(req,res)=>{
            res.json({
              errno:0,
              data:goods
            })
          }),
          app.get('/api/ratings',(req,res)=>{
            res.json({
              errno:0,
              data:ratings
            })
          })
    }
  },
配置成功的效果.png

圖標(biāo)圖片的自適應(yīng)

就是這樣的圖標(biāo).png

這里用的是stylus，stylus功能強大，可以寫成函數(shù)等等。這里可以參考張鑫旭的博客
1、定義
image.png

image.png

關(guān)于更多設(shè)備像素比的知識可點擊這里devicePixeRatio
2、引用
image.png

字體圖標(biāo)的使用

這里用的是iconmoon，就是將svg的文件上傳到iconmoon做成字體圖標(biāo)文件。


svg文件.png

使用方法

    <i class="icon icon-keyboard_arrow_right"></i>

當(dāng)頁面超出時出現(xiàn)滾動效果（左側(cè)菜單和右側(cè)區(qū)域都要獨立滾動）

    _initScroll() {
           this.meunScroll = new BScroll(this.$refs.menuWrapper, {
             click:true  //這里設(shè)置為click等于true的原因是因為BScroll阻止了點擊事件
           });
           this.foodScroll = new BScroll(this.$refs.foodWrapper, {
               probeType: 3,
               click:true
          });

這里用的BScroll插件。安裝命令是 cnpm install --save-dev better-scroll，然后在要使用的組件中引入即可

聯(lián)動和選擇效果

聯(lián)動效果，即右側(cè)區(qū)域滾動到某個分類塊其左側(cè)菜單也要高亮顯示
首先我們想下邏輯。是不是要知道右側(cè)區(qū)域的內(nèi)容每個分類塊的高度，當(dāng)右側(cè)內(nèi)容列表的內(nèi)容和和左側(cè)菜單列表的下標(biāo)值相等的時候，左側(cè)菜單列表高亮顯示。
算出高度

聯(lián)動
  _calculateHeight(){ //獲取foodList的高度
            let foodList = this.$refs.foodList;  //拿到foodlist
            let height = 0;
            this.listHeight.push(height);
            for (let i = 0; i < foodList.length; i++) {
              let item = foodList[i];
              height += item.clientHeight; //clientHeight是可見區(qū)域的高度
              this.listHeight.push(height);
             }
           }

  created() { //實例化創(chuàng)建完成之后的鉤子函數(shù)
          this.classMap1 = ['decrease','discount','special','guarantee','invoice'];
          this.$http.get('/api/goods').then((response) => {
            response = response.body; //response.body返回一個對象
            if(response.errno === ERR_OK){
              this.goods = response.data;
              this.$nextTick(() => {  //this.$nextTick是在下次DOM更新循環(huán)結(jié)束時調(diào)用延遲回調(diào)函數(shù)。
                   this._initScroll();
                   this._calculateHeight();
              })
            }
          });
        },

監(jiān)聽右側(cè)區(qū)域滾動事件

  //監(jiān)聽右側(cè)區(qū)域的滾動事件
           this.foodScroll.on('scroll', (pos) => {
          // 判斷滑動方向，避免下拉時分類高亮錯誤（如第一分類商品數(shù)量為1時，下拉使得第二分類高亮）
          if (pos.y <= 0) {
            this.scrollY = Math.abs(Math.round(pos.y));
            }
         });

高亮顯示

 currentIndex() {
              for (let i = 0; i < this.listHeight.length; i++) {
                let height1 = this.listHeight[i];
                let height2 = this.listHeight[i + 1];
                if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
                  this._followScroll(i);
                  return i;
                }
              }
              return 0;

 _followScroll(index) {
              let menuList = this.$refs.menuList;
              let el = menuList[index];
              this.meunScroll.scrollToElement(el, 300, 0, -100); 
              //scrollToElement(el, time, offsetX, offsetY, easing)
            }
image.png

條件成立時給它加上高亮顯示的樣式

選擇
     selectMenu(index,event) {
          if (!event._constructed) {  //這里會觸發(fā)兩次事件，瀏覽器原生事件和自己派發(fā)事件。如果不穿$event進來的話，那么就會打印兩次
            return;                  //這里是把原生的事件給return掉
          }
          let foodList = this.$refs.foodList;
          let el = foodList[index];
          this.foodScroll.scrollToElement(el, 300);//300是滾動的時間
        }

在左側(cè)菜單點擊觸發(fā)

父組件goods項子組件傳選中的商品

food子組件和shopcart，還有cartcontrol組件都會接收父組件goods傳過來的值

 //在goods組件里面選了多少foods
         selectFoods() {
            let foods = [];
            this.goods.forEach((good) => {
              good.foods.forEach((food) => {
                if (food.count) {
                  foods.push(food);
                }
              });
            });
            return foods;
         }

購物車小球動畫

 beforeDrop(el) {
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect(); //getBoundingClientRect用于獲取某個元素相對于視窗的位置集合
            let x = rect.left - 32;
            let y = -(window.innerHeight - rect.top - 22);
            el.style.display = '';
            el.style.webkitTransform = `translate3d(0,${y}px,0)`;//y軸轉(zhuǎn)
            el.style.transform = `translate3d(0,${y}px,0)`;
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`; //x軸轉(zhuǎn)
            inner.style.transform = `translate3d(${x}px,0,0)`;
          }
        }
      },
      dropping(el, done) {
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight;
        this.$nextTick(() => {
          el.style.webkitTransform = 'translate3d(0,0,0)';
          el.style.transform = 'translate3d(0,0,0)';
          let inner = el.getElementsByClassName('inner-hook')[0];
          inner.style.webkitTransform = 'translate3d(0,0,0)';
          inner.style.transform = 'translate3d(0,0,0)';
          el.addEventListener('transitionend', done);
        });
      },
      afterDrop(el) {
        let ball = this.dropBalls.shift();
        if (ball) {
          ball.show = false;
          el.style.display = 'none';
        }
      }
    }

調(diào)用

<transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
            <div class="ball" v-show="ball.show">
              <div class="inner inner-hook"></div>
            </div>
          </transition>

星級評分

這里的星級評分的邏輯還算比較簡單。它接受父組件傳來的兩個參數(shù)，一個是星星的大小，一個是分數(shù)。

     props:{
            size:{
                type:Number
            },
            score:{
                type:Number
            }
        }

關(guān)鍵代碼：怎么顯示全星、半星、空星

 itemClasses() {
                let result = [];  //math.floor()對數(shù)字進行下舍入
                let score = Math.floor(this.score*2) / 2;
                let hasDecimal = score%1 !=0;  //余數(shù)為0的話就不是小數(shù)
                let integer = Math.floor(score);
                for(let i =0; i<integer;i++){
                    result.push(CLS_ON);
                }
                if(hasDecimal){
                    result.push(CLS_HALF);
                }
                while(result.length<LENGTH){
                    result.push(CLS_OFF);
                }
                return result;
            }

flex布局實現(xiàn)左側(cè)固定右側(cè)自適應(yīng)

html代碼

<div class="goods">
<div class="menu-wrapper"></div>
<div class="foods-wrapper"></div>
</div>

stylus代碼

.goods
  display:flex
  .menu-wrapper
     flex:0 0 100px;
     width:100px
  .foods-wrapper
     flex:1

這樣就實現(xiàn)了左側(cè)固定右側(cè)區(qū)域自適應(yīng)

水平方向滾動

   _initScroll(){
        if(!this.scroll){
          this.scroll = new BScroll(this.$refs.seller,{
            click:true
          });
        }else{
          this.scroll.refresh();
        }
      }
商家實景水平滾動.png

打包編譯

node build  //會生成dist文件夾
dist文件夾.png

可以建一個小型的prod.server.js
在手機訪問輸入自己的ip加端口號，如果不能訪問的話，在config文件夾下的index.js文件里面的dev將host改為0.0.0.0，在電腦端用localhost加端口訪問


.png

個人總結(jié)：一路走來，確實遇到不少的困難，是因為老師的教學(xué)視頻是1.0的,而現(xiàn)在vue都升級2.x了。所以在這個過程中難眠會遇到一些困難，我記得第一次接觸這個視頻，因為版本不對，自己就放棄了，但是后來又重新打開來看，加深對vue的認識

主要有建立數(shù)據(jù)mocks、路由配置（哈希路由和歷史路由、高亮顯示、配置默認頁面）、字體圖標(biāo)（svg文件編程字體文件，iconmoon）、圖標(biāo)圖標(biāo)做自適應(yīng)（主要使用媒體查詢）、stylus實戰(zhàn)（主要是stylus可以寫成函數(shù)的形式，方便于整合樣式代碼）、flex布局、父子組件傳遞數(shù)據(jù)、Bscroll插件的使用（當(dāng)移動端的內(nèi)容超出時滾動、水平也是）、vue的過渡等等

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 目錄 UI組件 開發(fā)框架 實用庫 服務(wù)端 輔助工具 應(yīng)用實例 Demo示例 UI組件 element★13489 ...
    余生社會閱讀 20,517評論 7贊 233
  • 轉(zhuǎn)載 :OpenDiggawesome-github-vue 是由OpenDigg整理并維護的Vue相關(guān)開源項目庫...
    果汁密碼閱讀 23,421評論 8贊 124
  • 感賞今天醫(yī)院同事帶我去好吃的老友面，而且價錢比平時去吃的任何一家粉店都要便宜。以后想吃好東西又多了一個地方。 感賞...
    麗麗丫丫閱讀 114評論 0贊 0
  • 雨水糊了我的眼 似乎想洗刷眼中的迷茫 教堂的十字架洗禮在綿綿細雨中 寺院的沉鐘捶擊心中的掙扎 我停步在山腰 雨水打...
    顧熙卿閱讀 283評論 0贊 2
  • 時間這匹野馬不羈的溜達，奔騰，碾壓所有途中的百態(tài)的投影。不覺恍然間過了二十八個年頭，卻是伸手馬尾也薅不下一根。著實...
    紅塵靜水閱讀 384評論 0贊 0

友情鏈接更多精彩內(nèi)容