ElementUI框架搭建及组件使用+登录界面精美模版分享

目录

如何在项目中使用ElementUI组件？

① 通过npm 安装

② 完整引入 Element

③ 导入组件测试

登录界面搭建

注意事项

---

▐ 前言：

本篇文章将详解基于Vue-cli脚手架搭建的项目如何使用ElementUI ？所以在学习本篇文章内容之前建议您先学习vue-cli脚手架项目的搭建和学习~~

Vue-CLI脚手架项目搭建学习https://blog.csdn.net/2301_79263365/article/details/139896336?spm=1001.2014.3001.5501

▐ 关于ElementUI框架： 

Element UI 是一款流行的UI框架，将前端常用的一些组件进行了封装，是一套为开发者、设计师和产品经理准备的基于 Vue.js 2.0 的桌面端组件库。

Element UI 具有的显著特点：包含丰富的组件、易于定制、响应式设计、良好的文档和社区支持.

Element UI 框架大大提高了前端开发的效率和质量，使得开发者能够更专注于业务逻辑的实现，而不必花费过多时间在基础组件的构建和样式调整上。

▐ 官方网址：

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/

如何在项目中使用ElementUI组件？

---

① 通过npm 安装

在vue-cli项目的终端输入命令：npm i element-ui -S

npm i element-ui -S

安装成功后在vue-cli项目中的package.json文件中会自动添加elementui组件的版本信息，如图：

② 完整引入 Element

在 main.js 中添加以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

③ 导入组件测试

我们在官方文档中任意找一个组件，将其代码复制粘贴到我们项目的一个.vue组件中，并启动运行项目。若在浏览器上可以正常显示对应的UI组件，就表明ElementUi框架搭建成功，我们就可以在项目中直接使用官方提供的ui组件了！

登录界面搭建

---

▐  效果图：

▐ 完整代码： 

<template>
	<div class="login_face">
		<div class="login_box">

			<div class="img_box"></div>
			<!-- 登录表单 -->
			<div class="login_msg">
				<!-- 账号输入框 -->
				<el-input placeholder="请输入内容" v-model="account" clearable id="account"></el-input>
				<!-- 密码输入框 -->
				<el-input placeholder="请输入密码" v-model="password"  id="password" show-password></el-input>
				<!-- 登录按钮 -->
				<el-button id="btn" type="primary" @click="login()">登录</el-button>
			</div>
			
		</div>
	</div>
</template>

<script>
	/* 导出组件,并为组件定义数据,函数,生命周期函数 */
	export default {
		data() {
			return {
				account: '',
				password: ''
			}
		},
		methods: {
			login() {
				if (this.account.length == 0) {
					this.$message({
						message: '账号不能为空!',
						type: 'warning'
					});
					return;
				}
				if (this.password.length == 0) {
					this.$message({
						message: '密码不能为空!',
						type: 'warning'
					});
					return;
				}
				//后端交互


				//后端响应
				this.$router.push("/main");
			}
		}
	}
</script>

<style>
	.login_msg{
		width: 400px;
		height: 300px;
		margin: auto;
		margin-top: 25px;
		/* background-color: lightcyan; */	
	}
	#account,#password{
		width:400px;
		height: 50px;
		margin: 15px;
		margin:15px 0;
		background: rgba(255, 255, 255, 0.65);
		border-radius: 25px;
	}
	#btn{
		width: 220px;
		margin-left: 90px;
		margin-top: 25px;
		border-radius: 40px;
	}
	
	* {
		margin: 0px;
		padding: 0px;
	}

	.login_face {
		display: flex;
		height: 100vh;
		align-items: center;
		justify-content: center;
		background-image: url(assets/img8.jpg);
		background-size: cover;
	}

	.login_box {
		width: 550px;
		height: 450px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.38);
	}

	.img_box {
		width: 130px;
		height: 130px;
		background-image: url(assets/myimg.jpg);
		background-size: cover;
		border-radius: 50%;
		border: white solid 6px;
		opacity: 0.95;
		margin: auto;
		margin-top: -68px;
	}
</style>

此登录界面输入账号或密码为空时会向用户做出提示，若不为空点击登录会跳转到Main.vue组件

▐ 素材：

img8.jpg

myimg.jpg 

注意事项

---

使用 Element UI 进行项目开发时，需要注意以下几个方面：

版本兼容性：
确保 Element UI 的版本与您使用的 Vue.js 版本兼容。不同版本的组合可能会导致一些不可预测的错误。

组件的使用场景：
充分了解每个组件的适用场景和功能限制。例如，某些组件可能在特定的布局或交互需求下表现出色，但在其他情况下可能不太合适。

与其他库的冲突：
如果项目中同时使用了其他的 UI 库或插件，可能会存在样式或功能上的冲突。需要提前进行测试和解决。

样式定制：
虽然 Element UI 提供了默认的样式，但在实际项目中可能需要进行一定程度的样式定制。在定制样式时，要注意避免影响到组件的原有功能和交互效果

文档的参考：
始终参考官方文档来获取最新的特性、用法和注意事项。文档中可能会包含一些重要的更新和修复信息。

---

---

▐ 结语  

🎈到这里又要和大家说再见了，本篇文章详解了基于vue-cli脚手架搭建的项目如何使用ElementUi组件，并给大家分享了一个登录界面精美模版🎈希望我的分享能给您带来帮助，创作不易也欢迎大家三连支持，你们的点赞就是博主更新最大的动力🎈如有不同意见，欢迎评论区积极讨论交流，让我们一起学习进步！有相关问题也可以私信博主，评论区和私信都会认真查看的，我们下次再见🎈

海漫浩浩,我亦苦作舟!大家一起学习,一起进步!    本人微信：g2279605572