Hi Dai Gei Ho~ 我是 Winnie ～

記得有一句話是這麼說的

肝 若不好 人生是黑白的，肝 若好 人生是彩色的。

所以為了讓我們可以少吃一顆保肝丸，在 今天的文章中，我們要來介紹關於 Vite ＆ Vue 給力好用的兩款套件，至少人生 灰一點也比全黑好看， 首先來看看第一個:

子元件自動引入

unplugin-vue-components 套件 主要可以協助我們使用 子元件時，可以 省略元件定義 及 引入 的步驟 ，就可以直接在 模板(template) 來做使用。

有點繞口讓我們來看看 Before 與 after:

Before (原本):

 <script>
    <template>
      <div>
        <HelloWorld msg="Hello Vue 3.0 + Vite" /> //step3: 最後在 模板中使用
      </div>
    </template>

    <script>
    import HelloWorld from './src/components/HelloWorld.vue' //step1:一般使用都需要先import

    export default {
      name: 'App',
      components: {
        HelloWorld  //step2:再來定義元件
      }
    }
    </script>
 </script>

After(使用套件後):

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

是不是很方便！這可是當主管要求你的程式碼要縮減時，可以用的偷吃步XD

同時記得要在 Vite Config中 作設定喔，用法如下：

//vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite' //引入  unplugin-vue-components

export default defineConfig({
  plugins: [
    vue(),
    Components(), //在 plugins 中 定義 Components
  ],
})

指路連結: unplugin-vue-components

Icon 相關套件

接著是 關於 Icon 相關套件的介紹， unplugin-icons 提供很多常用免費的Icon可以用，而且不只限定使用Vue，同時也支援多種使用方式。

用法如下：

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'//一樣先引入套件
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
plugins: [
  vue(),
  Components({
    resolvers: IconsResolver({
      prefix: 'icon'  // 可以為 icon component加上前贅字來區分元件
    }),
  }),
  Icons(),//一樣定義引入的套件
],
})

接著我們 可以到網站 icones來挑一個需要使用的 icon 直接引入到template中

以 banana icon為例(其實我想找芭樂XD)

複製 fxemoji:banana之後，接著引入 Vue 元件之中， 以自訂義元素的方式來撰寫，寫法如下：

<template>
   <button class="move-btn next">
     <icon-fxemoji-banana/> // 以連字號Hyphen 的方式來撰寫，前面的icon需要在config做設定
   </button> 
<template/>

我們將 原本 fxemoji:banana 以連字號Hyphen的方式來撰寫，就可以使用了。

預覽：

指路連結: unplugin-icons

以上就是 Vite ＆ Vue 的相關套件的簡單使用介紹，另外想預告下，在接下幾篇文章 的主題 將會開始說說 自己在曾在Vue跌過的坑(碰到的問題)系列，以上謝謝大家。

--- 無聊小記事 ---

最近喜歡上了小時候很討厭的跳繩，反差的對比才讓我發現
原來 小時候的不喜歡可能不是真正的不喜歡
而長大的不喜歡也可能是真正的不喜歡..
但我相信 小時候的喜歡，到長大了依舊喜歡 就是真正的喜歡。

今天聽的是 小時候到現在一直都很喜歡的 五月天 溫柔..