element-ui本地使用

小鱼儿 2022-12-28 12:42 237阅读 0赞

对于element-ui的使用，官网给了这么一个例子：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      
      <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>
      
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
      
      <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");

出于好心很多博客贴出了下载地址，这时就遇到了另一个坑，版本问题，导致下载了还是无法使用。所以我们要去[官网给的地址][Link 1]去下载。就是下边那两个文件：

![e7ed588ab76fb14695d5539883600825.png][]

点进去，然后View Raw下载就好了。两个文件放到之前下载的index.css同级目录，新建一个fonts文件夹里，这样什么都不用修改就可以。

![baf3e8c9fe680385b5f7c3e66030187d.png][]

就像这样：

![803be89fc1ab3054fefd4e75f9029aa2.png][]

[Link 1]: https://unpkg.com/browse/element-ui@2.14.1/lib/theme-chalk/fonts/
[e7ed588ab76fb14695d5539883600825.png]: /images/20221120/0e1a4a743fd549ee8d8ee49f75429c42.png
[baf3e8c9fe680385b5f7c3e66030187d.png]: /images/20221120/b9e0ebbc9e38420f91a9a97f86657518.png
[803be89fc1ab3054fefd4e75f9029aa2.png]: /images/20221120/8bd1169e50da493581c61bb96bf0237e.png