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表单的“自定义校验规则”,这个用着方便些。

大致代码如下，简单的账户和密码验证：

这里面有几个问题需要提前说一下：首先最重要就是我们在引用elment-ui的组件时，使用样式都是默认的，我们可以修改，但是不可以直接在element-ui的默认样式文件index.css中修改，而是利用到了深度选择器进行样式重写，向下看...

2.样式重写

样式重写中涉及到的重点就是深度选择器，那我们来详细聊聊深度选择器.

首先，vue与Element-ui兼容性很好，但是Element-ui用起来样式有限，所以我们必须对其内部的css进行一定的覆盖去更改它。

我用el-input 输入框中的多行文本框的时候

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

依然没有任何变化。

后来想到去覆盖input默认css样式。我打开了node_modules，找到[email protected]@element-ui，点进去打开lib文件夹下theme-default中的input.css，这是el-input默认样式，ctrl+F搜索font-size，找到了el-textarea__inner

这个里面有默认的font-size:14px;但是不能在这上面进行修改。所以回到你的项目网页。添加如下内容：

进行覆盖即可，上面控件也不用额外加class修饰。对于单行文本框也可以这样进行修改,加入el-input__inner{}即可。

最后，如果进行上述修改，会发现其他页面的样式也同时会被修改，这个时候需要用scoped和>>>符号进行穿透。

css里面写

3.完善登录验证

首先保证后台服务器需要连接数据库，并且是运行状态

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