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

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')