Element-UI - Vue項目整合Element-UI & Icon圖示 & 自定義Icon圖示
部落客很久之前就想使用Element-UI，總是因為需要學習後端技術鴿了很久（部落客目前是偏後端），這裡部落客通過Vue項目來整合Element-UI。
引入Element-UI
npm安裝
Vue項目整合Element-UI會用到，這裡部落客介紹一下。
npm i element-ui -S -
i
install
-
-S
--save
package.json
dependencies
E:\workspace\WebStorm\blog\project>
E:\workspace\WebStorm\blog\project>npm i element-ui -S
...
+ [email protected]
added 6 packages from 6 contributors in 7.474s 
在Vue項目入口檔案
main.js
中添加：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI) 
這樣就可以在Vue項目中使用Element-UI了。
修改
App.vue
：
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>
<el-button type="primary" icon="el-icon-search">搜尋</el-button>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style> 很明顯Element-UI使用成功了。
CDN
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入元件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script> 建議使用CDN引入Element-UI時鎖定版本，以免将來Element-UI更新時受到非相容性更新的影響。
如版本
2.14.1
：
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<!-- 引入元件庫 -->
<script src="https://unpkg.com/[email protected]/lib/index.js"></script> 引入這些檔案後，就可以使用Element-UI了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>images</title>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<!-- 引入元件庫 -->
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</head>
<body>
<div id="app">
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>
<el-button type="primary" icon="el-icon-search">搜尋</el-button>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#app'
})
</script> 效果和上面是一樣的，Element-UI使用成功了。
Javascript檔案引入順序如下，因為Element-UI是基于Vue2的，是以要先引入Vue。
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script> Icon圖示
Element-UI提供了一套常用的圖示集合。直接通過設定類名為
el-icon-iconName
來使用即可，上面的代碼中也有涉及。
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p> 檢視有哪些圖示：
- 圖示集合
自定義Icon圖示
Element-UI提供的圖示還是有限的，是以需要自定義
Icon
圖示，通過下面代碼就可以自定義
Icon
圖示，很簡單吧（知道CSS即可）。
<style>
.el-icon-dog{
background: url(../img/dog.png) center no-repeat; /*使用自己的圖檔來替換*/
background-size: contain;
}
.el-icon-dog:before{
content: "dog"; /*before屬性中的content文本是用來占位的,必須有*/
font-size: 50px; /*可以設定字型大小來确定圖示大小*/
visibility: hidden; /*使用visibility: hidden;來隐藏文字*/
}
</style> 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>images</title>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<!-- 引入元件庫 -->
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</head>
<body>
<div id="app">
<i class="el-icon-platform-eleme"></i>
<i class="el-icon-delete-solid"></i>
<i class="el-icon-loading"></i>
<p class="el-icon-folder-add"></p>
<p class="el-icon-dog"></p>
<el-button type="primary" icon="el-icon-search">搜尋</el-button>
</div>
</body>
</html>
<style>
.el-icon-dog{
background: url(../img/dog.png) center no-repeat; /*使用自己的圖檔來替換*/
background-size: contain;
}
.el-icon-dog:before{
content: "dog"; /*before屬性中的content文本是用來占位的,必須有*/
font-size: 50px; /*可以設定字型大小來确定圖示大小*/
visibility: hidden; /*使用visibility: hidden;來隐藏文字*/
}
</style>
<script>
var vue = new Vue({
el: '#app'
})
</script> 效果如下圖所示：
很明顯效果符合預期。