VUE搭建手机商城心得

栏目: 编程语言 · 发布时间: 5年前

内容简介:由于是单页面应用。你在每个组件里面写入的样式最终都会作用到全局里面去,导致样式冲突问题。而每个组件都必须提供一个包裹性质的元素,建议这个元素设置一个单独的class用于包裹里面的其他class从而避免样式冲突这个在Vue官方文档上有详细的说明,但是我一开始没有理解到位。走了一些个弯路。这里对Vue官方的内容提炼一个重点:1.public中的内容必须用

由于是单页面应用。你在每个组件里面写入的样式最终都会作用到全局里面去,导致样式冲突问题。而每个组件都必须提供一个包裹性质的元素,建议这个元素设置一个单独的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>
复制代码

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;
        case 3:
          reValue = "待收货";
          break;
        case 4:
          reValue = "已完成";
          break;
        case 5:
          reValue = "已取消";
          break;
        case 6:
          reValue = "售后处理";
          break;
      }
      return reValue;
    }
  }
复制代码

以上所述就是小编给大家介绍的《VUE搭建手机商城心得》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

超越门户

超越门户

吴晨光 / 中国人民大学出版社 / 2015-4-17 / 39.80

在这个PC端影响力下降、人们对手机的依赖与日俱增的时代,这种探索的意义非同寻常,可以说是试图树立新媒体时代的行业标准。 ——陈彤(小米内容投资与运营副总裁、新浪网前总编辑、资深网络媒体人) 我将对此书的阅读,视作对往日岁月的怀念,它提醒我,自己曾 投身于多么富有蓬勃朝气和探索精神的事业。而对这种事业的原则、逻辑和方法的继承和继续学习,对于互联网时代的企业形象塑造 ,同样有融会变通的参考......一起来看看 《超越门户》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具