在vue.js中有關vue-fontawesome使用

這篇文章主要介紹了vue.js系列中的vue-fontawesome使用,需要的朋友可以參考下

折騰前言

目前工作主要使用vue.js 框架進行開發，自己又對vue 不是那麼了解，還是半桶的狀態，所以得加緊步伐趕緊熟悉起來，這兩天在使用腳手架vue-cli 創建專案玩耍中，又一直對font-awesome鈸而不捨，透過github 了解到早有大牛搞出了vue-awesome，因此就開始折騰了…

#廢話不多說，開搞！

準備工作

這個是作者的github 地址：飛機

為了示範完整步驟，用腳手架新項目

正在創建中…

趁此閒話幾句

這種方式使用有個好處就是，你可以自己自訂任何圖標，即用svg 格式輸出，然後透過 Icon.register 去註冊一個圖標，註冊方式如下：

如果圖標很多的時候，DOM 中可能分散著大量的svg 標籤，這個不知道算不算缺點來著。

Icon.register({
 'chevron-right': {
  'width': 1280,
  'height': 1792,
  'paths': [{
   'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
  }]
 }
});

chevron-right 這個是該圖示的名字，在使用的時候透過

<icon name="chevron-right"></icon> 去使用，至於樣式依正常定義即可。

paths 裡面就是圖示的繪製svg 時候的路徑資訊

安裝OK了，進入正題…

準備工作：

• 安裝vue-awesome

$ npm install vue-awesome --save

這個簡單安裝完成就OK。

結果預覽

從圖中看其實圖示最後就是個svg 標籤

##圖示存放目錄

為了開發方便，新建src/icons 目錄集中存放圖標js檔案

$ cd src/
$ mkdir icons && cmod

這裡cmod 是777 權限，由於是用的是虛擬機，所以經常出現權限問題，因此索性直接給777（僅限本機開發）

icon 元件

#下載Icon.vue 檔案

到這裡下載Icon.vue文件，建議將整個專案git 下來。

這個元件的作用是，用來創造

自訂標籤。

然後把Icon.vue 放到components 目錄下（放哪裡可以自己決定）

在src/icons 建立註冊圖示檔案

這個目錄集中放置所有icon 的註冊js 檔案

建立出口檔index.js 這裡面將引入所有圖示js 檔案

// src/icons/index.js
import './chevron-right.js';
// ...... 其他需要的图标文件

以右鍵頭圖示為例：(chevron-right.js)

import Icon from '../components/Icon.vue';
Icon.register({
 'chevron-right': {
  'width': 1280,
  'height': 1792,
  'paths': [{
   'd': 'M1107 877l-742 742q-19 19-45 19t-45-19l-166-166q-19-19-19-45t19-45l531-531-531-531q-19-19-19-45t19-45l166-166q19-19 45-19t45 19l742 742q19 19 19 45t-19 45z'
  }]
 }
});

專案入口main.js 引用字體庫

專案主入口檔案main.js 中引入

vue-awesome 庫和 icons/index.js 檔案

引入圖示元件

import Icon from './components/Icon';

引入圖示內容檔案

import './icons/index.js';

然後將Icon 註冊成vue 元件

Vue.component('icon', Icon);

註冊完成之後，我們就可以在程式碼中直接使用

標籤了

##結束

##使用步驟還是很簡單的，經過上面的步驟之後我們就可以正常使用圖示庫了

總結下來步驟其實就下面幾步

import Icon.vue 元件

1. new you-icon.js，裡面透過Icon.register 註冊圖示

2. 【可選】 新圖示檔案出口文件，這個在使用的圖示很多的時候比較方便

3. 引用圖示

4. 為圖示設定樣式（大小可以透過transform: scale() 來設定）

5. PS: 直接設定字體，改變不了大小；

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在vue中如何實作watch監聽物件及對應值的變化

在vue中使用$emit時,父元件無法監聽到子元件的事件如何實現？

在vue中如何使用全域提示框元件？

以上是在vue.js中有關vue-fontawesome使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！