全局样式，定义特定calss，覆盖element组件样式

要定义全局样式可以创建一个样式文件，里面用来存储全局的样式文件，然后，统一引入，统一注册到全局上。

然后在main.js里统一注册，要注意注册的位置，注册有先后，后面的样式会覆盖前面的样式，如果要覆盖element的样式，引入的位置要放在element样式的后面

在less或者scss中都有变量可以定义一些样式，只需使用变量就可。这样可以定义全局的变量，后面有样式颜色调整的时候，直接改变变量就好了，不用更改每个样式

//variables.less文件中定义一些全局的变量，别的地方需要使用的直接引入再使用这些变量就可以了
//全局的主要色调
//less的变量为@符号,scss变量符号为$
@red: #C03639;
@green: #30B08F;

在这个文件里面，可以覆盖掉element组件中button按钮type为primary和info的颜色
如果要改变element的样式，就定义这样的样式去改变，不要直接改变源码中的样式

//引入全局的色调变量
@import './variables.less';

//重置element组件中button按钮的颜色
.el-button--primary {
  --el-button-font-color: #ffffff;
  --el-button-background-color: @red;
  --el-button-border-color: @red;
  --el-button-hover-color: @red;
  --el-button-active-font-color: #e6e6e6;
  --el-button-active-background-color:@red;
  --el-button-active-border-color: @red;
}

.el-button--info {
  --el-button-font-color: #ffffff;
  --el-button-background-color: @green;
  --el-button-border-color: @green;
  --el-button-hover-color: @green;
  --el-button-active-font-color: #e6e6e6;
  --el-button-active-background-color:@green;
  --el-button-active-border-color: @green;
}

还可以给特定的element组件库中的组件添加样式，只需要在样式里面加一个其它的class类，这样只有定义了这个class的组件样式才会生效。

//在需要的element组件form表单中加入class下面对应的,就会显示这个样式,需要配合el-col使用,这样样式才不会出问题
.form-colunm-2 .el-form-item{
  width: 49%;
  display: inline-block;
}
.form-colunm-3 .el-form-item{
  width: 32%;
  display: inline-block;
}
.form-colunm-4 .el-form-item{
  width: 24%;
  display: inline-block;
}
.form-colunm-5 .el-form-item{
  width: 20%;
  display: inline-block;
}

这个样式只有加了class='form-colunm-2'这些class的form表单才有生效

//加入了class='form.colunm-2'这个样式才会生效
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form-colunm-2" >
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>