美团项目 ---首页开发2

❤ 项目源码 ❤
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