vue3+elementpuls
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- 导入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css" />
<!-- 导入 Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
<!-- 导入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
<title>Element Plus demo</title>
</head>
<body>
<div id="app">
<button onclick="abc()">开始</button>
<el-button @click="createComponent">{{ message }}</el-button>
<component :is="componentName"></component>
</div>
<script>
const App = {
methods: {
//根据数据源和打印模板创建打印组件
createComponent: function () {
console.log("createComponent");
//创建组件
app.component("myc", {
template: "<div>myComponent</div>", //打印模板
});
//更新组件
this.componentName = "myc"; //显示打印组件
},
},
data() {
return {
componentName: "",
message: " Hello Element Plus",
};
},
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
Vue2+ElementUI 模板
<!doctype html>
<html lang="zh-cn">
<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>