Inspira UI 安装与配置完全指南

Inspira UI 安装与配置完全指南

inspira-ui Build beautiful website using Vue & Nuxt. 项目地址: https://gitcode.com/gh_mirrors/in/inspira-ui

Inspira UI 是一个基于 Vue/Nuxt 的现代化 UI 组件库，本指南将详细介绍如何在你的项目中安装和配置 Inspira UI。

前置条件

在开始之前，请确保你的项目满足以下条件：

1. 已创建 Vue 或 Nuxt 项目
2. 已安装 Node.js (建议使用最新 LTS 版本)
3. 已配置好包管理工具 (npm/pnpm/yarn/bun)

安装步骤

1. 安装 Tailwind CSS

Inspira UI 基于 Tailwind CSS 构建，因此需要先安装 Tailwind CSS：

# 使用 npm
npm install -D tailwindcss postcss autoprefixer

# 使用 pnpm
pnpm add -D tailwindcss postcss autoprefixer

# 使用 yarn
yarn add -D tailwindcss postcss autoprefixer

# 使用 bun
bun add -d tailwindcss postcss autoprefixer

安装完成后，初始化 Tailwind CSS 配置文件：

npx tailwindcss init

2. 安装核心依赖

Inspira UI 需要以下核心依赖：

# 使用 npm
npm install -D clsx tailwind-merge class-variance-authority tw-animate-css

# 使用 pnpm
pnpm add -D clsx tailwind-merge class-variance-authority tw-animate-css

# 使用 yarn
yarn add -D clsx tailwind-merge class-variance-authority tw-animate-css

# 使用 bun
bun add -d clsx tailwind-merge class-variance-authority tw-animate-css

3. 安装辅助库

Inspira UI 还依赖以下辅助库：

# 使用 npm
npm install @vueuse/core motion-v

# 使用 pnpm
pnpm add @vueuse/core motion-v

# 使用 yarn
yarn add @vueuse/core motion-v

# 使用 bun
bun add @vueuse/core motion-v

4. 配置 CSS 变量

在项目的 main.css 文件中添加以下内容，这些 CSS 变量是 Inspira UI 组件正常工作所必需的：

@import "tailwindcss";
@import "tw-animate-css";

/* 基础变量定义 */
:root {
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  /* 其他变量... */
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  /* 其他暗色模式变量... */
}

/* 主题变量映射 */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* 其他主题变量... */
}

/* 基础样式 */
@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* 颜色方案设置 */
html {
  color-scheme: light dark;
}
html.dark {
  color-scheme: dark;
}
html.light {
  color-scheme: light;
}

5. 添加工具函数

在项目中创建 lib/utils.ts 文件，添加以下工具函数：

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export type ObjectValues<T> = T[keyof T];

这个 cn 函数用于安全地合并 Tailwind CSS 类名，避免样式冲突。

可选配置

图标支持

虽然可选，但建议安装 Iconify 图标库以获得更好的组件体验：

# 使用 npm
npm install @iconify/vue

# 使用 pnpm
pnpm add @iconify/vue

# 使用 yarn
yarn add @iconify/vue

# 使用 bun
bun add @iconify/vue

验证安装

完成上述步骤后，你可以尝试导入 Inspira UI 的任意组件来验证安装是否成功。例如：

<script setup>
import { Button } from 'inspira-ui'
</script>

<template>
  <Button>点击我</Button>
</template>

常见问题

1. 样式不生效：检查是否在 main.css 中正确导入了 Tailwind CSS 和 tw-animate-css
2. 暗色模式无效：确保项目中正确实现了暗色模式切换逻辑
3. 类型错误：检查 TypeScript 配置是否正确，确保类型定义被正确解析

下一步

现在你已经成功安装并配置了 Inspira UI，可以开始探索和使用各种组件来构建你的应用界面了。Inspira UI 提供了丰富的组件库，包括按钮、表单、导航、卡片等常用 UI 元素，帮助你快速构建现代化的用户界面。

inspira-ui Build beautiful website using Vue & Nuxt. 项目地址: https://gitcode.com/gh_mirrors/in/inspira-ui