嗨大家～
昨天有沒有試著用 Creator 建立專案呢！

沒有的話現在趕快去複習哦，
因為我們今天會用到～

之前有說過 Vue 是漸進式的，
所以你用多用少都可以，
但以工作上的專案多半還是會以 CLI 來完成。

而 Vue CLI 之類的環境，
元件通常會以 .vue 的方式出現在專案中，
這個檔案則稱為單一元件檔，Vue SFC。

我們先來比較一下差異，
這是用 cdn 時撰寫元件的方式：

// Vue 3.x
const app = Vue.createApp({
  data() {
    return {
      // ...      
    }
  }
})

// 新增元件
app.component('Box', {
  template: `<div>{{ content }}</div>`,
  props: ["content"],
  data() {
    return {}
  },
  methods: {
    // ...
  }
})

app.mount('#app')

然後這樣製作元件，
會把所有的元件都塞在一起，
不但畫面看起來很啊砸，
而且要客製化元件的樣式非常麻煩。

但這就是 SFC 可以解決的問題！
我們來看一下 SFC
 

SFC 單一元件檔

如果使用了單一元件檔的方式，
那我們的元件就會長的像：

<!-- Box.vue -->
<template>
  <div>{{ content }}</div>
</template>

<script>
export default {
  props: ["content"],
  data() {
    return {}
  },
  methods: {
    // ...
  }
}
</script>

<style scoped>

</style>

有注意到 底下的 <style scoped> 嗎？
這正是他的特別之處！

所謂的單一元件檔就是，
一個 .vue 檔為一個元件，
而每個元件都有屬於自己的 html、js、css
這樣就可以把元件設計切分得非常乾淨！

而且這裡面的東西都是有範圍性的，
並不會汙染到全域的內容。

這樣的好處非常的多！

比如說，很適合分工，
每一個寫一個元件檔案，
除非元件之間有資料傳遞，
不然完成就已經是個完整的功能了！

或是像我前面所說的，
每個元件都有屬於自己的 html、js、css，
這意味著，可以拿來完成整個頁面？

沒錯，可以～～～

在 CLI 內的頁面通常就直接是一個元件檔了，
比如會像是這樣：

<!-- About.vue -->
<template>
  <Nav />
  <Main>
    <Logo />
    <h1>關於兔大王公司</h1>
    兔大王公司，專門生產高科技胡蘿蔔，用最...
  </Main>
  <Footer />
</template>

<script>
export default {
  name: "About",
  data() {
    return {}
  },
  methods: {
    // ...
  }
}
</script>

<style scoped>
  h1 {
    color: blue;
  }
</style>

然後只要再搭配 Vue-Router，
就能把元件檔當作頁面切換了！

這樣的元件檔不但邏輯清晰，
撰寫的時候內容量也不會太大。
好處蠻多的！

其實這樣簡直就是把很棒的材料組合起來，
然後通通拿去做出一個精良的元件檔！

(把最好的雞，通通拿去做雞精啦！)

建立元件

現在我們開啟用 Vitawind 建立的專案，
先執行指令開啟 dev server：

npm run dev

應該超快就開起來了。

開啟來之後，
看專案中的 ./src 資料夾。

可以發現裡面就預設有兩個 .vue 檔，
他們兩個就是 Vue SFC。

不過先不管他們，
我們來用現在的環境完成之前做過的方塊。

我們在 components 資料夾中，
建立一個 Box.vue，
然後貼上我們在 Day17 中提取成 vue 元件的範例。

<template>
  <div 
    :class="[
      [
        'w-20 h-20 bg-gray-500 rounded-md',
        'focus:ring-4 group-hover:text-gray-600',
        'font-bold text-3xl text-white',
        'flex justify-center items-center',
        'cursor-pointer outline-none'
      ],
      (color==='red') && 'bg-red-500 hover:bg-red-400 ring-red-300',
      (color==='blue') && 'bg-blue-500 hover:bg-blue-400 ring-blue-300',
      (color==='purple') && 'bg-purple-500 hover:bg-purple-400 ring-purple-300'
    ]"
    :tabindex="number"
  >
    {{ number }}
  </div>
</template>

<script>
export default {
  name: "Box",
  props: ["number", "color"]
}
</script>

這時候我們要把註冊後的元件加到頁面中，
稍微把 App.vue 改寫一下：

<template>
  <div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
    <box v-for="item in Boxes" v-bind="item" :key="item.number" />
  </div>
</template>

<script>
import Box from './components/Box.vue'

export default {
  data() {
    return {
      // 定義三個 box 的內容
      Boxes: [
        {number: 1, color: 'red'},
        {number: 2, color: 'blue'},
        {number: 3, color: 'purple'},
      ]
    }
  },
  components: {
    Box
  }
}
</script>

這也是從 Day17 中提取成 Vue 元件的範例拿來改的。

基本上沒有甚麼不一樣的地方，
差別在於這裡有用 ESM 方式載入 .vue 檔。

那麼接下來呢...

直接儲存！！！

對，不要害怕的直接儲存下去，
你就會發現一瞬間畫面上：

沒錯，就這樣上去了！
這個 Box 就是一個最基本的元件。

現在我們試著把底下陣列的內容改一改：

Boxes: [
  {number: 5, color: 'blue'},
  {number: 2, color: 'purple'},
  {number: 0, color: 'red'},
]

接著儲存馬上看效果！

有欸，數字換了顏色順序也換了！

然後不知道你有沒有發現，
用 Tailwind 的好處就是這樣，
html 結構直接貼過來樣式就直接有了，
而且樣式效果還都一模一樣！

就是這樣我才會喜歡 Tailwind 呢～
真是可喜可賀，大成功！
 

可以收尾啦～～

還順利嗎？
這邊的進度應該不難，
如果有興趣的話，
也可以嘗試修改一下元件內容和樣式，
做出不一樣的效果來交作業吧！
 

給你們的回家作業：

• 作業實施要點：
  • 打開專案並開啟 dev server
  • 製作完成 Box 元件
  • 試試做出自己的元件外觀和內容
• 白蘭氏廣告：通通拿去做雞精篇
   

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

「兔兔，我想跟問一下這課程的問題。」

好啊，你想問什麼部分？

　「是關於學費，是不是有點小貴...」
　
好，想問的大概就這些嗎？
關於學費的部分，我沒有辦法，
因為這是公道價了...

「公道價？ 公道價是...？」

公道價八萬一啦！！！

「你是在大聲什...」

噓，別再說了。

不要這麼大聲。
這裡不是兔兔小聲說嗎？