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 相关文章推荐
多种方法判断Javascript对象是否存在
Sep 22 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
php自定义分页类完整实例
2015/12/25 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
Python算术运算符实例详解
2017/05/31 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python中的逆序遍历实例
2019/12/25 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
关于python中remove的一些坑小结
2021/01/04 Python
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
了解AppleTalk协议吗
2014/04/01 面试题
最受欢迎的自我评价
2013/12/22 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
汽车机修工岗位职责
2014/03/06 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
教你如何用python开发一款数字推盘小游戏
2021/04/14 Python
python flask开发的简单基金查询工具
2021/06/02 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers
MySQL分布式恢复进阶
2022/07/23 MySQL