iT邦幫忙

2021 iThome 鐵人賽

DAY 19
2
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 20

Day 19:「通通拿去做雞精啦!」- Vue SFC

Day19-Banner

嗨大家~
昨天有沒有試著用 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
 

carrotPoint 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,
就能把元件檔當作頁面切換了!

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

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

(把最好的雞,通通拿去做雞精啦!)


 

carrotPoint 建立元件

現在我們開啟用 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 呢~
真是可喜可賀,大成功!
 

可以收尾啦~~

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

carrotPoint 給你們的回家作業:

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

關於兔兔們:


 


( # 兔兔小聲說 )

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

好啊,你想問什麼部分?

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

「公道價? 公道價是...?」

公道價八萬一啦!!!

「你是在大聲什...」

噓,別再說了。

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


上一篇
Day 18:「極速開發」- Vitawind
下一篇
Day 20:「資料拿來我就幫你改」- Vue 基礎觀念及常用語法
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

尚未有邦友留言

立即登入留言