对于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文件夹里,这样什么都不用修改就可以。
就像这样:
后话:如果你看过了CSDN的答案,解决的其实就是一个版本问题。如果你不幸先搜到了知乎的答案,我还可以为你洗洗眼睛。