5.怎么使用Element ui来做一个前端登录页面

已于 2024-08-23 23:03:15 修改
阅读量615 收藏 1
点赞数 10
分类专栏： 从0开始做一个前后端分离项目 Vue 文章标签： 前端
于 2024-07-31 17:39:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55121347/article/details/140826891
版权

找到Layout 布局

他通过基础的 24 分栏，迅速简便地创建布局。

找一个对齐方式

这个就不错,找到对应的代码

这个

复制进入idea

引入我们的图片和文字

我这里图片有点问题

然后我再添加一条分割线



加入表单校验

把里面的代码同上加入idea

结果

对表单内容进行调整

调整一下

修改校验条件

修改校验规则

将中间的线加长

效果

修改表单的一些细节

现在我们要上下居中,使用flex

这样就会居中对齐

结果

可以这样调整图片大小

最后就完成了一个页面

努力学习的小宇同学
关注
  • 10
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何快速入门Element-UI：打造高效美观的前端界面
06-10 1377
Element-UI 是一款基于 Vue.js 的开源组件库，提供了丰富的 UI 组件，可以帮助开发者快速构建美观、响应式的前端界面。本文将详细介绍如何快速入门 Element-UI，包括环境搭建、组件使用、样式定制及常见问题解决方法，帮助你高效地使用 Element-UI 进行前端开发。
Vue+ElementUI搭建登陆页面
qq_64230952的博客
05-05 9890
1.使用vue-cli脚手架工具创建一个vue项目 2.安装elementUI插件依赖 注意 ：i 指的是 install 的缩写 npm install 下载全部依赖 npm install xxx -g 全局安装，下载到%NODE_HOME%\node_global npm install xxx -S 下载指定依赖,写入到package.json中的dependencies，当前项目 npm install xxx -D 下载指定依赖,写入到package.json中的...
ElementUI 登录页
06-17
最基础的ElementUI -登录页,适合新手查看，下载后运行npm install npm run dev然后访问http://localhost:8080/#/login就可以看到登录页面
element框架实现的登录界面
04-20
有两个输入框和一个提交按钮，一个输入用户名，另一个输入密码，点击提交按钮后发起一个 post 请求到 http://www.baidu.com
07-使用Element改版登录页面
寒雪谷
12-28 2708
使用Element改版登录页面 Vue项目实战系列 主要内容： 介绍Element 1 任务概述 前面我们已经开发了一版登录页面，基本上算是素颜了，在这个靠颜值吃饭的社会，素面朝天肯定不行，一定要开启美颜效果，要想达到即美颜，又不要花费太多的时间，只能借助一些组件。本节将教你使用Element来美颜我们的登录页面。 2 Element简介 官方是这样定义Element的： Element，一套...
使用Element ui 编写登录页面
热门推荐
前端开发小白9527
03-14 3万+
1 完整引入element ui 执行命令安装npm i element-ui -S mian.js中 完整引入 import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); 2 登录页 login.vue <template> .
使用Vue.js和Element-UI做一个简单登录页面的实例
10-18
在这篇文章中，作者讲述了如何利用Vue.js和Element-UI框架共同制作一个简单登录页面的实例。Vue.js是一个构建用户界面的渐进式JavaScript框架，而Element-UI是基于Vue 2.0的桌面端组件库，提供了丰富的组件以帮助...
使用element-ui开发的前端报表页面
02-08
在本文中，我们将深入探讨如何使用Element-UI框架来开发前端报表页面，这对于那些在前端布局上遇到困难或者对在Element-UI中嵌入V-Charts不太熟悉的同学来说，将是一份宝贵的指南。 Element-UI是一款基于Vue.js的...
HTML+Element-ui邮件管理前端界面
07-12
-- 必须先引入vue， 后使用element-ui --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"> <!-- 引入element 的组件库--> <script src="https://unpkg....
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，用于构建优雅的前端应用。这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要...
ElementUI框架搭建及组件使用+登录界面精美模版分享
最新发布
小谷同学的博客
06-25 2532
本篇文章围绕基于vue-cli脚手架搭建的项目如何使用elementUi组件，并分享了一个登录界面精美模版，以及使用 Element UI 进行项目开发时的注意事项，内容十分详细~创作不易，希望大家多多支持！
基于Vue element-ui的登录页面
weixin_48247966的博客
10-14 2322
页面展示 目录结构 在源码目录中创建如下结构： assets：用于存放资源文件 components：用于存放 Vue 功能组件 views：用于存放 Vue 视图组件 router：用于存放 vue-router 配置 App.vue 是主页面 可以展示router-view相当于一个占位符 用来显示路由指定的页面 <template> <div id="app"> <router-view/> </div> &l..
使用elementUI制作简易登录页面
NanChen的博客
11-17 1万+
<template> <div id="app"> <div id="admin"> <div class="pos" v-loading="loading"> <h1 class="adminh1">用户登录</h1> <el-form :model="ruleForm" status-icon :rules=".
最简单登录页面（详细代码分析element-ui基础）
码字码字码字
11-24 2378
简单登录页面,有问题请评论，优化更好了，毕竟我也不太会
ElementUI登录页面以及表单验证
kepler星球的博客
03-08 1697
<template> <div class="body"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="login-form" > <!-- 标题 --&...
Vue+element-Ui登录界面
babyxuqian的博客
08-09 3706
效果图片 html部分 <div class="login"> <div class="login_contetn"> <div class="login_title"> <h1>Login登录管理系统</h1> </div> <div class="login_input"> <el-input .
elementui登录页
FleshyAPP的博客
07-26 587
elementui登录页
element ui登录界面_第一个 ElementUI 页面 (登录页)
weixin_39801475的博客
12-21 2533
本节视频目录结构在源码目录中创建如下结构：assets：用于存放资源文件components：用于存放 Vue 功能组件views：用于存放 Vue 视图组件router：用于存放 vue-router 配置创建视图创建首页视图在 views 目录下创建一个名为 Main.vue 的视图组件；该组件在当前章节无任何作用，主要用于登录后展示登录成功的跳转效果；首页export default {na...
用vue element ui组件写一个前端网站页面
06-08
好的，我们来写一个简单的前端网站页面，使用的是 Vue.js 和 Element UI 组件库。 首先，我们需要在 HTML 文件中引入 Vue.js 和 Element UI 的 CSS 和 JavaScript 文件： ```html <!DOCTYPE html> <title>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值