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

关于Inspira UI

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

官网地址：Introduction - Inspira UI

---

开始使用Inspira UI

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

// 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 

# 安装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 文件

# 使用@代替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.第六步：开始添加依赖

// 安装 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

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文件夹下面

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组件 （就和正常组件导入即可）

        页面使用