第一天 7月23
项目创建：参考笔记：juejin.cn/post/698666…
一 字体图标+淘宝无限适配 + 公共样式文件 ：
1 在assets静态文件中：
1.1 创建css文件夹 创建公共文件，写公共样式， 复制字体图标css样式文件进来，并修改好样式引用
1.2 创建js文件夹 复制 淘宝无限适配flexible.js文件
2 在src目录下 创建fonts文件夹 复制需要的字体图标文件进来
3 在main.js文件中 import 公共css 字体图标css 淘宝无限适配方案
二 组件模块：views + router
1. 在views中写上每个要跳转的vue组件页面
1.1 每个页面都引入公共的 tabbar组件，import Tabber from "../components/common/Tabbar.vue";
1.2 在components中注册一下：Tabber
1.3 在template的div使用 <Tabber></Tabber>
2. 在 router文件中配置每个组件访问的路由跳转路径
三 Tabbar :
0 在components文件夹中 创建一个公共的common文件夹，写一个Tabbar.vue文件
1 数据是自己写死的 放在data里（包括选中和不选中的字体图标 和 路径），通过v-for循环遍历渲染到页面
2 点击选项功能：在li中定义一个点击事件，把路径传递过去，在methods中，通过路由跳转方法切换页面 this.$router.replace(传递过来的路径)
3 如果在当前选项重复点击页面跳转就会报错：通过判断跳转路径和当前路径是否一致，如果一致就 阻止跳转 if(this.$route.path == path ) return false
4 动态绑定多个class用数组 :class="['iconfont', $route.path==item.path ? item.active : item.weixuanzhong]"
5 首页路由配置一个 重定向 path: "/", redirect: '/home'
四：项目文件配置(我看vue创建的项目不用配置这个也可以使用的)：参考笔记：https://juejin.cn/post/6987963317029437448/
1. 创建了一个vue.config.js文件，配置文件访问路径以 @ 开头进行配置
第2天 7月24
五：home页面相关的：
1. 在components文件夹中新建 home文件夹， 再文件夹里创建一个 Header.vue组件
2. 在views文件中的home.vue文件引入 Header.vue组件
六: views文件中 home组件用ly-tab插件
介绍：https://blog.csdn.net/weixin_42273637/article/details/88179159
github：https://github.com/lovepivix/ly-tab
七：vue-awesome-swiper：网址：https://www.npmjs.com/package/vue-awesome-swiper
注意事项：
1 版本一定要用对应的写法，不然报错很难查找 还有css引入用这个，官网文档的是错误的：import "swiper/swiper-bundle.css";
2 在components文件夹中新建 home文件夹中创建 Swiper组件，参考这个版本中Async data example 写法 https://github.com/surmon-china/vue-awesome-swiper/tree/v3.1.3
3 在views文件中的Home.vue文件引入 Swiper.vue组件
4 public文件夹的图片可以这样获取：路径设置时无需添加 public/，默认加载 public 文件夹下的图片。./images/home-swiper3.jpeg
八：home页面的icons模块
1 创建一个icons.vue组件，数据写在data里
2 在views组件中引入icons组件并使用
九：slot的使用
Card.vue使用了slot插槽
十： 调整头部 section 和 底部的位置
十一：让中间的section部分位置正常之后 使用滚动插件better-scroll
1. 安装npm install better-scroll -S
2. views 中的home组件section中滚动盒子的高度一定要比 父盒子的高度要高
第3天 7月24
十二：启动后端服务 serve
1. 进入到后端服务目录 执行：npm run start
2. 访问 http://localhost:3000/
3. 设置代理，在vue.config.js文件中解决跨域问题
十三：前端请求用axios ，先安装axios
1.进入前端项目 npm install axios
2.views进入到 home里面 引入 axios 进行接口请求 在created中请求接口,方法在methods中定义
3. 进入到后端serve的routes下的index.js文件 设置请求路径，路径跟前端created的axios请求的url地址一致
3.1 构造topBar 和其他组件的数据，数据结构的定义要注意
3.2 请求到的数据用这个来提高性能 Object.freeze(res.data.data.topBar);
3.3 根据类型 v-if 判断组件是否渲染数据
3.4 利用父传子的方法 把父组件接收到的数据 传给 子组件
3.4 点击topbar选项，根据url判断点击的是哪个tab 拼接在url中，切换的逻辑比较重要
3.5 判断数据类型用到了：contructor
4. 重启后端服务，注意：只要修改了后端代码 都要重启一次
十四：nextTick 当dom加载完毕 再执行滑动操作
1. views 的 home文件中 用到了。
十五：搜索页面：
0. views中 创建search组件，配置search的路径访问路由，然后再component中创建引入其他各个小组件到views的search组件中
1. 给搜索框添加点击事件，通过路由跳转到搜索页面
2. 搜索页面头部采用公共的header中的具名插槽完成
3. 反回首页 也是通过点击事件 路由跳转方法
十六：search中的路由：
1. views 中的 Search.vue 引入了 components的 search文件中的Section.vue组件
1.1 Section.vue组件提供的只是一个路由出口 <router-view></router-view>，所以接着第二步
2. 在 router文件 search路由中 配置一个 默认子路由children，默认访问到对应的页面中去（这个页面是自己新创建的），否者第一步配完之后页面就是空的
{
path: "/search",
name: "Search",
children: [{
path: "/",
name: "index",
component: () => import("../views/search/Search-index.vue"),
}],
component: () => import("../views/Search.vue"),
},
3. 最后再创建一个Search-list组件，这个组件展示搜索的内容，
3.1 在router的index.js文件中，配置跳转的子路由，list部分为这个组件的子路由
{
path: "/search",
name: "Search",
children: [{
path: "/",
name: "index",
component: () => import("../views/search/Search-index.vue"),
},
{
path: "list",
name: "list",
component: () => import("../views/search/Search-list.vue"),
}],
component: () => import("../views/Search.vue"),
},
5. vue3 路由跳转之后再次点击有个报错，解决办法 第4点： https://juejin.cn/post/6986859605909307422
6. 疑问：为什么Search-list.vue 组件默认有个头部？
十七：input 搜索功能开发 components 中search 中的 header组件
1. 回车和点击搜索都要执行搜索功能
vue 回车的方法这样写（第一次用） @keyup.enter 回车
<form onsubmit="return false" @keyup.enter="goSearchs">
<input type="search" placeholder="搜索你想要的商品..." v-model="searchValue" />
</form>
2. 判断输入框是否有内容 如果没有就不做搜索
3. 本地存储 indexOf过滤数据有缺陷：不是完全匹配的字符串也能选出来 用es6 的 new Set方法代替比较靠谱 但是要注意去重后用 Array.from() 转换为真正的数组才可以
十八 在views Search-list组件页面中
1. 读取本地存储 通过for循环渲染到页面上
2. 判断 如果没有本地存储数据 就不做展示 如果有才展示
第4天 7月25
十九：删除历史记录 在views Search-list组件页面中
1. 弹层提示用 mint-ui
2. 安装# Vue 2.0 npm install mint-ui -S
3. 在main.js引入 // 引入全部组件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
4. 使用MessageBox 弹层提示 判断点击是删除还是取消 ，删除本地存储和 页面渲染的数据
localStorage.removeItem("searchHistory");
this.searchHistory = [];
二十：问题修正：（如果有问题用这个方法解决） 不过我做的没有这个问题,因为我头部搜索部分用的是slot插槽方式
1.components 中search 中的 header组件 搜索页面跳转 将搜索的内容通过query传参
// 判断：如果输入框的值没有改变，就不做页面跳转
if (this.searchValue == this.$route.query.key) return;
// 跳转到对应的页面
// this.$router.push({ path: "/search/list" });
this.$router.push({ name: "list", query: { key: this.searchValue } });
7月26日
二十一：axios 二次封装
1. 把数据请求前的状态都封装到了这里 笔记 https://juejin.cn/post/6989073617975935013/
二十二：根据搜索关键词查询
1.mysql 连接 https://juejin.cn/post/6989150498922168334
2.用到了 watch 根据搜索关键词查询 笔记：https://juejin.cn/post/6989167033669648397/
二十三：搜索页面 tab功能的开发 笔记 https://juejin.cn/post/6989210366626496549/
1. 判断选中的是哪一个？哪一个加上高亮
2. 前端告诉后端 是按哪个tab，通过computed计算属性来操作 然后升序还是降序
面试提炼点：
1. 路由跳转方式有哪些？传参和不传参 笔记在 第三点
2. router 和 route 的区别是什么 笔记在 第三点
3. 组件内通用样式穿透： ::v-deep
4. 第三方插件引入步骤：
4.1 npm 安装
4.2 import引入css 和 按需引入相应模块
4.3 在components 中注册
5 slot插槽介绍 在笔记第九点用到
6 项目中性能优化用到了 Object.freeze() 在笔记十三
7 父传子在笔记 十三的3.3 (如果参数传递错误 要捕获异常 待补充) 并且判断组件渲染数据进行切换 这个思想很重要
8 判断数据类型的方法有哪些？笔记13中 3.5用到了 constructor
9 nextTick 当dom加载完毕 再执行滑动操作 用于项目的滚动加载
10 做项目的时候遇到一个路由跳转问题 笔记16 的第5点 数组去重的方法，
11 Array.of 和 Array.from 区别
Array.of(v1, v2, v3) : 将一系列值转换成数组
Array.from() : 将伪数组对象或可遍历对象转换为真数组
12 本地存储 indexOf过滤数据有缺陷：不是完全匹配的字符串也能选出来 用es6 的 new Set方法代替比较靠谱 但是要注意去重后用 Array.from() 转换为真正的数组才可以
13 请求获取到数据之前 加一个状态，相当于中间状态。 可以在axios请求二次封装 就是在请求之前加个loading状态，请求结束后关闭loding
14 watch 和其他各种区别 这里使用了watch根据搜索关键词查询 笔记：https://juejin.cn/post/6989167033669648397/
15 computed 计算属性：https://juejin.cn/post/6989210366626496549/
项目疑问：
1 笔记十六 6. 疑问：为什么Search-list.vue 组件默认有个头部？
2 本地存储 indexOf过滤数据有缺陷 不是完全匹配的字符串也能选出来
3 当查询历史数据过多的时候 在页面展示的内容 如何限制？
