.vue字尾的有元件，有頁面，頁面放在views資料夾，元件放在components資料夾；

css檔案匯入：

元件匯入：

實際上此處的<nav-header>可以匹配nav-header,navHeader,NavHeader;

麵包屑元件的slot：

slot什麼都不放：

在nav-bread標籤里加一個Goods：

slot加name屬性：

內建express框架對服務端路由的載入（mock資料）：

通過get方法設定前端請求的地址

後端程式碼（dev-server）：

前端程式碼：

價格過濾欄：

此時每個價格區間選中時沒有選中狀態，新增選中狀態：

<!-- filter -->
   <div class="filter" id="filter" v-bind:class="{'filterby-show':filterBy}">
      <dl class="filter-price">
         <dt>價格區間:</dt>
         //判斷當前欄位是否等於'all',是的話應用樣式
         <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}">選擇價格</a></dd>
         <dd v-for="(item,index) in priceFilter">
             <a href="javascript:void(0)" @click="priceChecked==index" v-bind:class="{'cur':priceChecked==index}">￥ {{item.startPrice}} - {{item.endPrice}}</a>
         </dd>
      </dl>
   </div>