当前位置：首页 > news >正文

vue3使用inspira-ui教程【附带源码】

news 2025/7/9 15:11:21

vue3使用inspira-ui教程【附带源码】

inspira-ui是基于tailwindcss的，我们需要引入tailwindcss，然后再把inspira-ui官网的示例代码复制到项目中就可以使用了。

完整源码下载gitee: https://gitee.com/xingyueqianduan/vue3-inspira-ui.git

完整源码下载github:https://github.com/858399075/vue3-inspira-ui-.git

效果：
在这里插入图片描述

在这里插入图片描述

首先搭建一个vue3项目，然后引入相关依赖。
目录示例：

package.json

{"name": "vue-project","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview","format": "prettier --write src/"},"dependencies": {"@tailwindcss/vite": "^4.1.0","@vueuse/core": "^13.0.0","lucide-vue-next": "^0.486.0","motion-v": "^1.0.0-alpha.4","pinia": "^3.0.1","scss": "^0.2.4","tailwindcss": "^4.1.0","tw-animate-css": "^1.2.5","vue": "^3.5.13","vue-router": "^4.5.0"},"devDependencies": {"@iconify/vue": "^4.3.0","@inspira-ui/plugins": "^0.0.1","@vitejs/plugin-vue": "^5.2.1","autoprefixer": "^10.4.21","class-variance-authority": "^0.7.1","clsx": "^2.1.1","postcss": "^8.5.3","prettier": "3.5.3","sass-embedded": "^1.86.1","sass-loader": "^7.3.1","tailwind-merge": "^3.2.0","tailwindcss": "^4.0.17","tailwindcss-animate": "^1.0.7","vite": "^6.2.1","vite-plugin-vue-devtools": "^7.7.2"}
}

vite.config.js

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite'// https://vite.dev/config/
export default defineConfig({plugins: [vue(),vueDevTools(),tailwindcss()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},// 全局css css: {preprocessorOptions: {scss: {additionalData: '@import "./src/assets/styles.css";' // 添加公共样式}}},server: {host: '0.0.0.0', // 允许通过 IP 地址访问port: 5175, // 可选：指定端口号strictPort: true, // 可选：确保端口不被占用open: true // 可选：自动打开浏览器}
})

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],
};

tailwind.css

@import "tailwindcss";

在这里插入图片描述
utils.js

在这里插入图片描述

import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';export function cn(...inputs) {return twMerge(clsx(inputs));
}

main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './assets/tailwind.css'
import './assets/styles.css'
import './assets/main.css'import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')