Vuetiful 项目教程

1. 项目介绍

Vuetiful 是一个基于 Vue.js 的组件库，旨在为开发者提供一个灵活且易于定制的 UI 组件集合。Vuetiful 的设计理念是提供一个“骨架”组件，开发者可以根据自己的需求进行样式和功能的定制，而不受预设样式的限制。Vuetiful 结合了 TailwindCSS 和 HeadlessUI，支持服务端渲染（SSR），并提供了主题和暗模式的支持。

2. 项目快速启动

安装 Vuetiful

首先，确保你已经安装了 Vue.js 和 TailwindCSS。然后，通过 npm 安装 Vuetiful：

npm install @skeletonlabs/skeleton@next @code-coaching/vuetiful

初始化 TailwindCSS

如果你还没有初始化 TailwindCSS，可以通过以下命令进行初始化：

npx tailwindcss init -p

配置 TailwindCSS

在 tailwind.config.js 文件中，添加 Vuetiful 的配置：

import { skeleton } from "@skeletonlabs/skeleton/plugin";

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: "class",
  content: [
    "./src/**/*.{html,js,ts,vue}",
    require("path").join(
      require.resolve("@code-coaching/vuetiful"),
      "/**/*.{html,js,ts,vue,mjs}"
    ),
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/forms"),
    skeleton(),
  ],
};

使用 Vuetiful 组件

在你的 Vue 组件中，引入并使用 Vuetiful 组件：

<template>
  <Vuetiful>
    <v-shell fixed-header-height="50px">
      <template #fixedHeader>
        <div class="flex h-[50px] items-center">
          <div class="mx-4 font-bold">Vuetiful</div>
        </div>
      </template>
      <router-view />
    </v-shell>
  </Vuetiful>
</template>

<script setup>
import { useDarkMode, useTheme, VShell, Vuetiful } from "@code-coaching/vuetiful";
import { onMounted } from "vue";

const [autoModeWatcher] = useDarkMode();
const [applyTheme, themes] = useTheme();

onMounted(() => {
  applyTheme(themes.vuetiful);
  autoModeWatcher();
});
</script>

3. 应用案例和最佳实践

自定义主题

Vuetiful 提供了主题生成器，开发者可以根据自己的设计需求生成自定义主题。通过 useTheme 方法，可以轻松应用自定义主题：

const [applyTheme, themes] = useTheme();
applyTheme(themes.customTheme);

暗模式支持

Vuetiful 内置了对暗模式的支持。通过 useDarkMode 方法，可以根据用户的操作系统偏好自动切换暗模式：

const [autoModeWatcher] = useDarkMode();
autoModeWatcher();

4. 典型生态项目

TailwindCSS

Vuetiful 与 TailwindCSS 深度集成，提供了丰富的样式类和工具类，帮助开发者快速构建美观的 UI 界面。

HeadlessUI

HeadlessUI 是一个无样式的 UI 组件库，与 Vuetiful 结合使用，可以进一步提升组件的灵活性和可定制性。

Nuxt.js

Vuetiful 支持服务端渲染（SSR），与 Nuxt.js 结合使用，可以构建高性能的 Vue.js 应用。

通过以上步骤，你可以快速上手并使用 Vuetiful 构建灵活且美观的 Vue.js 应用。