本文中部分代碼來自ElementUI官網
一、樣式無法正常顯示
1、檢查CDN引用文件路徑
檢查引入elementUI的CSS、JS文件的路徑是否正確【官網樣例】
<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>
**建議將引用文件的網址複製到瀏覽器地址欄裏打開，然後將全選拷貝下來存到本地,以免因Element 升級受到非兼容性更新的影響**
2、檢查是否引入Vue.js文件
vue.js文件引入位置必須在elementUI的JS文件之前
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
3、elementUI 必須在Vue作用域裏
如下代碼段：
vue作用域：el:'#app'
elementUI組件寫在必須在<div id="app"></div>，否則無法顯示
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
二、elementUI圖標等顯示異常
本地化elementUI組件CDN文件後，圖標顯示異常
1、未引用文字圖標庫文件
（1）問題狀態
在瀏覽器打開頁面——>F12——>network
查看element-icons.woff element-icons.ttf 這兩個字體圖標庫文件是否引入
如果這兩個文件404則未找到（或路徑錯誤）字體圖標庫文件
（圖中爲element-icons1.woff是爲了演示未找到（或路徑錯誤）字體圖標庫文件狀態）
（2）解決辦法
-
進入elementUI的CSS文件 先將
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">文件本地化（複製粘貼到本地） -
打開後查找關鍵字
@font-face
- 檢查這兩個URL路徑是否正確，或者文件是否存在。
官方字體圖標庫下載路徑
點擊文件——>點擊view raw下載 （注意版本選擇，一般是最新的就能用）
2、已經引用字體圖表庫文件
（1）問題狀態
已經引入element-icons.woff element-icons.ttf 這兩個文件，而且路徑也正確，但是圖標依然不顯示，或顯示錯誤
（2）解決辦法
這種情況一般是字體圖標庫文件和引入的elementUI的css文件版本不一致或版本差距過大，更換到版本一致的字體圖標庫文件即可
下載方法在上兩張圖前面
Tips:一般引入CSS JS文件去官方網站下載或者引用，別百度搜文章引用別人文章裏的CDN鏈接或文件，這樣很有可能會出現版本不匹配的問題。