從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等等。不過內容太多,放到一篇文章裏會顯得特長,且不易消化。要想獲取更多精彩的內容歡迎關注我的公衆號吵吵日記