猿创征文｜如何使用 Element UI？以登录框为例带你感受一下基础使用_element 登录框_小余努力搬砖

irpas 02-07 2524

前言

一、安装（所有内容）

二、按需引入

三、案例演示

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这种表单的样式，所以需要使用到<el-input><el-input/> <el-button><el-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> </el-form-item> <el-form-item prop="password"> <el-input prefix-icon="el-icon-view" type="password" v-model="form.password" placeholder="请输入密码"></el-input> </el-form-item> <el-button type="primary" @click="btn" style="width: 100%;">登录</el-button> </el-form> </div> <div class="c"></div> </div> </div> </template> <script> export default { name: 'Login', data() { return { form:{ username:'', password:'' }, forRules:{ username:[ {required:true,message:'用户名不能为空',trigger:'blur'}, {min:3,max:10,message:'请输入3~10个字符',trigger:'blur'} ], password:[ {required:true,message:'密码不能为空',trigger:'blur'}, {min:3,max:10,message:'请输入3~10个字符',trigger:'blur'} ] } }; }, mounted() { }, btn(){ // this.$refs.fromRef.validate(isOK=>{ // if(isOK){ // console.log('1'); // }else{ // alert('请正确输入') // } // }) this.$refs.fromRef.validate().then(()=>{ }).catch(()=>{ // alert('请正确输入') }) } }, }; </script> <style scoped> .login_main{ height: 100%; width: 100%; background: url(../assets/img/login_bg.jpg) no-repeat; background-size: cover; } .login_box{ width: 900px; height:515px; background: #fff; box-shadow: 0px 0px 10px 5px #ddebfe; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); border-radius: 12px 0px 0px 12px; } .login_box .l{ background: url(../assets/img/login_left.jpg) no-repeat; width: 350px; height: 515px; border-radius: 12px 0px 0px 12px; } .login_box .r{ width: 550px; box-sizing: border-box; padding: 30px; } h1{ text-align: center; color: #4c4c4c; } .button{ width: 100%; } </style>

router代码

routes:[ // 注册组件 // {path:'/',redirect:'/login'}, {name:'login',path:'/login',component:Login} ] })

assets css代码引入到app.vue中

html,body,div,ul,p{ margin: 0; padding: 0; } html,body,#app{ height: 100%; } .l{ float: left; } .r{ float: right; } .c{clear: both;}

两张图片也放在assets使用时引入，如下点击自取图片

背景图片

登录图片

结束语：分享到此就结束啦，有问题随时私聊