實戰演示VUE搭建手機商城

vue單頁模式需要注意的坑


實戰演示VUE搭建手機商城


1.class樣式衝突問題

方法一: 由於是單頁面應用。你在每個組件裡面寫入的樣式最終都會作用到全局裡面去,導致樣式衝突問題。而每個組件都必須提供一個包裹性質的元素,建議這個元素設置一個單獨的class用於包裹裡面的其他class從而避免樣式衝突

方法二: 在style標籤里加入scoped屬性,在修改公共組件的樣式會變得異常麻煩。

<style>

2.靜態資源倆種處理方式需要理解到位

這個在Vue官方文檔上有詳細的說明,但是我一開始沒有理解到位。走了一些個彎路。這裡對Vue官方的內容提煉一個重點:

1.public中的內容必須用絕對路徑引入

也就是以'/'開頭。否則將會被認為是一個模塊引用會被webpack處理。注意:項目如果不是放在根域名下需要如下處理:

<template>

<script>

export default {

data() {

return {

publicPath: process.env.BASE_URL

}

}

}

[圖片上傳中...(image.png-adcfe1-1556546279844-0)]

2.採用相對路徑引入,方式多樣,如:

 1. 

2.
3.

第一種方式用到的@代表的是別名的值

第二種方式用到的~其後的任何內容都會作為模塊請求被解析。官方說可以引用Node模塊中的資源,這個我還沒用過。等以後用過了有更深的見解會再來補充

第三種方式就是標準的相對路徑引入方式

注意千萬不要用下面這種相對路徑引入方式,因為他不會被webpack處理。而是直接採用的相對路徑尋找文件。而當下的目錄是會被處理的。這種方式一用一個錯

  

我的建議是儘可能採用相對路徑引入。減少@的使用。

項目中對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;
//在此我向大家推薦一個前端全棧開發交流圈:582735936 突破技術瓶頸,提升思維能力
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);
}
}

結語

感謝您的觀看,如有不足之處,歡迎批評指正。

對前端的技術,前端全棧技術感興趣的同學關注我的頭條號,並在後臺私信發送關鍵字:“前端”即可獲取免費的前端開發攻城師學習資料

知識體系已整理好,歡迎免費領取。還有視頻分享可以免費獲取。關注我,可以獲得沒有的經驗哦!


分享到:


相關文章: