关于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组件 (就和正常组件导入即可)
页面使用