VUE搭建手机商城心得
从github上看了一下第一次提交时间是2018年10月22号。到现在将近4个月时间,总算是一点一滴的自己一个人完成了这个使用vue做的商城项目。以前看到别人做的这种项目就很羡慕,想着自己也做一个,曾经的憧憬如今总算实现了。一路做过来踩了不少坑,这篇文章就是分享我遇到的这些坑,希望前人爬坑,后人避免。
项目访问地址xuyuechao.top
vue单页模式需要注意的坑
1.class样式冲突问题
方法一: 由于是单页面应用。你在每个组件里面写入的样式最终都会作用到全局里面去,导致样式冲突问题。而每个组件都必须提供一个包裹性质的元素,建议这个元素设置一个单独的class用于包裹里面的其他class从而避免样式冲突
方法二: 在style标签里加入scoped属性,在修改公共组件的样式会变得异常麻烦。超详细的解释可以看这篇文章vue中慎用style的scoped属性
<style scoped></style>
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;... ...}return reValue;}}
针对这个功能掘金中有小伙伴给我留言了另外一个实现方式,我觉得也不错。在这里分享一下:
filters: {statusToText(value) {let reValue=new Map()reValue.set(1,'代付款')reValue.set(2,'代发货')... ...return reValue.get(value);}}
在这里感谢掘金 小小包子 的分享!
项目地址
https://github.com/mrxu0/vue-ylbs-shop
欢迎大家来提issue来star
QQ交流群
954917384
目前人数相对较少,可以享受一波红利期。现在可以免费入群,大家可以在这里面交流项目难题,作为群主的我定然知无不言言无不尽!
感言
做完这个项目收获真的蛮颇多的,像route的母子路由,路由懒加载,别名设置,路由拦截,vuex中actions,mutations,state的区别,vue的生命周期,父子组件传值,watch,computed等等。不过内容太多,放到一篇文章里会显得特长,且不易消化。要想获取更多精彩的内容欢迎关注我的公众号吵吵日记
VUE搭建手机商城心得相关推荐
- 轻松搭建基于 SpringBoot Vue 的 Web 商城应用
背景介绍 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数 ...
- Serverless 实战 —— 轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
Serverless 实战 -- 轻松搭建基于 SpringBoot + Vue 的 Web 商城应用 背景介绍 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute ...
- 基于javaweb的前后端分离网上手机商城平台系统设计和实现(java+vue+redis+springboot+mysql+ssm)
基于javaweb的前后端分离网上手机商城平台系统设计和实现(java+vue+redis+springboot+mysql+ssm) 运行环境 Java≥8.MySQL≥5.7.Node.js≥10 ...
- [附源码]java毕业设计网上手机商城
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- Springboot+mysql+基于VUE框架的商城综合项目设计与实现 毕业设计-附源码111612
基于VUE框架的商城综合项目设计与实现 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
- (附源码)Springboot+mysql+基于VUE框架的商城综合项目设计与实现 毕业设计111612
基于VUE框架的商城综合项目设计与实现 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项目 ...
- springboot基于VUE框架的商城综合项目设计与实现毕业设计源码111612
基于VUE框架的商城综合项目设计与实现 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
- springboot基于VUE框架的商城综合项目设计与实现毕业设计源码
基于VUE框架的商城综合项目设计与实现 摘 要 随着科学技术的飞速发展,社会的方方面面.各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,商城综合项目当然也不能排除在外.商城综合项 ...
- ectouch手机商城首页调用指定分类下的商品
ECTouch是国内市面上唯一开源的ECSHOP移动商城系统,为广大电商以最低的成本快速搭建移动商城.最近最一商城实例,手机版首页需要调用指定分类下的商品,ECtouch商城默认好像没有此调用方式,只 ...
最新文章
- iOS一个灵活可扩展的开源Log库
- 语句作用_3分钟短文:Laravel模型作用域,为你“节省”更多代码
- 使用JMSTester对JMS层进行基准测试
- Elasticsearch Reference [6.7] » Modules » Network Settings
- 实验5.3 编程实现两字符串的连接(使用字符数组)
- AngularJS中的DOM value与view value
- 滴滴业务中台构建实践,首次曝光
- 论为什么需要软件工程
- C# 回调函数的实现和应用场景
- 惠普服务器win10安装系统教程,惠普电脑如何重装系统教程 win10专业版系统安装教程...
- 反脆弱:为什么有些人更能适应工作的剧烈变化?
- 产品web3d效果动态展示更生动形象
- 推荐9款最佳的编程字体
- ikea营销_用于企业的AI开发人员工具存在的问题(以及IKEA与之相关的问题)
- android 开放聊天室
- git提交用户名与当前用户名不止一致(或者邮箱)
- 我在参与【阿里云盘】11月分享赢10.5 TB容量及三年延期卡活动
- 3本相见恨晚的数学好书,终结你的数学恐惧
- SSM+老年人活动信息管理系统 毕业设计-附源码121730
- 信息熵(不确定性)的理解与解释
热门文章
- Spring-注入参数详解-[通过util命名空间简化集合类型的配置]
- docker-compose配置redis服务
- pytest第二版 进阶学习
- 2021-01-05 Halcon初学者知识【7】 最简单的测距问题-点与点测距
- 如何让服务器运行js,服务器端JavaScript运行环境Node.js的依赖性管理
- 【vue.js开发】如何在vue里面优雅的解决跨域,路由冲突问题
- angular ng-container
- spark 持久化 mysql_Spark读取数据库(Mysql)的四种方式讲解
- Mybatis学习之配置优化
- 10.NoSQL数据库第2部分