开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

6. 在界面上进行操作，调用ADD_GOODS添加商品方法

① 向购物车中添加的事件很多地方都要调用，因此借助消息订阅（pubsub-js），在组件中跨级通信。

② 安装pubsub-js

③ 在Home.vue中，监听添加到购物车消息

④ 在YourLikeItem.vue中发布消息

⑤ 其他需要添加到购物车的地方操作相同

（3）借助vant中的反馈组件Toast文字提示，提示用户添加成功

1. 在vant.js中引入

2. 在需要提示的地方使用

（4）定义购物车数据本地化的接口

（5）因为购物车有一个数量标志要试试变化，所以在初始DashBoard的时候，就应该调用INIT_SHOP_CART初始化购物车

（6）增加计算属性，通过计算shopCart每个shop的num和，利用vant的tabbar的info属性，控制购物车数量商标

（7）在购物车界面遍历shopCart并在界面上显示

（8）购物车数量加减操作

1. 首先在mutations.js中定义将商品移出购物车的方法——即商品数量为1仍然减得操作

2. 在Cart.vue中配置删除商品的方法

（9）直接将ADD_GOODS引入到Cart.vue中进行商品数量的 增加

（10）商品单选事件处理

（11）商品全选事件处理

2. 在cart中使用计算属性selectedAll标识是否全选，并通过改属性控制是否全选点击事件

（12）总价计算

（13）去结算数量

通过计算属性，计算选中的商品数量

（14）清空购物车

1. 在mutations中定义清空购物车方法

---

（1）配置填写订单路由

3. 在购物车中点击去结算的时候，转到订单界面

4. 引入NavBar实现导航栏

① 在vant.js中引入NavBar

5. 引入ContactCard 实现收货地址

① 在vant.js中引入ContactCard

（2）配置我的地址界面

1. 在order文件夹下，新建children文件夹，children文件夹下新建MyAddress.vue

2. 配置路由

3. 在我的订单中，实现点击选择收货地址跳转路由

4. 引入vant组件AddressList实现我的地址

① 在vant.js中引入AddressList

② 在MyAddress.vue中进行引入配置

③ MyAddress.vue中，对div进行绝对定位，结合Order.vue中的transition，形成动画效果

（3）配置地址编辑界面和配置新增地址界面

1. 在MyAddress.vue同级目录下，新建children文件夹，并在children文件夹内新建AddAddress.vue和EditAddress.vue

2. 在index.js中配置路由

3. 借助AddressEdit实现编辑地址和新增地址

① 引入AddressEdit

② 在EditAddress.vue中配置并实现编辑地址（添加地址类似）

③ 在我的地址中增加路由跳转

（4）配置下方Cell单元格 —— 借助vant中Cell组件

1. 在vant.js中引入Cell和CellGroup

2. 在Order.vue中进行定制

① 送达时间

③ 支付方式

④ 备注

⑤ 商品金额、配送费

（5）配置下方提交栏——SubmitBar 提交订单栏

1. 引入SubmitBar

2. 在Order.vue中使用

13. 配置我的界面

---

(1) 导航 —— vant的nav-bar

(2)头像及其他信息 —— vant的cell

(3)我的订单、查看所有订单 —— vant的cell

(4)待支付、待收货、待评价、售后/退款 —— vant的Grid, GridItem

2. 使用

(5) 我的优惠券、我的收货地址、联系客服、意见反馈、下载APP —— vant中的cell

14. 用户角色配置

---

（1）建立选择登陆界面、登录界面及配置选择登陆界面、登录界面路由

views新建文件夹login，并在子文件夹login中新建Login.vue和SelectLogin.vue，并将静态界面配置好

（2）在vuex的state中存储用户数据，并存储在本地

（3）在购物车中进行判断是否显示选择登陆方式界面

（4）在我的中进行判断是否显示选择登陆方式界面

（5）给Login.vue登录界面配置独立路由

（6）在选择登陆方式界面，给手机登录配置路由跳转，并设置tag

---

（1）短信验证码、手机验证码登录

3. 调用登录接口

4. 登录成功后，将用户信息保存到本地

（2）🎡🎡🎡🎡🎡异步操作不可以使用mutations了，需要使用actions是🎡🎡🎡🎡🎡

手机号码验证登录的时候是异步操作了，不能直接通过mutations操作vuex，必须通过actions异步转同步。

1. 在actions中定义同步方法，并调用mutations中的异步方法

2. 在Login.vue中，使用异步方法

16. 账号密码登录

---

2. 点击登录判断有没有值

3. service/api/index.js中实现pwdLogin用户名、密码登录方法

4. Login中调用方法

17. 我的界面对本地数据进行渲染

---

18. 退出登录实现

---

4. 在service/api/index中实现自动登录/退出登录实现

5. 在mutations中实现重置用户数据

7. 在dashBoard中对用户数据进行同步

19. 购物车与用户角色进行绑定

---

（1）设置登录后才能向购物车中添加数据

（2）商品添加到购物车后，首先将商品同步到服务器，再存储到本地

2. 在添加购物车的时候，将商品存放在本地之前，首先将商品同步到服务器

（3）退出登录的时候清空购物车

20. 购物车优化

---

（1）自动登录

从服务器获取用户购物车数据，进行本地化并在购物车中显示

（2）商品修改从服务器同步修改

（3）清空购物车

21. 用户地址相关

---

（1）地址相关接口

（2）选择地址获取账户地址并显示

（3）新增地址

（4）编辑地址

1. 在改变路由的时候，通过拼接url传递参数

获取的时候通过this.$route.query获取参数

（5）选择地址后放到填写订单界面

22. 我的订单界面完善

---

（1）商品选中、删除生成订单商品等接口的实现

（2）购物车中单选、全选等与服务器同步

23. 去结算完善

---

（1）根据总额度判断能否点击去支付

（2）商品清单页面配置

1. 新建OrderDetail.vue组件

2. 配置路由

3. 结合vant——Cart组件实现商品清单展示

（3）其他细节处理

24. 提交订单完善

---

（1）订单接口以及支付接口慎用

（2）提交订单

（3）生成支付二维码——借助vue-qriously

（4）验证用户是否支付成功

（5）后续处理

25. 待支付、待收货——借助vant的tab、tabs实现

---

1. 配置路由

2. 界面实现

26. rem配置

---

1. 在config文件夹下新建rem.js

// 设置基准

const BASE = 15;

(function (doc, win) {

let docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,

recall = function () {

let clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = BASE * (clientWidth / 320) + ‘px’;

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recall, false);

doc.addEventListener(‘DOMContentLoaded’, recall, false);

})(document, window);

3. 在main.js中引入

27. 样式穿透

---

在配置swiper轮播图选中样式的时候，始终不生效。

在样式上，加上/deep/或者>>>即可

28. 加载中

---

在请求数据的时候，可能组件已经加载完成，此时可能就会导致一些BUG（比如轮播图跳转到最后一页后不再继续跳转、轮播图刚开始在最后一页）。这时候可以加上一个正在加载功能，当数据全部请求完成后再加载组件。

1. 在vant.js中引入vant的Loading组件

2. 在需要显示加载中的界面（Home.vue）中进行配置

29. 图片懒加载—借助vant的image组件实现

---

1. vant.js中引入Image组件

2. 配置图片

30. 全局过滤器

---

1. 在config文件夹下新建文件夹filters，配置全局过滤器

2. 在main.js中引入全局过滤器

3. 在全局中使用即可使用过滤器

31. 页面缓存 keep-alive

---

有些页面不需要每次进入的都是都重新加载，可以keep-alive，当下拉的时候进行刷新重新加载即可。

针对首页和分类进行页面缓存

1. 在router中的index.js配置路由的时候，给需要添加缓存的界面增加一个meta属性，并在其中配置keepAlive:true

2. 这这两个路由的出口——DashBoard.vue中增加一个keep-alive标签，里面存放需要进行缓存的路由，外面放不需要进行缓存的路由。是否需要缓存根据meta中的keepAlive属性进行判断。

32. 借助better-scroll实现滚动

---

1. 安装集成

2. 滚动原理：外层嵌套div，上下预留空间，监听点击滚动等事件

3. 使用方法：

① 在需要使用的地方引入组件

② 初始化better-scroll（等到数据完全请求完成后，再初始化better-scroll）。一般初始化滚动框架的时候，是在下一个周期执行（使用）确保在下一个执行周期前初始化。

③ 在父组件上进行初始化

33. Tabbar索引缓存

---

在刷新界面的时候，不应该每次都回到首页

解决方法：进行本地缓存

34. 将本地化存储、获取、删除抽成全局方法

---

在config文件夹下的global.js中，写三个方法

35. 代理解决跨域

---

其中’/api’路由中被匹配到的路径，target是存在跨域的目标路径，changeOrigin为设置允许跨域，pathRewrite是重写路径，因为目标路径中原本就存在/api，所以将路径中第一个/api重写为空

vue中axios通过代理解决跨域问题

36. 点击验证码图片，重新请求图片并赋值

---

加时间戳确保请求不同

37. 借助pubsub.js实现消息的发布订阅的时候，一定要注意发布、订阅信息的销毁

---

一定要及时销毁，不然在调用发布订阅的时候，消息队列中所有的消息都会被执行

38. 集成底部弹出日期组件

---

结合Popup弹出层和DatetimePicker时间选择集成底部弹出日期组件

1. 引入Popup弹出层和DatetimePicker时间选择

---

1. 引入

2. 在main.js中配置

// 6. 配置二维码插件

import VueQriously from “vue-qriously/dist/vue-qriously”;

Vue.use(VueQriously)

3. 使用

qrcode：生成二维码的URL地址

40. 定位

---

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。