iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
0

閱讀前,建議可以參考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的元件了


上一篇
Day4:VueCli下的資料夾介紹
下一篇
Day6:開始製作自己的第一個SPA網站
系列文
三十天用Vue.jS打造一個網路商城30

尚未有邦友留言

立即登入留言