Vue element 圖標是一款非常實用的前端圖標庫。該庫內置了大量的圖標,方便開發人員快速添加圖標及自定義樣式,提高開發效率。
要使用 Vue element 圖標,必須先安裝相關的依賴。首先,需要安裝 element-ui 和 axios 兩個庫,可以使用以下命令:
npm install element-ui -S npm install axios -S
然后,在項目根目錄下的 main.js 文件中引入 element-ui 和 axios:
import Vue from 'vue' import ElementUI from 'element-ui' import axios from 'axios' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) Vue.prototype.$axios = axios
接下來,就可以在項目中使用 Vue element 圖標了。常見的使用方式是在頁面中添加 icon 組件,并指定要渲染的圖標名稱:
<template> <div> <el-button type="primary"> <i class="el-icon-search"></i>搜索 </el-button> </div> </template>
上面的代碼中,el-icon-search 就是要渲染的圖標名稱。除了直接使用 class 名稱,也可以使用 icon 組件來渲染圖標:
<template> <div> <el-icon name="el-icon-edit"></el-icon> </div> </template>
除了內置的圖標,Vue element 圖標還支持自定義圖標。具體的自定義方法可以參考官方文檔。