问题提出
这个是官网（elementUI plus官网）上的样式：
在引入到自己的代码程序中，我也希望用这样的样式，但是却没有任何的反应
解决办法
我并没有找到vue3的写法，但是通过vue2的写法能够显示出来：
下面就是我找到的能够显示出来的方法（）
运行结果就是（成功按钮改为了vue2的写法，警告按钮还是原来的官网上的写法，然后能够通过界面进行展示成功按钮，警告按钮无任何效果）：
后记
将写法改为vue2的写法能够快速解决问题，但是vue3应该怎么来写，这个等后面研究了再来写，但是我找到了一篇别人的文章：
https://blog.csdn.net/qq_40185480/article/details/110926273
希望对于那些希望尽快知道的朋友提供帮助
附：
我的页面的html代码程序(需要几个js文件和css，在我分享的资源下载里面能够找得到，免费下载的（本来人家官网也有）)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆</title>
<script src="axios.min.js"></script>
<script src="vue3.js"></script>
<!-- 加载样式 在css样式中 它明确定义了fonts的路径 和该文件同文件夹下-->
<link rel="stylesheet" href="elementUI/index.css">
<script src="elementUI/index.full.js"></script>
<style>
#box{
/*border: 1px solid red ;*/
margin: 200px auto;
width: 400px;
height: 300px;
}
#app{
/*background: url("images/鬼刀2.jpg") no-repeat;*/
background: url("images/海边，少女.jpg") no-repeat ;
background-size: cover;
/* size的cover是保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同*/
/* size的contain是保存图像的狂爱比例 将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含*/
}
</style>
</head>
<body id="app">
<div id="box">
<el-card class="box-card">
<h3 >登 录</h3>
<el-divider></el-divider>
<el-form status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="账户" prop="">
<el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" >
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-link type="primary" style="margin-right: 20px">注册</el-link>
<el-link type="primary">忘记密码？</el-link>
<el-button type="primary" style="float:right;margin-right: 20px" @click="login">登录</el-button>
<el-button :plain="true" @click="open1">成功</el-button>
<el-button :plain="true" @click="open3">警告</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
<script>
// import { defineComponent } from 'vue3'
// import { ElMessage } from 'element-plus'
var data = {
data(){
return{
loginForm:{
username:"",
password:"",
},
}
},
created(){
},
methods:{
open1() {
this.$message.success({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open3() {
ElMessage({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
login(){
ElMessage.success({
message: '恭喜你，这是一条成功消息',
type: 'success'
});
console.log(this.loginForm);
// alert("提交信息");
//发送数据请求到后端去
// axios.post("/login",this.loginForm).then(res=>{
// alert(res.data);
// this.$message.success({
// })
}
}
};
const app = Vue.createApp(data);
// elementui 的plus版本 需要加上 下面这一句话，
app.use(ElementPlus);
app.mount("#app");
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/114567.html
