elementUI本地引入

背景是公司需要做一个后台管理系统，但是要求不要vue的cli，我看了一下elementui挺适合的，但是官网上的教程只是说了用vue的cli引入和cnd引入，没有说如何本地引入，百度看了一下，关于这方面的文章也比较少，所以就自己整了一下，下面是代码。
首先
把主要文件下载下来，，下载下来(点击，粘贴复制即可，其他的一样)

然后
我们修改一下官方的例子，具体代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="sass/">
</head>
<body>
  <div >
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
<script src="js/"></script>
<script src="js/"></script>
<script>
  new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
</script>

</html>

出来的效果跟官网的一样
在这里插入图片描述

但是在你用icon的时候发现整个页面都是空白的，原因是里面有引入两个字体样式，如图所示：
在这里插入图片描述
所以我们也要把这两个字体样式拿下来，地址是：

下载好了之后就放到你的目录上，修改路劲就可以了。

我自己试的整体效果
在这里插入图片描述

我的目录
在这里插入图片描述

秒客网

elementUI本地引入

elementUI本地引入

相关文章