element-ui的使用（一）

.el-input>>>.el-input__inner{width:10%;}1、安装并导入element-ui官方文档：https://element.eleme.cn/#/zh...首先我们输入npmielement-in终端ui-S，可以下载element-ui。之后需要在main.js项目入口文件中导入element-ui。注意这里有两种选择：第一种是引入importElement-UIfrom'element-第二种ui'是按需引入。例如，如果您需要使用Button，则可以从“element-ui”导入{Button}。注意，之前我们只介绍了element-ui组件，具体的样式还没有介绍，所以需要加上import'element-ui/lib/theme-chalk/index.css'，这是一个容易被忽视的地方，需要强调一下。之后，我们需要声明Vue.use(Element-UI)，这样我们就可以在Vue的其他组件中使用它了。个人建议按需导入。毕竟我们项目中不会用到element-ui的所有组件，最多只有十几种，所以对于整个项目来说，还是按需引入比较好。只需要两个输入文本框。我直接引用的是官网组件中Form表单的“自定义验证规则”，使用起来比较方便。大致代码如下，简单的账号密码验证：.el-input>>>.el-input__inner{width:10%;}这里有几个问题需要提前说明一下：首先最重要的是，我们在引用elment-ui的组件时，使用的样式是默认的，我们可以修改它们，但不是直接在element-ui的默认样式文件index.css中修改，而是深度选择器用于样式重写，往下看...2.样式重写样式重写涉及的关键点是深度选择器，那我们就详细说说深度选择器。首先，vue与Element-ui的兼容度很高，但是Element-ui的样式有限，所以我们必须覆盖它内部的css来改变它。我用el-input输入发现字体一直是Song字体而且字号很小.所以我添加了仍然没有什么变化。后来想到重写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;但不能对其进行修改。所以回到你的项目网页。添加以下内容：覆盖即可，以上控件不需要额外的class修改。也可以这样修改单行文本框，只需要加上el-input__inner{}即可。最后，如果你做了上面的修改，你会发现其他页面的样式也会同时修改。这时候就需要使用scoped和>>>符号来穿透。在css中写.textarea>>>.el-textarea__inner{font-family:"Microsoft"!important;font-size:20px!important;}3.完善登录验证首先要保证后台服务器需要连接数据库并且处于运行状态。我们在验证表单时，即登录的用户名和密码，除了要满足前端自定义最基本的填写要求外，还要保证和服务器保存的数据一致，即就是，我们需要把我们填写的用户名和密码提交给服务器，服务器会判断并返回具体的状态码，如果是200就代表成功，否则就是失败。.login_container{background-color:#2b4b6b;高度：100%；}.login_box{宽度：450px；高度：300px；背景色：#fff；边界半径：3px；位置：绝对；左：50%；顶部：50%；转换：翻译（-50%，-50%）；.avatar_box{高度：130px；宽度：130px；边框：1px实心#eee；边界半径：50%；填充：10px；框阴影：0010px#ddd；位置：绝对；左：50%；转换：翻译（-50%，-50%）；背景色：#fff；img{宽度：100%；高度：100%；边界半径：50%；背景色：#eee；}}}.login_form{位置：绝对；底部：0；宽度：100%；填充：020px；box-sizing:border-box;}.??btns{display:flex;证明内容：flex-end；