Vue3 + Vite + TS + Tailwind CSS 项目模板

<script setup lang="ts">
import { ref } from 'vue'
import { PlusIcon } from '@heroicons/vue/solid'
 
// 定义一个响应式变量
const message = ref('Hello, World!')
</script>
 
<template>
  <div class="flex items-center justify-center h-screen bg-gray-50">
    <div class="flex flex-col items-center justify-center max-w-2xl">
      <span class="text-6xl font-extrabold text-blue-600">{{ message }}</span>
      <button class="btn btn-primary" @click="message = 'Hello, Vue!'">
        <PlusIcon class="h-5 w-5" /> Add Message
      </button>
    </div>
  </div>
</template>
 
<style scoped>
.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
</style>

这个简单的Vue 3组件模板展示了如何使用Vue 3的<script setup>语法，TypeScript和Tailwind CSS来创建一个响应式的应用程序。它包括了一个响应式变量message，一个按钮用于更新这个变量，以及一个Tailwind CSS样式的按钮。这个例子简单且直接地展示了如何将三者结合起来。