目录
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
感谢您的观看！！！
