Vue整合ElementUI，组件使用教程，适合新手，阿里P8大牛从零开始教前端开源框架

<template>
  <el-row>
    <el-col :span="12">
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-col>
    <el-col :span="12">
      <el-button plain>普通按钮</el-button>
      <el-button type="primary" plain>主要按钮</el-button>
      <el-button type="success" plain>成功按钮</el-button>
      <el-button type="info" plain>信息按钮</el-button>
      <el-button type="warning" plain>警告按钮</el-button>
      <el-button type="danger" plain>危险按钮</el-button>
    </el-col>
  </el-row>
</template>
 
<script>
export default {
  name: 'ButtonExample'
}
</script>
 
<style>
/* 添加一些自定义样式 */
.el-button--primary {
  background-color: #f56c6c;
  border-color: #f56c6c;
}
</style>

这个例子展示了如何在Vue项目中使用Element UI库的el-button组件。它包括了不同类型的按钮以及如何使用el-row和el-col进行布局。同时，我们还演示了如何通过CSS添加一些自定义样式到按钮上。这个例子适合新手参考学习，可以帮助他们快速了解如何在Vue项目中整合和使用Element UI组件库。