官网上element-ui本地使用的例子:
<!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> <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> </html>
在本地使用,需要把通过CDN方式引入的文件下载到本地,本地替换后会出现图标无法显示的问题。
原因:缺少两个文件(index.css中需要)
@font-face{ font-family:element-icons; src:url(fonts/element-icons.woff) format("woff"), url(fonts/element-icons.ttf) format("truetype"); ... }
官方地址下载这两个文件
点进去,View Raw
下载到index.css同级fonts下
图标正常显示了
注意:版本要对应