猿创征文｜如何使用 Element UI？ 以登录框为例带你感受一下基础使用_element登录框

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

目录

前言

一、安装（所有内容）

二、按需引入

三、案例演示

1.案前整理

2.代码演示（后附源码）

3.源码

---

前言

Element-ui，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

一、安装（所有内容）

npm i element-ui -S   终端安装

在main.js中引入，此方法引入了所有功能，会导致项目文件较大，推荐按需引入，需要什么引入什么

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

二、按需引入

npm i element-ui -S 终端安装

npm install babel-plugin-component -D  安装 开发依赖

修改babel.config.js

module.exports = {
  presets: [
    '@vue/app',
["@babel/preset-env", { "modules": false }]
  ],
   plugins: [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ]
    ]
}

新创一个专属的引入文件夹与src同级，引入想要引入的内容

import Vue from 'vue'
import {Button,Form,FormItem,Input,Col,Row,Message} from 'element-ui';

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Col)
Vue.use(Row)
// 弹出框挂载到vue原型身上，这样每个组件都是用this.message
Vue.prototype.$message = Message

main.js引入文件夹路径，这里拿我的为例

import ‘@/plugins/element’

三、案例演示

1.案前整理

提前准备了图片，样式，来配合实现一个较为美观的登录框，如果需要源码样式，私信留下邮箱免费领取，看见就回

这里我还使用了简单的路由效果，来展现跳转页面，下面展示基础的效果

2.代码演示（后附源码）

首先我们需要创建一个路由组件，将内容样式导入，这里直接跳过，样式代码后附，我们直接看如何引入element的代码

虽然官网已经有了演示代码，但是我们要简单了解一下，每一步的意义

如上的演示，我们很清楚需要利用的是input、button这种表单的样式，所以需要使用到 按钮是为了最后判断是否满足后台数据（此案例没有），也可以一起判断是否满足所有的规则，需要使用点击事件触发绑定@click

第一步在新的组件中写入以下代码，也可以说是路由组件

如上图在v-from中使用到了:model :rules来绑定，我需要在data中写入对应的绑定内容

登录按钮判断是否全都满足

在父组件APP中我们需要写入路由、占位符、给router-link绑定了v-show是为了让点击登录，登录按钮就会消失，其中也使用了element自带的美化按钮，直接使用，前提都是自定义安装中要有

router代码中注册

3.源码

APP.vue代码

<template>
	<div id="app">
		<!-- 路由占位符 -->
<router-link to="/login" v-show="isshow"> <el-button type="primary" class="button" >登录</el-button></router-link>

<router-view></router-view>

	</div>
</template>

<script>
import Login from './views/Login.vue';

	export default {
    name: "app",
    components: { Login },

	computed:{
		isshow(){
		return	this.$route.name=='login'?false:true
		},
	
	}
}
</script>
<style>
@import url('./assets/style.css');
.button{
	position: fixed;
	z-index: 9999999;
}
</style>

路由组件代码

<template>
   <div class="login_main">
		<div class="login_box">
			<!-- 登录左边广告框 -->
			<div class="l"></div>
			<div class="r">
				<h1>小余努力搬砖</h1>
				<el-form :model="form" :rules="forRules" ref="fromRef">
				  <el-form-item prop="username">
						<el-input prefix-icon="el-icon-s-custom" v-model="form.username" placeholder="请输入用户名" ></el-input>


![img](https://img-blog.csdnimg.cn/img_convert/950525ef75bcd50a827845980cbf306e.png)
![img](https://img-blog.csdnimg.cn/img_convert/a8b419373cd8515304d433f10626094d.png)
![img](https://img-blog.csdnimg.cn/img_convert/78b51a979a805c23951e40fd6cbf09fb.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

外链图片转存中...(img-4Sg5iulA-1715146092869)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**