? 項目源碼 ?
GitHub地址：https://github.com/Umbrella001/mtapp

文章目錄

• • • 一、開始需求分析
    • • 1.1 需求分析 >> 模板設計（總體分析）
      • 1.2 需求分析 >> 組件設計(城市服務組件)
      • • 1.2.1 topBar 公共組件
        • 1.2.2 searchBar搜索欄
        • 1.2.3 關于側邊導航欄制作
        • 1.2.4 關閉Eslint驗證
    • 二、學習筆記

下面使用布局為elementUI：

官方地址： https://element.eleme.cn/#/zh-CN

一、開始需求分析

1.1 需求分析 >> 模板設計（總體分析）

1.2 需求分析 >> 組件設計(城市服務組件)

1.2.1 topBar 公共組件

如上面兩個圖的請求完成該流程都是發(fā)送兩個請求才能完成從請求到拿到數(shù)據(jù)的過程，其中可以使用vuex+ssr來減少一次請求！

埋下三個問題，后續(xù)記錄！

1.2.2 searchBar搜索欄

布局使用element-ui里的layout布局即可

需求：搜索欄聚焦時出現(xiàn)【熱門搜索】，輸入內容時自動找數(shù)據(jù)并且熱門搜索變成對應搜索出來的數(shù)據(jù)面板

1.2.3 關于側邊導航欄制作

這種在淘寶，美團這種側邊欄展示的結構，看似乎很復雜，但是其實只要用簡易的DOM結構和合理 數(shù)據(jù)分析在加上簡單邏輯數(shù)據(jù)雙向控制就可以完成；

→ 首先HTML代碼（將 [全部分類] 和 [各分類里對應的各自類型] 分為兩部分）：

<!-- 全部分類部分 --> <dl class="nav" @mouseleave="mouseleave"><dt>全部分類</dt><dd v-for="(item,index) in menu" :key="index"@mouseenter="enter"><i :class="item.type"/>{{item.name}}<span class="arrow"></span></dd> </dl> <!-- 制定分類彈出部分 --> <div class="detail" v-if="kind"@mouseenter="sover"@mouseleave="sout"><template v-for="(item,index) in curdetail.child"><h4 :key="index">{{ item.title }}</h4><span v-for="v in item.child" :key="v">{{ v }}</span></template> </div>

總結：這里不難想全部分類部分和之前topBar中nav的制作都是使用建議的dl>dt+dd，而彈出層中的內容又是一個標題和列表的結構，那我們可以使用dl>dt+dd的結構，但是這里可以不用這個啦，直接使用vue中的template擴展槽

→ javascript數(shù)據(jù)結構的設計也是重中之重：

data(){return{kind:'',menu:[{type:'food',name:'美食',child:[{title:'美食',child:['代金券','甜品飲品','火鍋','海底撈']}]},{type:'takeout',name:'外賣',child:[{title:'外賣商鋪',child:['美團','餓了嗎','火鍋','海底撈']}]},{type:'hotel',name:'酒店',child:[{title:'五星級酒店',child:['維也納','富華','七日酒店','海底撈']}]}

總結：結合html中循環(huán)虛擬數(shù)據(jù)的方式，這里先單獨分析，如這種外層全部分類為一個ul-li格式樣子的，制定類型內層也是這種類似于ul-li的，數(shù)據(jù)結構就應該也是嵌套，如代碼，menu的child其實就是全部分類的數(shù)據(jù)類型，其次各自類型內部的child就是各自彈出層的內容數(shù)據(jù)，child里面的child也就是就是標題里的數(shù)據(jù)了；

→ javascript邏輯交互設計

// 根據(jù)鼠標進入的位置過濾類型，并且拿到該類型下的字段數(shù)據(jù) computed:{curdetail:function(){return this.menu.filter((item) => item.type===this.kind)[0]}}, // 根據(jù)鼠標進入和移出時完成交互 methods:{mouseleave:function(){let self = this;self._timer = setTimeout(function(){self.kind = ''},100)},enter:function(e){this.kind = e.target.querySelector('i').className;},sover:function(){clearTimeout(this._timer);},sout:function(){this.kind = ''} }

總結：重點邏輯分為兩個，第一如何知道鼠標進入的是那個類型字段 >>> 通過循環(huán)在每個制定分類中進行鼠標進入方法，接受事件源event，通過那e內的target拿到對應元素對象即可（后面通過選擇器那類不說了…），此時計算屬性實時判斷fliter內部的邏輯，拿到對應分類的子數(shù)據(jù)；第二個問題就是當我移出列表時，彈出層就瞬間消失，這里怎么辦，簡單就是在彈出層同時監(jiān)聽移入和移出的方法，通過定時器延遲解決

1.2.4 關閉Eslint驗證

① 解決Vue-cli3中的Eslint檢測 https://blog.csdn.net/kevinfan2011/article/details/86577514

② 解決nuxt中的ESlint檢測：（主要親測解決）
仿造上面的博客，去eslintrc.js注釋掉@nuxtjs即可

module.exports = {root: true,env: {browser: true,node: true},parserOptions: {parser: 'babel-eslint'},extends: [// '@nuxtjs', 關閉驗證'plugin:nuxt/recommended'],// add your custom rules hererules: {'nuxt/no-cjs-in-config': 'off'} }

③ 網上說的，在nuxt。config.js中找到這個注釋掉：

然后記得關閉編譯器，然后打開再次跑一次服務npm run dev即可

④ 其實不算是方法，應為當時報編譯錯誤是有這么一次話

所以查了一下，需要在這里加上--fix

二、學習筆記

① 注意總結一下vue/cli前后進行腳手架中搭建的工程如何去關閉eslint語法檢查。其中nuxt的關閉eslint的方法是類比vue-cli3.0一樣的（可以說nuxt本質上就是需要vue/cli3.0進行搭建），還有一些其他關閉的方法

② 項目中的這些如何使用最精簡的dom實現(xiàn)，看代碼：

<ul class="nav"><li class="list"><nuxt-link to="/my">我的美團</nuxt-link><dl><dd><nuxt-link to="/order">我的訂單</nuxt-link></dd><dd><nuxt-link to="/order">我的收藏</nuxt-link></dd><dd><nuxt-link to="/order">抵用券</nuxt-link></dd><dd><nuxt-link to="/order">賬戶設置</nuxt-link></dd></dl></li><li><nuxt-link to="/order">手機APP</nuxt-link></li><li class="list bd"><nuxt-link to="/center">商家中心</nuxt-link><dl><dd><nuxt-link to="/userCenter">登錄商家中心</nuxt-link></dd><dd><nuxt-link to="/coop">我想合作</nuxt-link></dd><dd><nuxt-link to="/wap">免費手機開店</nuxt-link></dd><dd><nuxt-link to="/kaipiao">商家申請開票</nuxt-link></dd></dl></li> </ul>

下拉的哪些dom只需要包在dl>dd里面就能實現(xiàn)，當然css也是關鍵看 topbar.css 源碼

④ 這里剛好遇到一個blur和click先后的問題，當blur和click同時出發(fā)是是先blur在click的，這樣就會導致當用戶搜索完后去點擊搜索內容時的瞬間，搜索框就消失了，只要在blur方法執(zhí)行時加個定時器就行，注意定時器的this是window的，所以要實現(xiàn)存放data中的this指向，或者使用es6的箭頭函數(shù)即可

⑤ 如何自測數(shù)據(jù)的雙向綁定，不需要驗個數(shù)據(jù)都要創(chuàng)建一個mock，沒必要，反正動態(tài)的數(shù)據(jù)你可以使用v-model或者循環(huán)去取data中模擬的數(shù)組數(shù)據(jù)即可；

? 項目源碼 ?
GitHub地址：https://github.com/Umbrella001/mtapp

總結

以上是生活随笔為你收集整理的美团项目 ---首页开发2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。