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

▌挑戰簡介

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

• 挑戰內容：利用慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」的課程嘗試在30天內打造網路商城。

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

▌心得

本來是使用慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」，但他的前面講的太難了，因此目前是按照六角學院的「Vue出一個電商網站」為教材

▌本次目標

前一篇大致說明了如何設定Vue-router，今天就開始製作自己的第一個SPA網站。

• 做出一個小網站，可以切換頁面，但是不會重新刷新（用模擬的router)
  

▌作法

創立分頁元件

在component資料夾下面放page用來管理分頁

• index.vue
• card.vue
• about.vue
• sign.vue

最後這些網站都會注入app.vue

每個vue分頁大致如下

<template> //在template裝你要的內容
<h1>歡迎來到SPA</h1> //隨便的html
</template>

<script> //export該資料
export default {
  data () {
    return {
     
    }
  }
}
</script>

路由文件設定

把元件和路徑的對應，設定好

import Vue from 'vue'
import Router from 'vue-router'
import card from '@/components/page/card.vue'
import about from '@/components/page/about.vue'
import sign from '@/components/page/sign.vue'
import index from '@/components/page/index.vue'
Vue.use(Router)

export default new Router({
  routes: [{
    path: '/index',
    name: 'index',
    component: index
  }, {
    path: '/about',
    name: 'about',
    component: about
  }, {
    path: '/card',
    name: 'card',
    component: card
  }, {
    path: '/sign',
    name: 'sign',
    component: sign
  }]
})

app.vue

回到app.vue（主頁的vue）進行設定

• 貼上navbar的原始碼（可以去bootstrap亂貼來用）
• 把a標籤改成
• 把a標籤原本的src改成 to="/路徑"

<template>
  <div id="app">
    <ul class="nav justify-content-center">
  <li class="nav-item">
    <router-link class="nav-link " to="/index">首頁</router-link>
  </li>
  <li class="nav-item">
    <router-link class="nav-link" to="/card">卡片</router-link>
  </li>
  <li class="nav-item">
    <router-link class="nav-link" to="/about">about us</router-link>
  </li>
  <li class="nav-item">
    <router-link class="nav-link "  to="/sign">Sign</router-link>
  </li>
</ul>
<br>
    <router-view/>
  </div>
</template>

或是說可以把 to="/sign" 改成 :to="{name:sign(路由名字)}"

完成

第一個SPA網站完成！！