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

項目訪問地址xuyuechao.top

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'>

我的建議是盡可能采用相對路徑引入。減少@的使用。因為我經過測試發現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;  } }