<template>
    <div id="app" class="demo-container">
      <!-- 按钮组件示例 -->
      <section class="demo-section">
        <h2>按钮组件集合</h2>
        <div class="flex">
          <GuipButton type="ignore">哈哈</GuipButton>
          <GuipButton size="big">哈哈</GuipButton>
        </div>
      </section>
      
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // 表格数据示例
        tableData: [
          { id: 1, name: '张三', age: 25 },
          { id: 2, name: '李四', age: 30 }
        ],
        columns: [
          { prop: 'id', label: 'ID' },
          { prop: 'name', label: '姓名' },
          { prop: 'age', label: '年龄' }
        ]
      }
    },
    created() {
        console.log('当前组件注册情况:', this.$options.components)
    }
  }
  </script>
  
  <style scoped>
  .demo-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
  }
  .demo-section {
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  h2 {
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  </style>