[鼠年全马] W27 - Vue出一个旅馆预约平台(1)

这个题目是从六角的F2E精神时光屋里面的[第六关 - 旅馆预约服务]来的
里面有各种大神前辈们做的UI及实作出来的页面

就算颱风来也要coding

后面几週就来用几个题目实作出作品出来吧

这里选了一个Miss_Y大神做的美美的UI



希望我有办法把它实作出来
(不然就糗了)

---

事不宜迟, 既然挑好题目就马上开始做吧~

#建置专案

首先, 建置专案的部分使用Vue Cli小秘书帮我们做吧~
忘记怎么做的可以看一下前面这篇让Vue Cli小秘书跟你一起做

于是乎我们做就建置完成了 (偷懒)

---

#专案架构

上一次介绍小秘书给大家时, 没有提到专案架构的部分
这边来介绍一下
首先先来放上专案架构图

让我上一些笔记

结束xD

---

#vue档

上面图中我们有看到在components及views资料夹中都有一些vue档
这边来介绍一下vue档是什么
vue档是一个元件档, 里面会放1个元件, 注意喔~是1个元件~不能放2个喔~
它就像把做好的Vue.component整个放进去一样
并且可以用单独的css去美化
它的结构分为三个区块

template: 元件的html及vue指令script: 元件的js, import及data methed 等等都在这里进行style: 元件的css

其中比较不同的是script的部分, 需要加上export default来设定元件的配置
其他用法都与Vue.component相同

---

#页面分析

最后做一个页面分析这週就结束
我们可以看到这UI大致分为三页

首页: 包含Banner、房型清单简介、Footer预约房间: 包含预约功能、房型详细介绍、Footer预约成功: 包含预约成功讯息、房型详细介绍、Footer

可以看到我们会需要做出这些元件

Banner房型简介CardFooter预约功能房型详细介绍预约成功讯息

于是乎, 就先在views及components资料夹中建立这些档案吧~

接着我们先建立好页面router, 页面分两页, 建立在views资料夹内

Index - 首页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.jsimport 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>

有成功切换页面就可以休息了 哈哈

---

今天就先做到页面router建立完成啰~
下週继续~~