element-ui本地使用


  对于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的答案,解决的其实就是一个版本问题。如果你不幸先搜到了知乎的答案,我还可以为你洗洗眼睛。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM