VUE搭建手機商城心得

MrXu_發表於2019-02-18
Vue

從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'>
複製程式碼

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

專案中對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);
    }
 }
複製程式碼

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

專案地址

github.com/mrxu0/vue-y…

歡迎大家來提issue來star

QQ交流群

954917384

目前人數相對較少，可以享受一波紅利期。現在可以免費入群，大家可以在這裡面交流專案難題，作為群主的我定然知無不言言無不盡！

感言

做完這個專案收穫真的蠻頗多的，像route的母子路由，路由懶載入，別名設定，路由攔截，vuex中actions，mutations，state的區別，vue的生命週期，父子元件傳值,watch,computed等等。不過內容太多，放到一篇文章裡會顯得特長，且不易消化。要想獲取更多精彩的內容歡迎關注我的公眾號吵吵日記

VUE搭建手機商城心得

相關文章