element-ui官网只提供了两种引入方式![在这里插入图片描述](https://img-blog.csdnimg.cn/bd839bba999f4cc38164f03006b58891.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rip5rOJ6YeM55qE6bG8,size_20,color_FFFFFF,t_70,g_se,x_16)
因项目需求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>
代码运行发现没有效果 控制台还有一个错误
![在这里插入图片描述](https://img-blog.csdnimg.cn/cfdd6571ed444edc8d3c8dd21f3802cf.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rip5rOJ6YeM55qE6bG8,size_20,color_FFFFFF,t_70,g_se,x_16)
因为下载的element 是基于Vue的版本所以还用引入vue.js
项目引入:
<script src="./vue.js"></script>
<script src="./elementui.js"></script>
<script>
new Vue({
el: '#app'
})
</script>
vue.js 要放在element.js 前面否从报错
![在这里插入图片描述](https://img-blog.csdnimg.cn/4d4e0f2c7fab47afb37b79a5258312a8.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rip5rOJ6YeM55qE6bG8,size_20,color_FFFFFF,t_70,g_se,x_16)
调整引入顺序后效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/75c68acb7243409a98b97e0048436cb1.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rip5rOJ6YeM55qE6bG8,size_20,color_FFFFFF,t_70,g_se,x_16)
至此Element-UI就可以正常使用了
但当使用icon图标时 发现
![在这里插入图片描述](https://img-blog.csdnimg.cn/c353aceb5ad4446d957e4a8a1b70d0ab.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rip5rOJ6YeM55qE6bG8,size_20,color_FFFFFF,t_70,g_se,x_16)
根据控制台提示 发现少了.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
![在这里插入图片描述](https://img-blog.csdnimg.cn/2bb4d9120053425ab53368536cda6541.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5rip5rOJ6YeM55qE6bG8,size_20,color_FFFFFF,t_70,g_se,x_16)
icon图标可以正常使用