對於前端而言，圖示的發展可謂日新月異。從img標籤，到雪碧圖，再到字型圖示，svg，甚至svg也有了類似於雪碧圖的方案svg-sprite-loader。雪碧圖沒有什麼好講的了，只是簡單地利用了background-position來做圖示定位。今天咱們先聊聊怎麼使用字型圖示和svg圖示。其實字型圖示也不陌生了，bootstrap，font-awesome，element-ui等ui庫都基本標配了字型圖示。
簡單說下原理
unicode預留了e000-f8ff範圍作為私有保留區域，這個區間的unicode碼非常適合做字型圖示，前端根據unicode碼就能顯示對應的圖示。
vue專案引入iconfont
在iconfont新建專案
注：這裡修正一下，字首應該是test-icon-。
2. 新增圖示至專案
@font-face
複製**
頁面中使用
使用時很不友好，使用的是unicode碼表示，使用圖示還必須去iconfont專案去查詢下unicode碼。
複製**效果圖如下：
在全域性樣式檔案中定義如下**
@font-face
.iconfont
複製**
複製**
總結相容性最好，支援ie6+，及所有現代瀏覽器。
支援按字型的方式去動態調整圖示大小，顏色等等。
但是因為是字型，所以不支援多色。只能使用平台裡單色的圖示，就算專案裡有多色圖示也會自動去色。
在index.html中引用它。
複製**專案中就可以使用字型圖示了。
.iconfont
// 列了一部分舉例
.cl-icon-user:before
.cl-icon-video:before
.cl-icon-pause:before
.cl-icon-orgnazation:before
複製**總結
相容性良好，支援ie8+，及所有現代瀏覽器。
相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的unicode引用。
不過因為本質上還是使用的字型，所以多色圖示還是不支援的。
然後在index.html中引入這個js檔案
複製**這個js的作用是在文件中生成svg symbol
最後就可以在頁面中通過use標籤使用svg圖示了。xlink:href的值設定為對應的symbol的id即可。
複製**效果如下：
複製**圖示自動管理（必看）
即使使用了symbol方式，當設計小姐姐新增圖示時，我們還是無法避免重新生成圖示**。那麼有沒有更優雅的解決方案呢？答案是有的。svg-sprite-loader + require.context。
vue專案中引入jquery和jqueryui
之前一直不喜歡在vue裡面引入jq的東西，因為和vue的理念是背道而馳的，但是後來因為專案需求難以解決，不得不引入入jquery去解決，才感嘆jq還是很強大的啊 真香嘻嘻 我的專案是基於vue 2.0的。3.0的可能會有些不同，但是應該問題不大了 首先，我們得在package.json檔案中的dep...
vue 在vue 專案中引入外部js檔案
在普通的專案中，我們可以通過來引入外部的js檔案，但是在vue專案中，就不可以使用這種方式了，需要使用es6語法來引入，同時還要對已有的js檔案做相應的修改。一般情況下，我們引入外部js檔案，是要呼叫js檔案中的函式。在vue專案中，我們首先要使用export命令將這個函式丟擲，然後才能在其他的vu...
專案中引入字型
font face html,body蘋方提供了六個字重，font family 定義如下 蘋方 簡 常規體 font family pingfangsc regular,sans serif 蘋方 簡 極細體 font family pingfangsc ultralight,sans serif...