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

server/2024/12/23 11:14:13/

关于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依赖icon-default.png?t=O83Ahttps://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,....} 引入频繁问题icon-default.png?t=O83Ahttps://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组件 (就和正常组件导入即可)

        页面使用

        

        


http://www.ppmy.cn/server/152475.html

相关文章

【hackmyvm】eigthy 靶机wp

tags: HMVgopherdoas另类sudo提权knock目录穿越 Type: wp dg-publish: true 难度: ⭐️⭐️⭐️ 作者: sml 系统: Linux 这里写目录标题 2. 信息收集2.1. 端口扫描2.2. knock敲门2.3. 目录扫描2.4. 目录穿越 3. 提权 2. 信息收集 2.1. 端口扫描 ┌──(root㉿kali)-[~/Deskt…

关于VQ-GAN利用滑动窗口生成 高清图像

参考文章&#xff1a;VQGAN 论文与源码解读&#xff1a;前Diffusion时代的高清图像生成模型 | 周弈帆的博客 概念补充&#xff1a;所谓“高清”&#xff0c;就是像素很多&#xff0c;比如&#xff0c;512x512就比64x64要高清很多 请仔细琢磨上面的这几句话即可。 &#xff08;…

Linux查看键鼠输入

文章目录 通过打开input设备来读取输入通过第三方程序获取xevxinputevtest 参考 本文简单介绍几种在linux下查看键鼠输入的方法 通过打开input设备来读取输入 程序如下&#xff0c;使用时需要看情况修改input设备路径 #include <fcntl.h> #include <linux/input.h&g…

每天40分玩转Django:Django缓存视图

Django缓存视图 一、今日学习内容概述 学习模块重要程度主要内容视图缓存基础⭐⭐⭐⭐⭐缓存装饰器、缓存配置基于会话缓存⭐⭐⭐⭐⭐会话存储、用户相关缓存动态缓存处理⭐⭐⭐⭐条件缓存、缓存失效缓存优化策略⭐⭐⭐⭐性能优化、最佳实践 二、缓存配置示例 # settings.p…

中软高科身份证云解码金融(银行)解决方案介绍

多年来&#xff0c;中软高科一直深耕身份证云解码领域&#xff0c;对身份证云解码应用于金融&#xff08;银行&#xff09;&#xff0c;进行了大量且深入的研究。从长期调研来看&#xff0c;金融&#xff08;银行&#xff09;的痛点需求主要有&#xff1a; 传统身份证解码设备…

一篇文章掌握WebService服务、工作原理、核心组件、主流框架

目录 1、WebService定义 解决问题&#xff1a; 2、WebService的工作原理 2.1 实现一个完整的Web服务包括以下步骤 2.2 调用方式 3、Web Service的核心组件 3.1 XML 3.2 SOAP 3.3 WSDL 3.4 UDDI 4、主流框架 4.1 AXIS(已淘汰) 4.2 XFire 4.3 CXF 5、Soap协议详解…

Farfalle - 开源的AI搜索引擎

2600 Stars 232 Forks 32 Issues 4 贡献者 Apache-2.0 License Python 语言 代码: https://github.com/rashadphz/farfalle 主页: Farfalle 演示: Farfalle 更多AI开源软件&#xff1a;https://www.aiinn.cn/sources FarFalle 是一款开源的AI搜索引擎项目&#xff0c;类似Perpl…

AI Agent案例全解析:百度营销智能体(8/30)

引言&#xff1a;在当今这个科技飞速发展的时代&#xff0c;AI技术呈现出爆发式的增长&#xff0c;正以前所未有的态势改变着众多行业的发展轨迹&#xff0c;营销领域也不例外。随着市场竞争的日益激烈&#xff0c;传统营销模式逐渐显露出疲态&#xff0c;对于变革的需求愈发迫…