[Day 18] 比对首页跟UI的完成度

好的~今天先来检查一下

目前的成品跟一开始规画的UI，完成度如何呢?

比对UI完成度

这是一开始的首页UI

这是目前的成品

恩.... 有点後悔前几天没先看UI稿就乱做了可恶 XDDD

昨天有说过，我习惯的开发流程就是＂达成指定目标＞重构＞前进下一个目标＞达成指定目标＂

那目前就是进入 重构／调整 阶段啦，重构完成後，就可以去下一个阶段了！

目前还差甚麽?

在轮播旁边，要加上主题推荐和节庆活动的图片，点下後要可以连到对应页面
下方的热门活动排行要美化一下

新增图片到专案

那现在就先新增图片瞜

为了避免版权问题，我这边有自己准备了2张图 XD

(有需要可自由取用)

新增到Git

首先把图丢到 /src/assets 资料夹里，因为我们有连动Git，

他会询问要不要加到Git的版本控制内，选择 "Add"即可

Git 档案颜色区别

这次新增的档案，档案名称会是绿色

没有加入版控，档案名称会是红色

已经在版本控制下，档案名称会是白色

这次档案有修改，档案名称会是蓝色

把图片加到首页

因为要放在本来的轮播右边，所以需要先用 v-col，把框架分成左右二格，比率为 8:4

加入图片

这次采用 Vuetify的 v-img组件

不用原生的写法是因为如果要做到RWD的效果，要多写很多东西，

但是套用v-img组件的话，他预设就会有RWD了，超赞~
设定连结

这边采用 :src 加上 require("路径") 的方式，

因为我有使用webpack打包，如果直接写 src = '../assets/festival.png' 的话，会抓不到图片

在网路上有其他人遇到相似问题

Vue Vuetify 的 v-img 组件中的 src 属性不能直接使用相对路径

有两种方法，一个是手动加上require，另一个是用vue-loader套件，

因为我目前应该只会套用这2张自己的图片，所以就手动设定就好了
跳转页面

用router-link 把图片包起来，to可以指定要连结的页面

HomePage.vue

	<v-col sm="8"> <!-- 分配8格给照片轮播 -->
    <v-carousel
      cycle
      height="400"
      hide-delimiter-background
      show-arrows-on-hover
    >
      <v-carousel-item
        v-for="(item,i) in carouselItems"
        :key="i"
        :src="item.src"
        :href="item.link"
        target="_blank"
      ></v-carousel-item>
    </v-carousel>
  </v-col>
	<v-col sm="4"><!-- 分配4格给 v-img -->
	    <router-link to="festival"> <!-- 指定点击後要跳转的页面 -->
				<!-- 加入图片 -->
	      <v-img  
	        :src="require('../assets/festival.png')"
	        max-width="350"
	      ></v-img>
	    </router-link>
	    <router-link to="topic">
	      <v-img
	        :src="require('../assets/topic.png')"
	        max-width="350"
	      ></v-img>
	    </router-link>
	</v-col>