Vue仿餓了麼app專案總結

小明同學喲發表於2020-01-02
VueAPP

前言

這是我的第一個基於Vue專案的作品，目的是把之前的前端知識累積加上目前流行的前端框架，以專案的形式展示出來。 大家在學習Vue的時候，可以將此專案作為學習Vue框架的一個模板

cmd-markdown-logo

原始碼地址

原始碼：github.com/shifengming…

實現功能

  • Goods、Ratings、Seller 元件檢視均可上下滾動

  • 商品頁 點選左側menu，右側list對應跳轉到相應位置

  • 點選list檢視商品詳情頁，父子元件的通訊

  • 評論內容可以篩選檢視

  • 購物車元件，包括新增刪除商品及動效，購物控制元件與購物車元件之間為兄弟元件通訊，點選購物車圖示，展示已選擇的商品列表

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

  • loaclStorage 快取商家資訊（id、name）

使用的技術棧

vue2.0 + vue-router + vue-cli + axios + stylus + flex佈局 + es6 + eslint + webpack2 
複製程式碼

專案目錄

  • app.vue
  • header.vue頭部元件
  • star.vue星星評分元件
  • goods.vue商品元件
  • shopcart.vue購物車元件，包括小球飛入購物車動畫
  • cartcontrol.vue購買加減圖示控制元件--選中數量返回給父元件goods,goods響應後，重新計算選中的數量，將資料傳送給購物車元件
  • food.vue商品詳情頁
  • ratingselect.vue評論內容篩選元件
  • ratings.vue評論元件
  • seller.vue商家元件
  • split.vue關於分割線元件

專案結構

common資料夾存放的是通用的css和fonts
componets資料夾用來存放Vue元件
router資料夾存放Vue元件
build檔案是webpack的打包編譯配置檔案
config資料夾存放的是一些配置項，比如我們伺服器訪問的埠配置等
dist該檔案一開始是不存放，在專案經過build之後才會生成
Prod.server.js該檔案是測試模擬的伺服器配置，用來執行dist裡面的檔案
config/index.js中，build物件中新增一條埠設定port:9000
App.vue根元件，所有的子元件都將在這裡被引用
Index.html整個專案的入口檔案，將會引用我們的根元件App.vue
Main.js入口檔案的js邏輯，在webpack打包之後將被注入到index.html
複製程式碼

搭建Vue的執行環境

1，首先是安裝node

端開發框架和環境都是需要Node.js，先安裝node.js開發環境，vue的執行是依賴於node的npm的管理工具來實現的，下載地址(nodejs.org/en/)

2，檢視node的版本號

下載好node之後，開啟cmd管理工具，輸入node -v，回車，檢視node版本號，出現版本號則說明安裝成功

node -v
複製程式碼

3，安裝淘寶npm映象

由於npm是國外的，使用起來比較慢，這裡使用淘寶cnpm映象來安裝vue，淘寶的cnpm命令管理工具可以代替預設的npm管理工具

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

4，安裝全域性vue-cli腳手架

淘寶映象安裝之後，我們就可以全域性vue-cli腳手架，輸入命令:cnpm install -g vue-cli回車；驗證是否安裝成功，在命令輸入vue,出來vue的資訊，及說明安裝成功

cnpm install -g vue-cli
複製程式碼

5，初始化專案

Vue init webpack demo
複製程式碼

(demo指的是你新建的專案名稱/檔名稱)

6，執行專案

npm run dev
複製程式碼

然後就會出來http://localhost:8080 把這個網址複製到瀏覽器中開啟

7，釋出程式碼

npm run build
複製程式碼

釋出完程式碼後會生成dist目錄，儲存著專案的所有可執行的程式碼

開發過程中重點問題總結

better-scroll

Better-scroll可能是目前最好用的移動端滾動外掛 外掛在移動端使用時需要設定 click：true，否則移動端滑動無效

分開設定css樣式

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

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

3，工具mixin.css--裝置border-1px樣式和背景樣式

sticky-footer佈局

在這個專案的header元件的詳情頁採用stick-footer佈局

特點：如果頁面內容不夠長，頁尾塊貼上在視窗底部； 如果內容足夠長，頁尾塊會被內容向下推送

實現：父級 position:fixed，內容設為padding-bottom:64px，頁尾相對定位，margin-top:-64px，clear:both為了保證相容性，父級要清除浮動

cmd-markdown-logo

參考：www.jianshu.com/p/3853024d5…

要求自適應佈局

1，左側寬度固定，右側寬度自適應

左側固定width：80px，右側自適應

parent:
    display:fiexd;
child-left:
    flex:0 0 80px
child-right:
flex:1
複製程式碼

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

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

.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%
    }
}
複製程式碼

背景模糊效果

filter：blur(10px)

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

cmd-markdown-logo

transition過渡

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

name-String用於自動生成css過渡類名

name: 'fade' 將自動擴充為.fade-enter，.fade-enter-active等。預設類名為 "v"

fade-enter
fade-enter-active
fade-leave
fade-leave-active
複製程式碼

seller元件

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

解決方案：每個 li 要 display：inline-block，因為width不會自動撐開父級ul，所以需要將計算後的寬度賦值給ul的width，（每一張圖片的width+margin）*圖片數量-一個margin，因為最後一張圖片沒有margin

同時new BScroll裡面要設定scrollX: true,eventPassthrough: 'vertical', // 滾動方向橫向

cmd-markdown-logo

問題二：開啟seller頁面，無法滾動

問題分析：出現這種現象是因為better-scroll外掛是嚴格基於DOM的，資料是採用非同步傳輸的，頁面剛開啟，DOM並沒有被渲染，所以，要確保DOM渲染了，才能使用 better-scroll，

解決方案：用到mounted鉤子函式，同時必須搭配this.$nextTick()

cmd-markdown-logo
問題三：在seller頁面，重新整理後，無法滾動

問題分析：出現這種情況是因為mounted函式在整個生命週期中只會只行一次

解決方案：使用watch方法監控資料變化，並執行滾動函式 this._initScroll();this._initPicScroll();

快取資料

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


//將localStorage資訊設定到頁面中
export function loadFromLocal(id, key, def) {
  let seller = window.localStorage.__seller__;
  if (!seller) {//開始是沒有的，因為沒有點選事件，所以顯示預設資料
    return def;
  }
  seller = JSON.parse(seller)[id];//將json格式-->String格式
  if (!seller) {
    return def;
  }
  let ret = seller[key];
  return ret || def;
};
複製程式碼

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

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

<keep-alive>
    <router-view :seller="seller"></router-view>
</keep-alive>
複製程式碼

vue-router

使用<router-link>元件完成導航，<router-link> 預設會被渲染成一個 <a> 標籤，但必須使用 to屬性，指定連線
複製程式碼
// app.vue
 <!-- 導航 -->
<router-link to="/home">home</router-link>
<router-link to="/about">about</router-link>

<!-- 路由出口 元件渲染容器 -->
<router-view></router-view>
複製程式碼
// 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
}];
複製程式碼

axios

在vue1.x的時候，vue的官方推薦HTTP請求工具是vue-resource，但是在vue2.0的時候將推薦工具改成了axios

元件間通訊

vue是元件式開發，所以元件間通訊是必不可少的

  • 父傳子: props

  • 子傳父: $emit

  • 兄弟通訊

       event bus: 利用一箇中間元件來作為資訊傳遞中介

   vuex: 資訊樹
複製程式碼

父傳子: props

子元件定義 props 來接受父元件傳遞來的資料物件

// 父元件
<v-header :seller="seller"></v-header>

// 子元件 header.vue
props: {
  seller: {
    type: Object
  }
}
複製程式碼

子傳父: $emit

如果是子元件想傳遞資料給父元件，需要派發自定義事件，使用 $emit 派發

父元件使用v-on接收監控（v-on可以簡寫成@）

// 子元件 ratingSelect.vue，派發自定義事件select，將type資料傳給父級
this.$emit('select', type);
this.$emit('toggle', this.onlyContent2);


// 父元件 food.vue 在子元件的模板標籤裡，使用v-on監控toggleContent傳過來的資料
<ratingselect @select="selectRating" @toggle="toggleContent"></ratingselect>
複製程式碼

非父子元件之間通訊

1，大型專案可以用 Vue官方推薦的vuex

2，EventBus

3，子元件A $emit 派發具體事件，由父元件 @ 監聽得到資料

父元件再利用 $refs 直接訪問子元件B的方法，間接實現資料從子元件A傳遞至子元件B

元件提取管理

將相同樣式或功能的區塊單獨提出來，作為一個元件。 另外元件中用到的圖片等資源就近維護，即可以考慮在元件資料夾中新建images資料夾。

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

開啟app應用，預設顯示 goods 頁面內容

想預設顯示goods頁面內容，有兩種方法，一種是利用重定向，另一種是利用vue-router的導航式程式設計

1，重定向

  routes: [
    {
      path: '/',
      redirect: '/goods'  //重定向
    },
    {
      path: '/goods',
      name: 'goods',
      component: goods
    },{
      path: '/ratings',
      name: 'ratings',
      component: ratings
    },{
      path: '/seller',
      name: 'seller',
      component: seller
    }
  ]
複製程式碼

2，導航式程式設計

router.push('/Goods');
複製程式碼

關於ESlint

eslint 是一個js程式碼風格檢查器，配合vue-cli腳手架中的熱更新，可以很方便的定位和提示錯誤。在公司多人協作開發時可以確保程式碼風格保持一致，可以很方便的閱讀他人的程式碼

手機訪問專案

1、在config資料夾中的index.js中的host選項，將本地localhost改為0.0.0.0

cmd-markdown-logo
2、在cmd中輸入ipconfig檢視本地IP,
cmd-markdown-logo

4、埠號訪問(http://192.168.0.110:8080),將這個網址複製到網頁版“草料二維碼”中，用QQ掃碼訪問即可

最後

如果本文對你有幫助得話，給本文點個贊❤️❤️❤️

歡迎大家加入，一起學習前端，共同進步！

cmd-markdown-logo
cmd-markdown-logo

相關文章