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

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設計、成都外貿(mào)網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)雙鴨山免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

項目訪問地址xuyuechao.top

vue單頁模式需要注意的坑

1.class樣式?jīng)_突問題

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

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

這個在Vue官方文檔上有詳細的說明，但是我一開始沒有理解到位。走了一些個彎路。這里對Vue官方的內(nèi)容提煉一個重點:
1.public中的內(nèi)容必須用絕對路徑引入也就是以'/'開頭。否則將會被認為是一個模塊引用會被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'>

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

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

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

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

<img src='MrXu.jpg'>

我的建議是盡可能采用相對路徑引入。減少@的使用。因為我經(jīng)過測試發(fā)現(xiàn)css和js文件是不支持@的使用的。

項目中對vue屬性的巧妙運用

1.使用computed監(jiān)聽購物車內(nèi)容的修改

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

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

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

filters: {
  statusToText(value) {
   let reValue;
   switch (value) {
    case 1:
     reValue = "代付款";
     break;
    case 2:
     reValue = "代發(fā)貨";
     break;
    case 3:
     reValue = "待收貨";
     break;
    case 4:
     reValue = "已完成";
     break;
    case 5:
     reValue = "已取消";
     break;
    case 6:
     reValue = "售后處理";
     break;
   }
   return reValue;
  }
 }

感言

做完這個項目收獲真的蠻頗多的，像route的母子路由，路由懶加載，別名設置，路由攔截，vuex中actions，mutations，state的區(qū)別，vue的生命周期，父子組件傳值,watch,computed等等。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：VUE搭建手機商城心得和遇到的坑
網(wǎng)站網(wǎng)址：http://sd-ha.com/article46/ghdjeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站制作、搜索引擎優(yōu)化、網(wǎng)站改版、動態(tài)網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)