1. 程式人生 > >vue 引入 阿里巴巴向量圖的步驟

vue 引入 阿里巴巴向量圖的步驟

2:建立自己的專案:

按照模板填寫:

Symbol 字首   和 Font Family  必須這樣寫, 因為 在vue裡面 是el-icon-xxx 這樣引入的,避免命名不一致。

專案建立完成:

回到 向量圖圖主頁, 找到自己需要的圖示, 加入專案。

1:進入圖示庫

2:找到自己要的圖示

3:在自己要的圖示上 點選 購物車圖示 加入購物車

4:點選右上角的購物車

5:這裡會有自己選擇加入的圖示, 點選  新增至專案  的按鈕

6:選擇剛剛建立的專案

7: 選擇  Font class

8:下載至本地

9: 下載後解壓

10: 刪除紅色標記的四個檔案

11:在vue專案的 src > ssets 下新建  icon資料夾, 將剩下的六個檔案 放進去

12: 在 main.js 中 引入  iconfont.css 檔案

13: 在頁面中引入 圖示, 在倉庫中, 圖示的名字是   el-icon-denglu, 那麼在頁面中 就引入這個名字就可以了。

介面效果: