【玩转全栈】—— 无敌前端究极动态组件库--Inspira UI

目录

[Inspira UI 介绍](#Inspira UI 介绍)

配置环境

使用示例

效果：

Inspira UI

学习视频：

Inspira UI 介绍

Inspira UI 是一个设计精美、功能丰富的用户界面库，专为开发者和设计师打造，旨在加速Web应用程序的开发过程。它提供了一系列精心设计的组件，如按钮、卡片、表单元素、导航栏等，所有这些都遵循现代设计原则，并且高度可定制，使得创建独特而专业的用户体验变得轻而易举。Inspira UI 支持多种框架，包括React、Vue和Angular，确保无论使用何种技术栈都能无缝集成。其文档详尽清晰，包含大量示例和最佳实践指南，帮助新手快速上手，同时也为有经验的开发者提供了深入探索的可能性。此外，Inspira UI 强调响应式设计，保证了应用在不同设备上的完美展现，让开发者只需编写一次代码即可适配各种屏幕尺寸。无论是构建企业级应用还是个人项目，Inspira UI 都是一个值得信赖的选择。

配置环境

官网也有教如何配置的，看不懂的可以看我下面的操作：

创建一个 vue项目：

复制代码

npm create @latest 项目名称

下载依赖：

复制代码

npm install

需要下载 tailwindcss 依赖（建议使用 cnpm 或者 pnpm 等打包工具, npm下载会很慢，甚至导致下载失败）：

复制代码

cnpm install -D tailwindcss@3 postcss autoprefixer

初始化配置文件：

复制代码

npx tailwindcss init -p

向生成的配置文件 tailwind.config.js 中指定 Tailwind CSS 的作用范围

javascript 复制代码

  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],

在 assets / main.css 中添加注解：

css 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

继续添加依赖：

复制代码

cnpm install -D @inspira-ui/plugins clsx tailwind-merge class-variance-authority tailwindcss-animate

添加 vue - use:

复制代码

cnpm install @vueuse/core motion-v

继续手动添加配置，复制以下代码到 tailwind.config.js :

javascript 复制代码

import animate from "tailwindcss-animate";
import { setupInspiraUI } from "@inspira-ui/plugins";

export default {
  darkMode: "selector",
  safelist: ["dark"],
  prefix: "",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        xl: "calc(var(--radius) + 4px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },

  plugins: [animate, setupInspiraUI],
};

复制官网 css 配置代码到 assets / main.css :

css 复制代码

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

在 src 下创建 lib 文件夹，文件夹中创建 utils.ts 文件，这个文件用于提供工具函数，复制官网代码进去：

TypeScript 复制代码

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];

使用示例

这里使用 Vortex:

直接复制代码即可实现炫酷界面，需要注意的是，有的样式背可能会需要下载其他依赖，比如这里就让我下载 simplex-noise ，跟着官网做就行了，官网也会给出下载命令：

TypeScript 复制代码

npm install simplex-noise

然后要做 web 主页面，背景模板和文字是分开的，创建 Vortex 文件，并复制代码进去，这里的 Slot就是插槽，其他组件调用此组件，可以将文字传入此插槽，就能实现在背景上展现图片。

然后复制上面 code到主组件

注意，这里需要引入刚才创建的 Vortex.vue :

TypeScript 复制代码

<script setup lang="ts">
import Vortex from '@/components/inspirs/Vortex.vue';
import { Motion } from "motion-v";
</script>

这也是官方的一个漏洞，没有给出引入的代码，当然，上面是背景和文字分开的代码，也可以把背景和文字融合到一个 vue文件中，也就不需要引入了，但是这样不利于维护和扩展。

代码部署完后的效果（我这里还融合了其他样式，跟官网的示例会不大一样）：

Inspira UI

感谢您的观看！！！