從github上看了一下第一次提交時(shí)間是2018年10月22號(hào)。到現(xiàn)在將近4個(gè)月時(shí)間，總算是一點(diǎn)一滴的自己一個(gè)人完成了這個(gè)使用vue做的商城項(xiàng)目。以前看到別人做的這種項(xiàng)目就很羨慕，想著自己也做一個(gè)，曾經(jīng)的憧憬如今總算實(shí)現(xiàn)了。一路做過(guò)來(lái)踩了不少坑，這篇文章就是分享我遇到的這些坑，希望前人爬坑，后人避免。

項(xiàng)目訪問(wèn)地址xuyuechao.top

vue單頁(yè)模式需要注意的坑

1.class樣式?jīng)_突問(wèn)題

方法一： 由于是單頁(yè)面應(yīng)用。你在每個(gè)組件里面寫(xiě)入的樣式最終都會(huì)作用到全局里面去，導(dǎo)致樣式?jīng)_突問(wèn)題。而每個(gè)組件都必須提供一個(gè)包裹性質(zhì)的元素，建議這個(gè)元素設(shè)置一個(gè)單獨(dú)的class用于包裹里面的其他class從而避免樣式?jīng)_突

方法二： 在style標(biāo)簽里加入scoped屬性，在修改公共組件的樣式會(huì)變得異常麻煩。超詳細(xì)的解釋可以看這篇文章vue中慎用style的scoped屬性

<style scoped></style>

2.靜態(tài)資源倆種處理方式需要理解到位

這個(gè)在Vue官方文檔上有詳細(xì)的說(shuō)明，但是我一開(kāi)始沒(méi)有理解到位。走了一些個(gè)彎路。這里對(duì)Vue官方的內(nèi)容提煉一個(gè)重點(diǎn):

1.public中的內(nèi)容必須用絕對(duì)路徑引入也就是以'/'開(kāi)頭。否則將會(huì)被認(rèn)為是一個(gè)模塊引用會(huì)被webpack處理。注意:項(xiàng)目如果不是放在根域名下需要如下處理:

<template><img src=`${publicPath}MrXu.jpg`> </template> <script> export default {data() {return {publicPath: process.env.BASE_URL}} } </script>

2.采用相對(duì)路徑引入，方式多樣，如:

1.<img src='@/MrXu.jpg'>2.<img src='~MrXu.jpg'>3.<img src='./MrXu.jpg'>

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

第二種方式用到的~其后的任何內(nèi)容都會(huì)作為模塊請(qǐng)求被解析。官方說(shuō)可以引用Node模塊中的資源，這個(gè)我還沒(méi)用過(guò)。等以后用過(guò)了有更深的見(jiàn)解會(huì)再來(lái)補(bǔ)充

第三種方式就是標(biāo)準(zhǔn)的相對(duì)路徑引入方式

注意千萬(wàn)不要用下面這種相對(duì)路徑引入方式，因?yàn)樗粫?huì)被webpack處理。而是直接采用的相對(duì)路徑尋找文件。而當(dāng)下的目錄是會(huì)被處理的。這種方式一用一個(gè)錯(cuò)

<img src='MrXu.jpg'>

我的建議是盡可能采用相對(duì)路徑引入。減少@的使用。因?yàn)槲医?jīng)過(guò)測(cè)試發(fā)現(xiàn)css和js文件是不支持@的使用的。

項(xiàng)目中對(duì)vue屬性的巧妙運(yùn)用

1.使用computed監(jiān)聽(tīng)購(gòu)物車(chē)內(nèi)容的修改

購(gòu)物車(chē)算是整個(gè)項(xiàng)目中比較復(fù)雜的地方之一了,刪除，添加，選中，取消選中。這些個(gè)操作都會(huì)對(duì)總金額的計(jì)算產(chǎn)生影響，所以我用computed監(jiān)聽(tīng)這些變化完成了總金額的計(jì)算以及全選按鈕的變化

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完成了對(duì)訂單狀態(tài)的顯示

項(xiàng)目中訂單的狀態(tài)多大7種，剛開(kāi)始在html里面使用了三目運(yùn)算符做的判斷顯示，顯示效果極差，而且維護(hù)困難。但是采用filter不僅漂亮的多,后期的維護(hù)以及擴(kuò)展都一幕了然

filters: {statusToText(value) {let reValue;switch (value) {case 1:reValue = "代付款";break;case 2:reValue = "代發(fā)貨";break;... ...}return reValue;}}

針對(duì)這個(gè)功能掘金中有小伙伴給我留言了另外一個(gè)實(shí)現(xiàn)方式，我覺(jué)得也不錯(cuò)。在這里分享一下：

filters: {statusToText(value) {let reValue=new Map()reValue.set(1,'代付款')reValue.set(2,'代發(fā)貨')... ...return reValue.get(value);}}

在這里感謝掘金 小小包子 的分享！

項(xiàng)目地址

https://github.com/mrxu0/vue-ylbs-shop

歡迎大家來(lái)提issue來(lái)star

QQ交流群

954917384

目前人數(shù)相對(duì)較少，可以享受一波紅利期。現(xiàn)在可以免費(fèi)入群，大家可以在這里面交流項(xiàng)目難題，作為群主的我定然知無(wú)不言言無(wú)不盡！

感言

做完這個(gè)項(xiàng)目收獲真的蠻頗多的，像route的母子路由，路由懶加載，別名設(shè)置，路由攔截，vuex中actions，mutations，state的區(qū)別，vue的生命周期，父子組件傳值,watch,computed等等。不過(guò)內(nèi)容太多，放到一篇文章里會(huì)顯得特長(zhǎng)，且不易消化。要想獲取更多精彩的內(nèi)容歡迎關(guān)注我的公眾號(hào)吵吵日記

總結(jié)

以上是生活随笔為你收集整理的VUE搭建手机商城心得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。