vue3+vite 引入动画组件库 Inspira UI

关于Inspira UI

Inspira UI不是传统的组件库。相反，它是精选的优雅组件集合，您可以轻松将其集成到您的应用程序中。只需选择所需的组件，复制代码，然后自定义以适合您的项目即可。您可以随意使用和修改代码！

官网地址：Introduction - Inspira UI

开始使用Inspira UI

1.第一步：使用vite创建一个属于你的项目

javascript">// my-vue-app 是你的项目名称
npm create vite@latest my-vue-app -- --template vue-ts
// 创建完成初始化
npm install

2.第二步：引入tailWindcss

有写过文章-点击前往

引入tailwindcss依赖https://blog.csdn.net/w1314_1314/article/details/138160924?spm=1001.2014.3001.5501

3.第三步：修改vite.config.ts 文件，使用@ 代替/src

javascript"># 安装path的依赖
npm install --save-dev @types/node# 修改vite.config.ts 文件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {extensions: ['.vue', '.ts'],alias: {"@": path.resolve(__dirname, "src")}},
})

4.第四步：修改 tsconfig.json 文件

javascript"># 使用@代替src 会出现引入地址报红线问题 但是不影响运行项目
# 应该要修改tsconfig.json 文件，添加我们前面修改的映射，可以添加如下"baseUrl": ".",
"paths": {"@/*": ["src/*"]}# 也可以使用以下 全部替换tsconfig.json 文件{"compilerOptions": {// TypeScript 类型声明文件，包含 Node.js 类型"types": ["node"],// 目标 ECMAScript 版本"target": "ES2020",// 启用类字段定义"useDefineForClassFields": true,// 模块类型"module": "ESNext",// 编译时可用的库"lib": ["ES2020", "DOM", "DOM.Iterable"],// 跳过声明文件的类型检查"skipLibCheck": true,/* Bundler mode（打包器模式） */// 模块解析策略（在 bundler 模式下使用）"moduleResolution": "bundler",// 允许导入 TypeScript 文件时省略后缀"allowImportingTsExtensions": true,// 允许导入 JSON 文件作为模块"resolveJsonModule": true,// 将每个文件视为独立的模块"isolatedModules": true,// 不生成输出文件"noEmit": true,// 保留 JSX 代码"jsx": "preserve",/* Linting（代码检查） */// 开启所有严格类型检查选项"strict": true,// 报告未使用的局部变量"noUnusedLocals": true,// 报告未使用的函数参数"noUnusedParameters": true,// 报告在 switch 语句中的 case 语句贯穿"noFallthroughCasesInSwitch": true,// 基准 URL，用于解析非相对模块名称"baseUrl": ".",// 路径映射，用于将导入路径映射到基准 URL 下的特定路径"paths": {"@/*": ["src/*"],}},// 需要进行编译的文件路径模式"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue","auto-imports.d.ts"],// 引用其他 TypeScript 配置文件的路径"references": [{"path": "./tsconfig.node.json"}]
}

5.第五步：解决import {ref,....} 引入频繁问题

有文档点击跳转查看

解决import {ref,....} 引入频繁问题https://blog.csdn.net/w1314_1314/article/details/138319300?spm=1001.2014.3001.5501

6.第六步：开始添加依赖

javascript">// 安装 tailwindcss 和实用程序的库。
npm install -D @inspira-ui/plugins clsx tailwind-merge class-variance-authority tailwindcss-animate// 安装 VueUse 和支持库。
npm install @vueuse/core @vueuse/motion

7.第七步：更新tailwind.config.ts和tailwind.css

注意：如果你是tailwind.config.js 记得修改为tailwind.config.ts

tailwind.config.ts

javascript">import type { Config } from "tailwindcss";
import animate from "tailwindcss-animate";
import { setupInspiraUI } from "@inspira-ui/plugins";export default {content: ['index.html', 'src/**/*.{vue,js,ts,jsx,tsx}'],darkMode: "selector",safelist: ["dark"],prefix: "",// content: [],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],
} satisfies Config;

注意：tailwind.css一定要引入到main.ts

tailwind.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%;}
}

8.第八步：添加lib/utils.ts

注意：创建这个文件夹放在scr文件夹下面

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

9.第九步：以上依赖基本安装完毕开始演示基本3d文字效果

9.1 在components文件夹创建Text3d.vue文件（将官网代码粘贴进去）

转帖时注意替换当前行代码 import { cn } from "~/lib/utils"; 改为 import { cn } from "@/lib/utils";

因为我们使用的@代替src

9.2 在自己页面开始使用这个Text3d.vue组件（就和正常组件导入即可）

页面使用