vue单页模式需要注意的坑

vue单页模式需要注意的坑

1.class样式冲突问题

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

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

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

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

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

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

   <img src='MrXu.jpg'>

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;    }  }

编辑:--ns868