? 項目源碼 ?
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 公共組件

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

埋下三個問題，后續記錄！

1.2.2 searchBar搜索欄

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

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

1.2.3 關于側邊導航欄制作

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

→ 首先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數據結構的設計也是重中之重：

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

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

→ javascript邏輯交互設計

// 根據鼠標進入的位置過濾類型，并且拿到該類型下的字段數據 computed:{curdetail:function(){return this.menu.filter((item) => item.type===this.kind)[0]}}, // 根據鼠標進入和移出時完成交互 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 = ''} }

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

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實現，看代碼：

<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里面就能實現，當然css也是關鍵看 topbar.css 源碼

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

⑤ 如何自測數據的雙向綁定，不需要驗個數據都要創建一個mock，沒必要，反正動態的數據你可以使用v-model或者循環去取data中模擬的數組數據即可；

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

總結

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

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