【餓了麼】—— Vue2.0高仿餓了麼核心模塊&移動端Web App項目爬坑（一）

時間 2019-11-19

標籤餓了麼 vue2.0 vue 高仿餓了核心模塊移動 web app 項目欄目無線简体版

原文原文鏈接

前言：學習Vue.js高仿餓了麼課程過程當中，總結了這個Web App項目從準備到開發完畢本身以爲很重要的知識點。這一篇主要介紹：項目準備、頁面骨架開發、header組件開發。javascript

項目github地址：https://github.com/66Web/ljq_eleme，歡迎Star。css


App	header

1、項目分析&學習目標

當前最火的MVVM框架html

Vue.js —— 輕量、簡潔、高效、數據驅動、組件化

高仿上線外賣App標準來開發前端

核心模塊 —— 商家模塊

開發一個webApp的全流程vue

需求分析
腳手架工具
數據mock
架構設計
代碼編寫
自測
編譯打包

以線上生產環境的代碼質量做標準html5

代碼開發及測試環節：

UI標註
真實數據演示

代碼規範

架構設計
組件抽象
模塊拆分
代碼風格統一
JS變量命名規範
CSS代碼規範

功能技術分析java

vue-resource: 和後端作數據交互
vue-router: 作前端路由，實現單頁應用
第三方JS庫better-scroll: 列表滾動的實現
最大程度組件化：提升代碼的複用
html5的localstorage：【收藏商家】功能—存儲在瀏覽器端
細節：圖標字體的使用
移動端1像素邊框
css sticky footer佈局
flex 彈性佈局

學習目標node

掌握Vue.js在實戰中的運用
學會使用Vue.js【完整的】開發移動端App
學會組件化、模塊化的開發

學習內容react

Vue.js框架介紹
Vue-cli 腳手架 —— 搭建基本代碼框架
vue-router 官方插件 —— 管理路由
vue-resource 官方插件 —— 和後端做Ajax通訊
Webpack 開源構建工具（把源代碼通過編譯生成瀏覽器能夠識別和運行的代碼）
es6 + eslint eslint —— es6代碼風格檢查工具
工程化組件化模塊化
移動端經常使用開發技巧：

flex彈性佈局
css stickyfooter
酷炫的交互設計

2、Vue.js介紹

近年來前端開發趨勢webpack

舊瀏覽器逐漸淘汰，移動端需求增長
前端交互愈來愈多，功能愈來愈複雜
架構從傳統後臺MVC 向REST API+ 前端MV* 遷移

（前者傳統MVC：更新數據會刷新頁面後者前端MV*：向後端REST API異步請求數據，局部刷新頁面）

MV* —— MVC、MVP、MVVM

MVVM框架

View ViewModel Model

視圖通信數據

DOM 觀察者 Javascript對象

針對具備複雜交互邏輯的前端應用
提供基礎的架構抽象
經過Ajax數據持久化，保證前端用戶體驗

MVVM框架技術：vue.js、react.js、Angular.js

對比Anglar React

Vue.js更輕量，gzip後大小隻有 20K+
Vuejs更易上手，學習曲線平穩
吸取兩家之長，借鑑了angular的指令和react的組件化

vue.js 核心思想

數據驅動
組件化

組件設計原則

頁面上每一個獨立的可視/可交互區域視爲一個組件
每一個組件對應一個工程目錄，組件所須要的各類資源在這個目錄下【就近維護】
頁面不過是組件的容器，組件能夠嵌套自由組合造成完整的頁面

3、Vue-cli開啓Vue項目

Vue-cli 是Vue的腳手架工具 —— 幫助寫好Vue基礎代碼的工具

目錄結構
本地調試
代碼部署
熱加載
單元測試

安裝使用

(sudo) npm install -g vue-cli  // sudo:mac環境下有關管理權限的命令

vue init webpack my-project

項目文件

src文件夾：存放項目源碼
bulld目錄+ config目錄：webpack配置相關
node_modules文件夾：npm install 安裝的依賴代碼庫

static—>.gitkeep: 當這個目錄爲空時也能夠將它提交到git倉庫中
babelrc : babel的一些配置，es6語法的轉換
.editorconfig: 編輯器的配置
.eslintignore: 忽略語法檢查的目錄文件，通常忽略build目錄和node_modules目錄
.eslintrc.js: eslint的配置文件
gitignore: 上傳git倉庫要忽略的一些文件的配置
index.html: 入口html文件，要使用的css和js文件會在編譯過程當中自動插入
package.json：整個項目的配置文件，通常用來描述項目 ↓

→ scripts: 配置一些須要執行的命令
→ dependencies：開發環境中的依賴
→ devdependencies：編譯過程當中的依賴

項目運行

npm run dev

main.js —— 項目入口文件
App.vue —— 主頁面組件

vue語法糖: export default { } 一個對象——能夠定義一個組件

【小知識點】sublime自動格式化 —— Command+option+L 或 Control+alt+L

在父組件中使用子組件，如Hello.vue:

引用
```
import Hello from './compoments/Hello'
```

註冊

export default{ components: { Hello //es6語法 至關於 'Hello': Hello
 } }

使用標籤
```
<hello><hello>
```

開發時的Webpack配置與編譯

build->dev-server.js 或 Webpack.dev.conf.js
webpack.base.conf.js : 配置各類文件的Loader

→ 配置默認識別的路徑

resolve: {
     extensions: ['.js', '.vue', '.json'],
      alias: {
           'vue$': 'vue/dist/vue.esm.js',
           '@': resolve('src'),
       }
}

4、準備工做

圖標字體制做

在線製做網站：https://icomoon.io/app/#/select
將本身的SVG圖標導入，輸出本身的圖標字體文件
Import Icons → Generate Fonts → preferences修更名稱 → Download
使用：icon.css和fonts文件夾下全部文件

項目目錄設計

src->common目錄下：項目公用文件 js、style、fonts

【css的stylus語法】

刪掉分號和大括號, &表示父元素，冒號也能夠省略
文件後綴爲styl，style中添加lang="stylus"
須要安裝：

npm install stylus stylus-loader --save-dev

resource目錄下：項目圖片文件——能夠刪掉無用的assets目錄，但須要修改引用到的地方
components目錄下：佈局、業務功能等分模塊管理組件，如header目錄，footer目錄
static->css目錄下：reset.css 標籤默認樣式
在 index.html 中引入：

<link rel="stylesheet" type="text/css" href="static/css/reset.css">

先後端分離

Vue SPA —— 前端經過 vue-resource Ajax從後端獲取數據
前端最重要的任務：mock數據（後臺數據模擬） data.json

{ "seller":{} //商家相關字段
    "goods":{} //商品相關字段
    "rattings":{} //評論相關字段
}

webpack.dev.conf.js中配置

使用 express框架開啓一個node server,用 express.Router 編寫這些接口請求

首先：在 const portfinder = require(‘portfinder’) 後添加

const express = require('express')//開啓一個node server
const app = express() //定義一個對象，包含express返回的數據

var appData = require('../data.json') //定義一個對象引入data數據
var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings; app.use('/api', apiRoutes); //調用app對象

而後：找到 devserver{}, 在裏面添加

before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, //錯誤碼：其實是業務方根據業務本身定的
 data: seller }) //接口返回json數據，上面配置的數據seller就賦值給data請求後調用
 }), app.get('/api/goods', (req, res) => { res.json({ errno: 0, data: goods }) }), app.get('/api/ratings', (req, res) => { res.json({ errno: 0, data: ratings }) }) }

注意：每次配置完 express 以後都須要從新啓動

查看json數據

在Google地址欄中輸入：localhost:8080/api/seller
依賴Google的jsonview插件 —— 安裝使數據格式化

【Google安裝第三方插件】

打開https://github.com ；
搜索 jsonView 連接：https://github.com/search?utf8=%E2%9C%93&q=jsonview；
選擇須要的插件（我下載的是這個gildas-lormeau/JSONView-for-Chrome）；
點擊【Download Zip】，插件下載完成，解壓縮到相應目錄（D:\Download\JSONView-for-Chrome-master）；
安裝，打開chrome - 擴展程序 (地址欄輸入chrome://extensions/)；
右上角，選中開發模式；
點擊」加載正在開發的擴展程序…」
選擇插件目錄（D:\Download\JSONView-for-Chrome-master\WebContent）；
安裝完成，從新加載 (Ctrl+R)。
測試地址：http://jsonview.com/example.json

—— 轉載自【小白白打醬油博客】

5、頁面骨架開發

移動端視口

index.html 中經過meta設置視口可被縮放，初試寬高設置

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

App.vue 中把頁面拆爲三個區塊

<div id="app">
     <div class="header">header</div>
     <div class="tab">tab</div>
     <div class="content">content</div>
</div>

而後，分別抽成一個組件，引用 —— 全部組件自定義標籤名不可與html自己標籤重合 'v-header': header

移動端經典佈局 flex

<div class="tab">
      <div class="tab-item">商品</div>
       <div class="tab-item">評論</div>
       <div class="tab-item">商家</div>
</div>

.tab
   display: flex
   width: 100%
   height: 40px
   line-height: 40px
   .tab-item
         flex:1
         text-align: center

vueRouter

Vue2.0 使用 <router-link> 進行【導航】

<router-link :to="{ path: '/goods' }">商品</router-link>

【路由外鏈】<router-view> —— 單頁面切換的內容頁，替換content div區塊
```
<router-view></router-view>
```
main.js 中設置單頁面應用路由的【掛載組件】—— 默認App.vue 也能夠自定義組件如layout.vue
```
/* eslint-disable no-new */
new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
```

配置【路由map】：router->index.js

export default new Router({ mode: 'history', routes: [ { path: '/', redirect: '/goods',//默認頁面重定向
 }, { path: '/goods', component: goods }, { path: '/ratings', component: ratings }, ] })

【點擊】高亮顯示 a.router-link-active

#app .tab .tab-item>a{ display: block; font-size: 14px; color: rgb(77, 85, 93); 
} #app .tab .tab-item>a.router-link-active{ color: rgb(240, 20, 20) }

1像素border實現

錯誤作法：直接給tab加1像素邊框 X

.tab{ border-bottom: 1px solid rgba(7,17,27,0.1) }

問題是：這段代碼在PC端顯示，是1像素，可是在手機端顯示，就不是1像素。
由於手機端有一個DPR的概念：它的物理像素是設備像素的兩倍。因此iPhone6上面可能就是一個2像素的邊框

【PC開發中用手機實時預覽的小技巧】

新開一個gitbash，mac環境下輸入命令：ifconfig, windows下輸入：ipconfig
獲知本機IP地址192.168.1.1，替換掉localhost（表示本機）
將地址http://192.168.1.1:8080/goods#/輸入到草料二維碼網站中，生成二維碼，用手機掃描，便可查看
必須與PC使用的是同一局域網

正確作法：給 tab 加一個僞類：after , 讓它是一條1像素的線，而後在DBR爲2或3的手機端縮放 √
```
<div class="tab border-1px">
```

定義mixin.styl: 經過css預處理器的函數方法，實現僞類線

border-1px($color)
      position: relative
      &:before
          display: block
          position: absolute
          left:0
          top: 0
          width: 100%
          border-bottom: 1px solid $color
          content: ''
      &:after
          display: block
          position: absolute
          left:0
          bottom: 0
          width: 100%
          border-top: 1px solid $color
          content: ''

定義base.styl: 實現不一樣DBR的移動端的縮放

@media(-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)//DPR爲1.5的縮放0.7倍
.border-1px
   &:before
     -webkit-transform: scaleY(0.7)
     transform:scaleY(0.7)
   &:after
     -webkit-transform: scaleY(0.7)
     transform:scaleY(0.7)

@media(-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)//DPR爲2的縮放0.5倍
.border-1px
   &:before
     -webkit-transform: scaleY(0.5)
     transform:scaleY(0.5)
   &:after
     -webkit-transform: scaleY(0.5)
     transform:scaleY(0.5)

定義index.styl: 引用全部styl文件，最後在 main.js 中全局引用

@import"./mixin"   //import後無空格
@import"./icon"
@import"./base"

main.js: import '@/common/stylus/index.styl'   //import後有空格

6、header組件開發

vue-resource

安裝 vue-resource
```
npm install vue-resource --save
```
注意：每次install完插件等以後須要從新啓動項目
main.js 文件中：
```
import VueResource from 'vue-resource' Vue.use(VueResource)
```
以後就能夠在項目任何地方：使用 this.$http 命令
App.vue 組件中：

export module{} 外：

const ERR_OK = 0;  //定義常量，加強程序可讀性

export module{} 內：

data() { return { seller:{} //維護數據 seller
 } }

異步請求數據，返回的是Promise對象

created: function () { this.$http.get('/api/seller')    //發送get請求， 
    .then(function(res){              //.then方法 請求完成後調用
                                      //第一個函數是請求成功後方法
   }, function (err) {                //第二個函數是請求失敗後方法
 }) }

使用ES6 箭頭函數：箭頭函數先後必須有空格

created: function () { this.$http.get('/api/seller') .then((res) => { res = res.body //拿到response返回的promise對象的body(Data Object)
           if (res.errno === ERR_OK) { this.seller = res.data; //console.log(this.seller)
 } }, (err) => { }) }

外部組件

父組件 App.vue 中 <header> 組件標籤中用v-bind綁定seller屬性，傳給子組件seller數據
```
<v-header :seller="seller"></v-header>
```

子組件 header.vue 中經過 props屬性獲取父組件傳來的seller數據
```
props: {
   seller: {
       type: Object
   }
}
```
模板對應位置顯示對應seller.xxx 子數據

<img>標籤：使用seller數據圖片地址，v-bind綁定src屬性
```
 :src="seller.avatar"
```
文本內容：雙向數據綁定顯示seller數據
```
{{seller.name}}
```

若是要獲取的是 seller數據對象的子對象數組的某一項：由於異步獲取數據，子對象可能爲undefined，須要先 v-if 判斷是否存在

<div class="support" v-if="seller.supports">
      <span class="icon" :class="this.classMap[seller.supports[0].type]"></span>
      <span class="text">{{seller.supports[0].description}}</span>
</div>

定義 classMap數組，經過獲取seller數據中的索引值，應用對應索引的class

created (){ this.classMap = ['decrease','descount','guarantee','invoice','special'] }

<span class="icon" :class="this.classMap[seller.supports[0].type]"></span>

mixin.styl 文件中僞函數：實現圖片在不一樣DPR下引用不一樣的圖片路徑

bg-image($url)
     background-image: url($url+"@2x.png")
     @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
           background-image: url($url+"@3x.png")

公告內容 —— 文字【省略號效果】

white-space: nowrap
overflow: hidden
text-overflow: ellipsis

背景圖片【模糊濾鏡效果】

.background position: absolute top: 0 left: 0 width: 100% height: 100% z-index: -1 filter: blur(10px)

詳情彈層頁

實現彈出層

v-show指令 —— 控制彈出層的顯示/隱藏

<div class="detail" v-show="detailShow"></div>

data () { return { detailShow: false  //經過改變數據detailShow 的true/false，控制元素的顯示/隱藏
 } }

@click —— 觸發點擊事件，執行顯示函數

<div class="bulletin-wrapper" @click="showDetail>

methods: { showDetail () { this.detailShow = true; } }

【Css Sticky footers佈局】

Sticky footers設計：

若是頁面內容不夠長的時候，頁面塊粘貼在視窗底部；
若是內容足夠長時，頁面塊會被內容向下推送（區別於fixed）

相對複雜但兼容性最好的一個方案：

套路佈局

<div class="detail" v-show="detailShow">
        <div class="detail-wrapper clearfix"> //外層wrapper,min-height: 100%
                <div class="detail-main"></div> //內容層 padding-bottom: 64px
        </div>
        <div class="detail-close">
               <i class="icon-close"></i> //要適應內容顯示的關閉按鈕 margin-top: -64px
        </div>
</div>

關鍵：padding-bottom撐開一個高度，爲關閉按鈕留下位置

.detail-main
     margin-top: 64px
     padding-bottom: 64px

樣式：

.detail-wrapper
    min-height: 100%
    .detail-main
         margin-top: 64px
         padding-bottom: 64px
    .detail-close 
         position: relative
         width: 32px
         height: 32px
         margin: -64px auto 0 auto 
         clear: both
         font-size: 14px

Star組件抽象

目標：爲了加強擴展性，使足夠靈活
思路：

v-for —— 根據分數遍歷itemClasses 顯示星星樣式

<div class="star" :class="starType">
         <span v-for="itemClass in itemClasses" :key="itemClass.value" :class="itemClass" class="star-item">
         </span>
</div>

props —— 從父組件接收兩個參數：size尺寸，score分數

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

:class —— 綁定動態class, 在不一樣的調用地方，能夠設置不一樣的樣式

 @import "../../common/stylus/mixin"

    .star
       .star-item
           display: inline-block
           background-repeat: no-repeat
       &.star-48
           .star-item
               width: 20px
               height: 20px
               margin-right: 22px
               background-size: 20px 20px
               &:last-child
                   margin-right: 0
               &.on
                   bg-image('star48_on')
               &.half
                   bg-image('star48_half')
               &.off
                   bg-image('star48_off')    
       &.star-36
           .star-item
               width: 15px
               height: 15px
               margin-right: 16px
               background-size: 15px 15px
               &:last-child
                   margin-right: 0
               &.on
                   bg-image('star36_on')
               &.half
                   bg-image('star36_half')
               &.off
                   bg-image('star36_off') 
       &.star-24 
           .star-item
               width: 10px
               height: 10px
               margin-right: 3px
               background-size: 10px 10px
               &:last-child
                   margin-right: 0
               &.on
                   bg-image('star24_on')
               &.half
                   bg-image('star24_half')
               &.off
                   bg-image('star24_off')

View Code

computed —— 根據size 計算出動態的class；根據score push對應個數的全亮星星class；判斷若是有半分或不足5分的，push進半星class和灰色星class；根據數組中對應的class顯示對應的星星圖片

const LENGTH = 5; const CLS_ON = 'on'; const CLS_HALF = 'half'; const CLS_OFF = 'off'; computed: { starType() { return 'star-' + this.size;  //根據size 計算出動態的class
 }, itemClasses() { let result = []; let score = Math.floor(this.score*2)/2;
            let hasDecimal = score % 1 !== 0; let integar = Math.floor(score); for(let i=0; i<integar; i++){ result.push(CLS_ON) //根據score 在itemClasses中push進對應個數的全亮星星class
 } if(hasDecimal) { result.push(CLS_HALF);//判斷若是有半分或不足5分的，push進半星class和灰色星class
 } while (result.length < LENGTH) { result.push(CLS_OFF) } return result; //根據itemClasses中對應的class顯示對應的星星圖片
 } }

樣式：除了通用樣式，還有根據不一樣size計算出的所有class的樣式

小標題自適應線

避免：寫死百分比，這樣寬屏幕會間隔很大，窄屏幕間隔會幾乎看不到
flex佈局：

<div class="title">
       <div class="line"></div>
       <div class="text">優惠信息</div>
       <div class="line"></div>
</div>

.title
    display: flex
    width: 80%
    margin: 30px auto 24px auto
    .line
         flex: 1
         position: relative
         top: -6px
         border-bottom: 1px solid rgba(255, 255, 255, 0.2)
    .text
         padding: 0 12px
         font-size: 14px

【Postcss工具】

vue-loader 編譯vue文件時，會使用Postcss工具，自動爲有兼容性問題的css屬性加上瀏覽器前綴
Postcss是根據can i use官網去寫代碼，基本不會出現兼容性問題
Can I Use 是一個檢測瀏覽器對JS、HTML五、CSS、SVG或者其餘Web前端相關特性支持程度的列表
能夠檢測的瀏覽器包括桌面和移動版的主流瀏覽器：IE, Firefox, Chrome, Safari和 Opera等

過渡動畫組件 transition

<transition name="fade">
        <div class="detail">
</transition>

.detail
    opacity: 1
    background: rgba(7, 17, 27, 0.8) 
    &.fade-enter-active, &.fade-leave-active
           transition: all 0.5s ease
    &.fade-enter, &.fade-leave-active
           opacity: 0
           background: rgba(7, 17, 27, 0)

iPhone手機背景模糊效果

backdrop-filter: blur(10px)  // PC端和其它手機看不出效果

注：項目來自慕課網

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。