要定義全域性樣式可以建立一個樣式檔案，裡面用來儲存全域性的樣式檔案，然後，統一引入，統一註冊到全域性上。

然後在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>