全国服务热线:4008-888-888

行业新闻

北京抖音微信小程序_VUE搭建手机商城心得和遇到

VUE搭建手机商城心得和遇到的坑       这篇文章主要介绍了VUE搭建手机商城心得和遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

从github上看了一下第一次提交时间是2018年10月22号。到现在将近4个月时间,总算是一点一滴的自己一个人完成了这个使用vue做的商城项目。以前看到别人做的这种项目就很羡慕,想着自己也做一个,曾经的憧憬如今总算实现了。一路做过来踩了不少坑,这篇文章就是分享我遇到的这些坑,希望前人爬坑,后人避免。

项目访问地址

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' 

我的建议是尽可能采用相对路径引入。@的使用的。

项目中对vue属性的巧妙运用

puted监听购物车内容的修改

购物车算是整个项目中比较复杂的地方之一了,删除,添加,选中,取消选中。puted监听这些变化完成了总金额的计算以及全选按钮的变化

computed: {
 totalPrice() {
 var total = 0;
 this.sho凡科抠图.map(value = {
 if (value.check) total += value.num * value.price;
 return total;
 isAllCheck() {
 var newLength = this.sho凡科抠图.filter(value = {
 return value.check;
 }).length;
 return newLength === this.sho凡科抠图.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的生命周期,puted等等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服