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

個人建議是儘量採用相對路徑引入。減小@的使用。由於我通過測試發現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等等。不過內容太多，放到一篇文章裏會顯得特長，且不易消化。要想獲取更多精彩的內容歡迎關注個人公衆號吵吵日記