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

▌挑戰簡介

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

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

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

▌Vue Router設定方式

如果一開始在vue init的時候有選擇安裝vue router就不用做以下設定

vue init時沒安裝的狀況

cd 專案資料夾名稱
npm install vue-router --save 
//先安裝個vue router到modules中
//加save才不用改jason檔案

然後，在src資料夾下面開一個router資料夾，還有index.js

index.js

//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router) //啟用Router

export default new Router({
  routes: [{  //設定路徑
    path: '/index', //自訂路徑
    name: 'HelloWorld', //設定名稱
    component: HelloWorld //選擇要對應的元件
  }]
})

每個路徑path，要對應一個元件component

main.js

import Vue from 'vue'
import App from './App'
import router from './router'  //把router引入進來

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //增加上去
  components: {
    App
  },
  template: '<App/>'
})

app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>  //增加<router-view/> 上去
  </div>
</template>

以上完成後，就可以在http://網站/#/index 看到helloword的元件了