vue+koa2+ssr仿写美团网踩坑记录（持续更新）

一、环境配置：
1、yarn需要配置淘宝镜像更换数据源，否则无法下载：

yarn config set registry https://registry.npm.taobao.org

2、nuxt.js安装时建议使用yarn进行安装，npx极易出错（默认vue-cli已安装，如果没有安装需自行安装）

yarn create nuxt-app <项目名>或者npx create-nuxt-app <项目名>

3、安装完毕后建议重新编译一次，避免出错

cnpm install -update-binary/yarn -update-binary

4、安装babel，用于将ES6+语法转换为当前版本浏览器等环境兼容的javascript代码

cnpm install babel-preset-es2015

5、安装sass：

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

6、安装axios：

cnpm install @nuxtjs/axios --save-dev

二、 首页：
1、页头页脚设置组件，方便复用。
2、搜索框根据是否聚焦是否有内容显示不同下拉推荐（blur，focus，this.serach）。
3、效果图如下所示：
（1）页头+搜索框+推荐
（2）nav：

（3）左侧菜单导航：
双层嵌套遍历，通过mouseenter和mouseleave判断清空内容或是不清空右侧子菜单内容。

（4）页脚：

（5）主页整体效果：

三、登录注册：
1、注册：
注册页面的header和其他页面的不一样且没有页脚，这需要更换layout:“新样式页面”。

需要确定验证点，确认校验规则，必选项，触发条件，校验函数等，任何一项校验不通过，表单无法提交。