Vue2+ElementUI 模板
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-header,
.el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>
<h1>{{data1}}</h1>
<el-button type="primary" @click="btnClick">主要按钮</el-button>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
btnClick: function () {
this.$message('你点击了按钮');
}
},
data: function () {
return {
data1: 'Main'
}
}
});
</script>
</html>