<template>
  <div>
    <h2>Console.log 测试</h2>
    <button @click="testConsole">测试 Console.log</button>
    <p>{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('')

const testConsole = () => {
  console.log('测试 console.log 是否正常工作')
  console.warn('测试 console.warn')
  console.error('测试 console.error')
  message.value = '请查看浏览器控制台，应该能看到上述日志信息'
}
</script>

<style scoped>
div {
  padding: 20px;
  text-align: center;
}

button {
  padding: 10px 20px;
  margin: 10px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #40a9ff;
}
</style> 