VUE搭建手机商城心得

从github上看了一下第一次提交时间是2018年10月22号。到如今将近4个月时间，总算是一点一滴的本身一我的完成了这个使用vue作的商城项目。之前看到别人作的这种项目就很羡慕，想着本身也作一个，曾经的憧憬现在总算实现了。一路作过来踩了很多坑，这篇文章就是分享我遇到的这些坑，但愿前人爬坑，后人避免。

项目访问地址xuyuechao.top

vue单页模式须要注意的坑

1.class样式冲突问题

方法一： 因为是单页面应用。你在每一个组件里面写入的样式最终都会做用到全局里面去，致使样式冲突问题。而每一个组件都必须提供一个包裹性质的元素，建议这个元素设置一个单独的class用于包裹里面的其余class从而避免样式冲突

方法二： 在style标签里加入scoped属性，在修改公共组件的样式会变得异常麻烦。超详细的解释能够看这篇文章vue中慎用style的scoped属性

<style scoped></style>

2.静态资源俩种处理方式须要理解到位

这个在Vue官方文档上有详细的说明，可是我一开始没有理解到位。走了一些个弯路。这里对Vue官方的内容提炼一个重点:

1.public中的内容必须用绝对路径引入也就是以'/'开头。不然将会被认为是一个模块引用会被webpack处理。注意:项目若是不是放在根域名下须要以下处理:

<template>
    <img src=`${publicPath}MrXu.jpg`>
</template>
<script>
export default {
    data() {
        return {
            publicPath: process.env.BASE_URL
        }
    }   
}
</script>

2.采用相对路径引入，方式多样，如:

1.<img src='@/MrXu.jpg'>
    2.<img src='~MrXu.jpg'>
    3.<img src='./MrXu.jpg'>

第一种方式用到的@表明的是别名的值

第二种方式用到的~其后的任何内容都会做为模块请求被解析。官方说能够引用Node模块中的资源，这个我还没用过。等之后用过了有更深的看法会再来补充

第三种方式就是标准的相对路径引入方式

注意千万不要用下面这种相对路径引入方式，由于他不会被webpack处理。而是直接采用的相对路径寻找文件。而当下的目录是会被处理的。这种方式一用一个错

<img src='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;
        ... ...
      }
      return reValue;
    }
  }

针对这个功能掘金中有小伙伴给我留言了另一个实现方式，我以为也不错。在这里分享一下：

filters: {
    statusToText(value) {
      let reValue=new Map()
      reValue.set(1,'代付款')
      reValue.set(2,'代发货')
      ... ...
      return reValue.get(value);
    }
 }

在这里感谢掘金 小小包子 的分享！

项目地址

https://github.com/mrxu0/vue-ylbs-shop

欢迎你们来提issue来star

QQ交流群

954917384

目前人数相对较少，能够享受一波红利期。如今能够免费入群，你们能够在这里面交流项目难题，做为群主的我定然知无不言言无不尽！

感言

作完这个项目收获真的蛮颇多的，像route的母子路由，路由懒加载，别名设置，路由拦截，vuex中actions，mutations，state的区别，vue的生命周期，父子组件传值,watch,computed等等。不过内容太多，放到一篇文章里会显得特长，且不易消化。要想获取更多精彩的内容欢迎关注个人公众号吵吵日记