关于element UI的布局、样式失效问题
最近在学习javaweb时，接触了Element UI这个基于vue的网站组件库。在没有使用webpack的情况下，想用IDEA简单的测试一下它的使用，结果却给了我当头一棒😭。
除了Element官方写的Hell world页面能正常运行。
组件基本不能正常显示
一、错误演示
1、官方的Hell world页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</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>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el:"#app",
data: function() {
return { visible: false }
}
})
</script>
</body>
</html>
正常显示
2、Element组件（以Layout布局为例）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.el-row {
margin-bottom: 20px;
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
</head>
<body>
<div id="app">
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
未能正常显示
二、解决办法
引入整个element-ui文件到本地进行使用即可。
下面是我解决问题时的各种尝试方案😂。
<!--
一、官网文件链接失效？？？🤔 -->
<!--
1、Element UI官方入门教程 ✖
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
-->
<!--
2、单独下载基本样式与js文件 ✖
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
-->
<!--
二、解决办法-->
<!--
3、将整个element-ui文件下载到本地使用 ✔
-->
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 注意：使用Element提供的vue链接地址也会导致不成功👍，所以使用vue官网单独下载的vue.js文件 -->
<script src="js/vue.js"></script>
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
正常显示样例：
三、element-ui文件本地下载
但是很遗憾的是，Element官网并没有element-ui文件下载的入口。
解决办法：
参考链接（https://blog.csdn.net/ttphoon/article/details/104653785）
