新增 .vue 元件

目前所看到的首頁其實是藉由 vue-router 載入 HelloWorld.vue 渲染出來的，先來體驗熱加載的魔力；執行npm run dev，之後試著在 HelloWorld.vue 中添加 harden.jpg 跟更改文字內容

<!-- HelloWord.vue -->

<template>
  <div class="hello">
    <img src="../assets/harden.jpg">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '這是首頁，所以 Harden 不動'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

修改完後儲存檔案，噠啦～不用重新整理就自動更新了，但熱加載其實還有更猛的地方，之後有機會在詳述。

接著直接複製 HelloWorld.vue 或新增一個 .vue 檔案，命名為 HardenDown.vue，修改文字及添加 css 樣式，程式碼如下：

<!-- HardenDown.vue -->

<template>  
  <div class="hello">
    <img src="../assets/harden.jpg">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HardenDown',
  data () {
    return {
      msg: '這是連結二，所以 Harden 躺著'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .hello img {
    transform: perspective(600px) rotateX(80deg);
  }
</style>