閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：以六角學院的「Vue出一個電商網站」＆大陸慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」（主要學架設MongoDB）作為主要教材嘗試在30天內打造網路商城

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌原則

• navbar和sidebar都會重複利用，因此可以自己拆成一個component 然後在放進去dashboard

▌去bootstrap偷登錄頁面UI

• 在components開一個page -dashboard
• 把bootstrap的html貼近去dashboard
• 把bootstrap的css貼近去asset - helper - _dashboard.scss
• 把dashboardscss引入import all.scss
• 去router-index.js新增dashboard的路由

▌拆出 navbar

• 在components開一個 -navbar
• 把navbar貼進去

<template>
<div>
  <nav>....</nav>
</div>
</template>

▌拆出 sidebar

• 在components開一個 -sidebar
• 把sidebar貼進去

<template>
<div>
  <nav>....</nav>
</div>
</template>

▌Dashboard

• 把navbar和sidebar放進來
• 記得import navbar from "./navbar";
• 記得import sidebar from "./sidebar";
• 記得export default { components: { navbar, sidebar }

<template>
 <div>
   
 <navbar/>   //引入navbar

    <div class="container-fluid">
      <div class="row">
         <sidebar/>  //引入sidebar
      </div>
    </div>
 
</div>

</template>

<script>
import navbar from "./navbar";    //引入navbar
import sidebar from "./sidebar";    //引入sidebar
export default {
  name: "dashboard",
  components: {   //引入複數components
    navbar,   
    sidebar
  }
};
</script>