iT邦幫忙

0

[鼠年全馬] W27 - Vue出一個旅館預約平台(1)

這個題目是從六角的F2E精神時光屋裡面的[第六關 - 旅館預約服務]來的
裡面有各種大神前輩們做的UI及實作出來的頁面

就算颱風來也要coding

後面幾週就來用幾個題目實作出作品出來吧/images/emoticon/emoticon12.gif

這裡選了一個Miss_Y大神做的美美的UI
https://ithelp.ithome.com.tw/upload/images/20200728/20118686Ia7QjnwbLY.png
https://ithelp.ithome.com.tw/upload/images/20200728/20118686acr4BoiCut.png
https://ithelp.ithome.com.tw/upload/images/20200728/20118686ry9QqXSY3r.png
希望我有辦法把它實作出來
(不然就糗了)
/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif/images/emoticon/emoticon01.gif


事不宜遲, 既然挑好題目就馬上開始做吧~

#建置專案

首先, 建置專案的部分使用Vue Cli小秘書幫我們做吧~
忘記怎麼做的可以看一下前面這篇讓Vue Cli小秘書跟你一起做

於是乎我們做就建置完成了 (偷懶)


#專案架構

上一次介紹小秘書給大家時, 沒有提到專案架構的部分
這邊來介紹一下
首先先來放上專案架構圖
https://ithelp.ithome.com.tw/upload/images/20200728/20118686gU6zwicruI.jpg
讓我上一些筆記
https://ithelp.ithome.com.tw/upload/images/20200728/201186865I2P5tsFKa.jpg
結束xD


#vue檔

上面圖中我們有看到在componentsviews資料夾中都有一些vue檔
這邊來介紹一下vue檔是什麼
vue檔是一個元件檔, 裡面會放1個元件, 注意喔~是1個元件~不能放2個喔~
它就像把做好的Vue.component整個放進去一樣
並且可以用單獨的css去美化
它的結構分為三個區塊

  • template: 元件的html及vue指令
  • script: 元件的js, importdata methed 等等都在這裡進行
  • style: 元件的css

https://ithelp.ithome.com.tw/upload/images/20200728/20118686cbeEGhsntJ.jpg

其中比較不同的是script的部分, 需要加上export default來設定元件的配置
其他用法都與Vue.component相同


#頁面分析

最後做一個頁面分析這週就結束
我們可以看到這UI大致分為三頁

  • 首頁: 包含Banner、房型清單簡介、Footer
  • 預約房間: 包含預約功能、房型詳細介紹、Footer
  • 預約成功: 包含預約成功訊息、房型詳細介紹、Footer

可以看到我們會需要做出這些元件

  • Banner
  • 房型簡介Card
  • Footer
  • 預約功能
  • 房型詳細介紹
  • 預約成功訊息

於是乎, 就先在viewscomponents資料夾中建立這些檔案吧~
https://ithelp.ithome.com.tw/upload/images/20200729/20118686513d6fyPRy.jpg

接著我們先建立好頁面router, 頁面分兩頁, 建立在views資料夾內

  1. Index - 首頁
  2. Reservation - 預約頁(預約成功可以放一起)

兩頁檔案中都先只放一個div, 內容是自己的名子

//Index.vue
<template>
  <div>Index</div>
</template>
//Reservation.vue
<template>
  <div>Reservation</div>
</template>

接著開啟router資料夾裡面的index.js, 把這兩頁的routes設定加上吧~
忘記vue-router的人可以參考一下前面這篇Vue Router分頁好蚌蚌

//router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue' //引用Index元件
import Reservation from '../views/Reservation.vue' //引用Reservation元件

Vue.use(VueRouter)

//加入routes設定
const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  },
  {
    path: '/reservation',
    name: 'Reservation',
    component: Reservation
  },
  {
    path: '*',
    redirect: '/',
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

最後在App.vue上記得加上router-view節點
可以另外加上兩個router-link來測試看看有沒有成功~

//App.vue
<template>
  <div id="app">
    <router-link to="/">Index</router-link>
    <router-link to="/reservation">Reservation</router-link>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  data: () => ({}),
};
</script>

有成功切換頁面就可以休息了 哈哈
/images/emoticon/emoticon79.gif/images/emoticon/emoticon79.gif/images/emoticon/emoticon79.gif


今天就先做到頁面router建立完成囉~
下週繼續~~


尚未有邦友留言

立即登入留言