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 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
Angularjs之filter过滤器(推荐)
Nov 27 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
详解JavaScript数据类型和判断方法
Sep 04 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防注入代码
2010/04/07 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
Vue数组更新及过滤排序功能
2017/08/10 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
浅析vue-router原理
2018/10/19 Javascript
[03:03]DOTA2校园争霸赛 济南城市决赛欢乐发奖活动
2013/10/21 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
python实现批量注册网站用户的示例
2019/02/22 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
广州盈通面试题
2015/12/05 面试题
商务日语毕业生自荐信
2013/11/23 职场文书
称象教学反思
2014/02/03 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
公司聚餐通知
2015/04/22 职场文书
开天辟地观后感
2015/06/09 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技