最近在學習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）