目錄
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
感謝您的觀看！！！
