[VR 前後端交響曲Day7] 在Rails專案內加上Vue元件

12th鐵人賽 rails ruby on rails vue vue.js

貓貓工程師 Ting Ting

2020-09-22 00:10:47

1045 瀏覽

經過了三天的Vue簡單起手式，接著我們要回到Rails專案內實作了。（捲起袖子）
今天來了解一下元件的概念！

元件`component`：堆樂高積木的概念

在開發的時候，管理團隊專案內JavaScript檔案一直是一件充滿挑戰的任務。自從框架帶來了元件components的概念後，重複使用的功能可以獨立出來成為一個一個可以重複使用的「積木」，讓跟特定區塊有關的html、css及JavaScript都集中在同個component。程式更好維護、更易於重複使用，也更不容易出錯了～

示意圖：元件就像樂高積木一樣

(pic credit:)

我們可以想像Vue的每個元件都是一個UI，各自具有template標籤(html)、state狀態(js)及style樣式(css)

(pic credit:)

每個Vue元件的架構，固定寫法長這樣（可以把這段程式碼在你喜愛的編輯器裡存成snippet～開發更快速唷）：

<template>
// 這裡放html
</template>

<script>
// import Another from "/components/another.vue";

export default {
  name: '',
  data: function () {
    return {
    };
  },
  // components: { Another },
};
</script>

<style scoped>
// 這裡放css
</style>

特別注意的是，在component裡的data屬性，需要是一個有return值的function，每次回傳該元件專屬的狀態及資料。

註冊元件

當我們想要使用某一塊積木（例如上述程式碼註解的部分Another這塊積木時候），必須先import引入積木的位置、然後再來到components: { Another }這個位置註冊，根據慣例，元件名字的開頭大寫。

Rails專案示範：掛`component`

學習新主題的時候，我習慣先來個最小可行解試試手感：

如下面Gif圖所示，當我在Rails專案某一個頁面的Root元件裡有一塊foot區域，要怎麼把這一塊改成component呢？

首先：在 html規劃好架構
pages#home.html.erb

<div id="main-area">
  <div class="main-title">Vue.js x Rails{{ title }}</div>
  <div class="main-body">本日主題：Rails專案內加上Vue元件</div>
  <Foot></Foot>
</div>

我的Root元件：main-page.js:

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import Foot from '../components/foot'


Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#main-area");

  if (el){
    new Vue({
      el,
      data: () => {
        return {
          title: " 第12屆鐵人賽專案"
        }
      },
      components: { Foot }
    })    
  }
})

/frontend/components/foot.vue

接著，就是~推積木時間~要產生一塊元件了～
在foot這塊元件的template用第四天介紹的鬍子語法把我的版權宣告內容傳進來。
然後在style scoped稍微調了一下css，這個scoped代表元件區域內的css不會影響到其他地方的css喔！便利ですね〜

<template>
  <div class="footer">
    <div class="footer-content">{{ trademark }}</div>
  </div>
</template>

<script>
export default {
  name: '',
  data: function () {
    return {
      trademark: "by Ting Ting. All rights reserved."
    };
  }
};
</script>

<style scoped>
  .footer{
    background-color: rgb(252, 252, 218);
    width: 100%;
    height: 20vh;
    position:absolute;
    bottom:0px;
    left:0px;
    font-size: 10px;
  }
  .footer-content{
    padding-top: 60px;
    text-align: center;
  }
</style>

成功地在Rails首頁的掛好第一個元件囉！