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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
javascript 对象比较实现代码
Apr 27 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Vue关于组件化开发知识点详解
May 13 Javascript
vue组件入门知识全梳理
Sep 21 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
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
python中强大的format函数实例详解
2018/12/05 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
W Concept美国:精选全球独立设计师
2017/02/22 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
求职信需要的五点内容
2014/02/01 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
新闻学专业求职信
2014/07/28 职场文书
家庭困难证明
2014/10/12 职场文书
精神病医院见习报告
2014/11/03 职场文书
2014年妇女工作总结
2014/12/06 职场文书
大学生自荐材料范文
2014/12/30 职场文书
化验室岗位职责
2015/02/14 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL