VUE搭建手机商城心得和遇到的坑


Posted in Javascript onFebruary 21, 2019

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

项目访问地址xuyuechao.top

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>

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

感言

做完这个项目收获真的蛮颇多的,像route的母子路由,路由懒加载,别名设置,路由拦截,vuex中actions,mutations,state的区别,vue的生命周期,父子组件传值,watch,computed等等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
vue配置接口域名方法总结
May 12 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 #Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 #Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 #Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 #Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 #Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 #Javascript
Vue实现table上下移动功能示例
Feb 21 #Javascript
You might like
linux php mysql数据库备份实现代码
2009/03/10 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
Angular ElementRef简介及其使用
2018/10/01 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
Python中使用Inotify监控文件实例
2015/02/14 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
写自荐信的七个技巧
2013/10/15 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
领导干部考察材料
2014/02/08 职场文书
学生保证书
2015/01/16 职场文书