Element UI Button 使用教程：从入门到示例

可以使用以下步骤来使用 Element UI 的 Button 组件：

1. 在 HTML 文件中引入 Element UI 库的 CSS 和 JS 文件。

   ```html
   <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <script src="https://unpkg.com/element-ui/lib/index.js"></script>
   ```
   

2. 在 Vue 组件中使用 Button 组件。

   ```html
   <template>
     <div>
       <el-button type="primary">Primary</el-button>
       <el-button>Default</el-button>
       <el-button type="success">Success</el-button>
       <el-button type="warning">Warning</el-button>
       <el-button type="danger">Danger</el-button>
       <el-button type="info">Info</el-button>
     </div>
   </template>
   ```
   
   以上代码将在页面中创建 6 个不同类型的 Button。其中，`type` 属性指定 Button 的样式类型，可以是 `'primary'`、`'default'`、`'success'`、`'warning'`、`'danger'`、`'info'` 中的一个。默认为 `'default'` 类型。
   

3. 可以添加 `@click` 事件来响应 Button 的点击事件。

   ```html
   <template>
     <div>
       <el-button type="primary" @click="handleClick">Click me!</el-button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         console.log('Button clicked!')
       }
     }
   }
   </script>
   ```
   
   以上代码将在页面中创建一个带有 `@click` 事件的 Button，当用户点击 Button 时，将在控制台中输出 `Button clicked!`。