vue項目中使用vue-awesome

公司在項目重構時，遇到圖標問題，而後把vue-awesome、iconfont、iconMoon都試了一遍，雖然最終使用了iconMoon可是也要把這兩個過程記錄一下。

github地址

1.首先安裝vue-awesome依賴包

安裝方法：

使用npm安裝

npm install vue-awesome

 

使用bower安裝

bower install vue-awesome

注意：安裝以後打開node_modules文件夾，查看是否有vue-awesome文件夾，若是沒有看是不是編輯器太慢的緣由，也能夠重啓一下看是否有該文件

若是尚未表示沒有安裝成功，須要從新安裝

 

 

2.在main.js文件下

在github上能夠明確看到若是考慮項目大小，只導入用於減小包大小的圖標

import 'vue-awesome/icons/flag'

不然

import 'vue-awesome/icons'

這裏我不考慮大小使用第二種

而後

import Icon from 'vue-awesome/components/Icon'

全局使用 Vue.component('icon',Icon)

 

這裏是個人代碼提供參考

 

接下來就能夠去在任何.vue組件中使用了！

這裏我在最新剛剛下載好的vue-cli項目中試用一下，看一下效果

 <icon name="beer"></icon>

就會看到

 

若是你不知道，這些圖標有哪些，叫什麼名字，能夠去font awesome官網上查看，vue-awesome是基於font awesome圖標庫來的

傳送門送你離開