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

网络编程 2024/12/31 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

从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 "htmlcode">

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等等。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

VUE搭建手机商城

标签：

VUE搭建手机商城

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“VUE搭建手机商城心得和遇到的坑”

暂无VUE搭建手机商城心得和遇到的坑的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月31日

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

VUE搭建手机商城

用Fundebug插件记录网络请求异常的方法

利用vue重构有赞商城的思路以及总结整理

评论“VUE搭建手机商城心得和遇到的坑”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接