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

目录

Inspira UI 介绍

配置环境

使用示例

---

 

效果：

Inspira UI

学习视频：

华丽优雅 | Inspira UI快速上手_哔哩哔哩_bilibili

官网：https://inspira-ui.com/

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 的作用范围

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

在  assets / main.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 :

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 :

@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 文件，这个文件用于提供工具函数，复制官网代码进去：

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  ，跟着官网做就行了，官网也会给出下载命令：

npm install simplex-noise

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

然后复制上面 code 到主组件

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

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

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

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

Inspira UI

感谢您的观看！！！