elementUI本地引入

最新推荐文章于 2024-05-22 11:23:12 发布

bingot

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量3w

点赞数 24

分类专栏： vue 文章标签： elementui vue

本文链接：https://blog.csdn.net/bingot/article/details/85071075

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

elementUI本地引入

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="sass/element.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="js/vue.js"></script>
<script src="js/element.js"></script>
<script>
  new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
</script>

</html>

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

但是在你用icon的时候发现整个页面都是空白的，原因是element.css里面有引入两个字体样式，如图所示：
在这里插入图片描述
所以我们也要把这两个字体样式拿下来，地址是：
element-icons.woff
element-icons.ttf
下载好了之后就放到你的目录上，修改路劲就可以了。

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

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

bingot

关注

24
点赞
踩
85

收藏

觉得还不错? 一键收藏
19
评论
elementUI本地引入

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

扫一扫