這篇文章主要介紹了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
icon 元件
#下載Icon.vue 檔案到這裡下載Icon.vue文件，建議將整個專案git 下來。 這個元件的作用是，用來創造 自訂標籤。
在src/icons 建立註冊圖示檔案
這個目錄集中放置所有icon 的註冊js 檔案建立出口檔index.js 這裡面將引入所有圖示js 檔案// src/icons/index.js import './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';
Vue.component('icon', Icon);
標籤了
##使用步驟還是很簡單的，經過上面的步驟之後我們就可以正常使用圖示庫了
總結下來步驟其實就下面幾步 import Icon.vue 元件在vue中如何實作watch監聽物件及對應值的變化
在vue中使用$emit時,父元件無法監聽到子元件的事件如何實現？
以上是在vue.js中有關vue-fontawesome使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
