从github上看了一下第一次提交时间是2018年10月22号。到现在将近4个月时间，总算是一点一滴的自己一个人完成了这个使用vue做的商城项目。以前看到别人做的这种项目就很羡慕，想着自己也做一个，曾经的憧憬如今总算实现了。一路做过来踩了不少坑，这篇文章就是分享我遇到的这些坑，希望前人爬坑，后人避免。
项目访问地址xuyuechao.top
vue单页模式需要注意的坑
1.class样式冲突问题
由于是单页面应用。你在每个组件里面写入的样式最终都会作用到全局里面去，导致样式冲突问题。而每个组件都必须提供一个包裹性质的元素，建议这个元素设置一个单独的class用于包裹里面的其他class从而避免样式冲突
2.静态资源俩种处理方式需要理解到位
这个在Vue官方文档上有详细的说明，但是我一开始没有理解到位。走了一些个弯路。这里对Vue官方的内容提炼一个重点:
1.public中的内容必须用绝对路径引入也就是以'https://www.jb51.net/'开头。否则将会被认为是一个模块引用会被webpack处理。注意:项目如果不是放在根域名下需要如下处理:
<template> <img src=https://www.jb51.net/`${publicPath}MrXu.jpg`> </template> <script> export default { data() { return { publicPath: process.env.BASE_URL } } } </script>
2.采用相对路径引入，方式多样，如:
1.<img src='https://www.jb51.net/@/MrXu.jpg'> 2.<img src='https://www.jb51.net/~MrXu.jpg'> 3.<img src='https://www.jb51.net/article/MrXu.jpg'>
第一种方式用到的@代表的是别名的值
第二种方式用到的~其后的任何内容都会作为模块请求被解析。官方说可以引用Node模块中的资源，这个我还没用过。等以后用过了有更深的见解会再来补充
第三种方式就是标准的相对路径引入方式
注意千万不要用下面这种相对路径引入方式，因为他不会被webpack处理。而是直接采用的相对路径寻找文件。而当下的目录是会被处理的。这种方式一用一个错
<img src='https://www.jb51.net/MrXu.jpg'>
我的建议是尽可能采用相对路径引入。减少@的使用。因为我经过测试发现css和js文件是不支持@的使用的。
项目中对vue属性的巧妙运用
1.使用computed监听购物车内容的修改
购物车算是整个项目中比较复杂的地方之一了,删除，添加，选中，取消选中。这些个操作都会对总金额的计算产生影响，所以我用computed监听这些变化完成了总金额的计算以及全选按钮的变化
computed: { totalPrice() { var total = 0; this.shops.map(value => { if (value.check) total += value.num * value.price; }); return total; }, isAllCheck() { var newLength = this.shops.filter(value => { return value.check; }).length; return newLength === this.shops.length ? true : false; } }
2.使用filter完成了对订单状态的显示
项目中订单的状态多大7种，刚开始在html里面使用了三目运算符做的判断显示，显示效果极差，而且维护困难。但是采用filter不仅漂亮的多,后期的维护以及扩展都一幕了然
filters: { statusToText(value) { let reValue; switch (value) { case 1: reValue = "代付款"; break; case 2: reValue = "代发货"; break; case 3: reValue = "待收货"; break; case 4: reValue = "已完成"; break; case 5: reValue = "已取消"; break; case 6: reValue = "售后处理"; break; } return reValue; } }
感言
做完这个项目收获真的蛮颇多的，像route的母子路由，路由懒加载，别名设置，路由拦截，vuex中actions，mutations，state的区别，vue的生命周期，父子组件传值,watch,computed等等。