element-ui的使用（一） element-ui的使用（一）

一、安装与引入

element-ui的官方文档:https://element.eleme.cn/#/zh...

首先，我们在终端中输入npm i element-ui -S，就可以把element-ui下载下来，之后，需要在main.js项目入口文件中引入element-ui,注意，这里有两种选择：

第一就是全盘引入import Element-UI from 'element-ui'
第二种就是按需引入，比如说你需要用到Button,那么你就import {Button} from 'element-ui'

注意我们之前引入的只是element-ui的组件，但是具体的样式还没有引入，因此需要加上import 'element-ui/lib/theme-chalk/index.css',这个是容易被忽略的地方，需要强调。

之后还需要声明一下Vue.use(Element-UI),这样我们才可以在vue的其他组件中使用
个人还是比较推荐按需引入，毕竟我们的项目中不会把element-ui的全部组件都会用到，只可能最多十几种，所以为了整个项目，还是按需引入的好一些
二、配合Vue制作登录界面 1.引入el-form表单
el-form有很多种，但是我的需求是用户登录，那么只需要两个input文本框就好。我直接引用的是官网组件中Form表单的“自定义校验规则”,这个用着方便些。
【element-ui的使用（一）】大致代码如下，简单的账户和密码验证：

.el-input>>> .el-input__inner{ width: 10%; }

这里面有几个问题需要提前说一下：首先最重要就是我们在引用elment-ui的组件时，使用样式都是默认的，我们可以修改，但是不可以直接在element-ui的默认样式文件index.css中修改，而是利用到了深度选择器进行样式重写，向下看...
2.样式重写
样式重写中涉及到的重点就是深度选择器，那我们来详细聊聊深度选择器.
首先，vue与Element-ui兼容性很好，但是Element-ui用起来样式有限，所以我们必须对其内部的css进行一定的覆盖去更改它。
我用el-input 输入框中的多行文本框的时候

发现字体始终为宋体且字号很小。于是我加了

依然没有任何变化。
后来想到去覆盖input默认css样式。我打开了node_modules，找到_element-ui@1.4.13@element-ui，点进去打开lib文件夹下theme-default中的input.css，这是el-input默认样式，ctrl+F搜索font-size，找到了el-textarea__inner
这个里面有默认的font-size:14px; 但是不能在这上面进行修改。所以回到你的项目网页。添加如下内容：

.el-textarea__inner{ font-family:"Microsoft"; font-size:20px; }

进行覆盖即可，上面控件也不用额外加class修饰。对于单行文本框也可以这样进行修改,加入el-input__inner{}即可。
最后，如果进行上述修改，会发现其他页面的样式也同时会被修改，这个时候需要用scoped和>>>符号进行穿透。
css里面写

.textarea >>> .el-textarea__inner{ font-family:"Microsoft" !important; font-size:20px !important; }

3.完善登录验证
首先保证后台服务器需要连接数据库，并且是运行状态
我们在验证表单的时候，也就是登录的用户名和密码，除了要符合前端定制的最基本的填写要求，还要保证和服务器内存储的数据相同，也就是需要将我们填写的用户名和密码组成提交给服务器，由服务器来判断并返回具体的status状态码，如果是200代表成功，否则，失败

.login_container { background-color: #2b4b6b; height: 100%; }.login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); .avatar_box { height: 130px; width: 130px; border: 1px solid #eee; border-radius: 50%; padding: 10px; box-shadow: 0 0 10px #ddd; position: absolute; left: 50%; transform: translate(-50%, -50%); background-color: #fff; img { width: 100%; height: 100%; border-radius: 50%; background-color: #eee; } } }.login_form { position: absolute; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }.btns { display: flex; justify-content: flex-end; }