Vite 的套件使用

使用 Vue 版 Font Awesome 以及 UI 工具

套件

UI 套件

部分套件不是使用 Vite，而是 Vue Cli 或是自己的工具

• Vuetify
• Quasar
• BootstrapVue3
• Element Plus
• PrimeVue
• Wave UI
• BalmUI
• Ionic Vue
• Equal UI
• Ant Design of Vue
• Oruga
• Vuestic UI
• Naive UI
• Varlet UI
• Vant

Font Awesome

vue-fontawesome 能以元件方式引用 svg icon

• 安裝核心套件

  npm install @fortawesome/fontawesome-svg-core 
  npm install @fortawesome/vue-fontawesome@prerelease

• 依需求安裝各類 icon

  npm install @fortawesome/free-solid-svg-icons
  npm install @fortawesome/free-regular-svg-icons
  npm install @fortawesome/free-brands-svg-icons

• 在 main.js 引用套件和要使用的 icon，個別 icon 引用節省資源

  // 必要引用
  import { library } from '@fortawesome/fontawesome-svg-core'
  import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
  
  // 根據 icon 的種類引用
  import { faCoffee } from '@fortawesome/free-solid-svg-icons'
  import { faGooglePlus } from '@fortawesome/free-brands-svg-icons'
  library.add(faCoffee, faGooglePlus);
  
  // 註冊元件
  createApp()
    .component('font-awesome-icon', FontAwesomeIcon)
    .mount()

• 在需要使用 icon 的地方引用元件

  <font-awesome-icon :icon="['fas', 'coffee']" />