Nuxt3+Typescript+Unocss开源官网项目

以下是一个使用Nuxt 3、TypeScript 和 UnoCSS 的开源项目的基本框架代码示例：

nuxt.config.ts 配置文件:

import { defineNuxtConfig } from 'nuxt3'
 
export default defineNuxtConfig({
  // 配置选项
  buildModules: [
    // 引入Unocss模块
    '@unocss/nuxt',
    // ...其他模块
  ],
  unocss: {
    // UnoCSS 配置
    presets: [
      // 预设
    ],
  },
  // 其他配置...
})

pages/index.vue 页面文件:

<template>
  <main>
    <h1>欢迎来到我的网站</h1>
    <!-- 使用Unocss定义样式 -->
    <p class="text-center text-blue-500">这是一个居中且带有蓝色的文本。</p>
  </main>
</template>
 
<script setup lang="ts">
// TypeScript 脚本部分
</script>

components/MyComponent.vue 组件文件:

<template>
  <button class="btn">按钮</button>
</template>
 
<script setup lang="ts">
// TypeScript 脚本部分
</script>
 
<style scoped>
/* 使用Unocss定义样式 */
.btn {
  @apply bg-green-500 p-2 rounded;
}
</style>

这个示例展示了如何在Nuxt 3项目中使用TypeScript和Unocss。在nuxt.config.ts中配置了Nuxt和Unocss，在页面和组件中使用Unocss的at-rules定义样式。