nuxt ui

安装nuxt

1
npx nuxi@latest init <project-name>

app.vue内容

1
2
3
4
5
6
7
<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtPage />
  </div>
</template>

安装 @nuxt/ui

1
npm install -S @nuxt/ui

之后，在在 nuxt.config.ts 文件下

1
2
3
4
export default defineNuxtConfig({
	// 改动只看下面这一行，别的不用管
  modules: ['@nuxt/ui']
})

新建pages文件夹存放index.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div class="w-full flex items-center justify-center flex-col min-h-screen bg-gradient-to-br from-sky-200 to-yellow-200">
        <div class="my-24 flex flex-col items-center space-y-8">
            <h1 class="text-6xl font-bold text-center">
                独立开发者KaBu_Chino正式出发
            </h1>
            <p class="text-2xl text-gray-500 text-center">
                我们正在开发一系列有趣的工具，敬请期待！！！
            </p>
            <img class="w-96" src="https://s2.loli.net/2024/07/31/uLRhH6gKFI5xofc.jpg" alt="KaBu_Chino的Logo" />
            

            <UButton class="w-48 flex items-center justify-center hover:bg-gray-200" to="https://github.com/KaBu-Chino" target="_blank" variant="outline">立即关注</UButton>
        </div>
    </div>
</template>
许可协议

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。

分享文章