Element-UI 本地离线引入
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element-ui官网只提供了两种引入方式
因项目需求Element-UI 需要离线使用
查找资料找到了使用方法
demo.html 测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./elmentui.css">
</head>
<body>
<el-button type="primary">搜索</el-button>
<script src="./elementui.js"></script>
</body>
</html>
代码运行发现没有效果 控制台还有一个错误
因为下载的element 是基于Vue的版本所以还用引入vue.js
项目引入:
<script src="./vue.js"></script>
<script src="./elementui.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
vue.js 要放在element.js 前面否从报错
调整引入顺序后效果
至此Element-UI就可以正常使用了
但当使用icon图标时 发现
根据控制台提示 发现少了.ttf和.woff两个文件
配置icon.css
@font-face {
font-family: element-icons;
src: url(./element-icons.woff) format('woff'), url(./element-icons.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}
项目引入icon.css
icon图标可以正常使用
完整资源下载
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)