Day_25: 让 Vite 来开启你的Vue 之 让肝变彩色的 给力 Vite & Vue 相关套件

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跌过的坑(碰到的问题)系列，以上谢谢大家。

--- 无聊小记事 ---

最近喜欢上了小时候很讨厌的跳绳，反差的对比才让我发现
原来 小时候的不喜欢可能不是真正的不喜欢
而长大的不喜欢也可能是真正的不喜欢..
但我相信 小时候的喜欢，到长大了依旧喜欢 就是真正的喜欢。

今天听的是 小时候到现在一直都很喜欢的 五月天 温柔..