Vue3 Tailwind CSS

Die Verwendung von Tailwind CSS in einem Vue-Projekt ist eine sehr beliebte Wahl, weil es einen Utility-First-Ansatz für das Schreiben von CSS bietet, mit dem du Stile direkt in Klassennamen anwenden kannst. Dieser Ansatz macht das Schreiben von Stilen prägnanter und intuitiver.

Tailwind CSS Tutorial:https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Offizielle Website von Tailwind CSS:https://tailwindcss.com/

GitHub-Adresse:https://github.com/tailwindlabs/tailwindcss

Tailwind CSS ist ein leistungsstarkes CSS-Framework, das das Schreiben von Stilen durch einen Utility-First-Ansatz prägnanter und modularer macht. Im Gegensatz zu traditionellen klassenbasierten CSS-Frameworks bietet Tailwind eine Reihe von Low-Level-Utility-Klassen, die direkt auf HTML-Elemente angewendet werden können, um schnell und flexibel benutzerdefinierte Designs zu erstellen.

Das Folgende ist ein vollständiges einführendes Beispiel mit Vue 3 und Tailwind CSS, das zeigt, wie man Tailwind CSS in Vue 3 integriert und seine Funktionen nutzt, um responsive Oberflächen zu erstellen.

Vue 3 und Tailwind CSS installieren

Stellen Sie zunächst sicher, dass Vue 3 und Tailwind CSS installiert sind.

Vue 3 installieren: Führen Sie im Terminal den Befehlnpm create vue@latestaus, um ein neues Vue 3-Projekt zu erstellen:

npm create vue@latest

Geben Sie im Ausgabefenster den Projektnamen ein und drücken Sie dann durchgängig die Eingabetaste:

Bei der Ausführung des obigen Befehls müssen einige Initialisierungsoptionen festgelegt werden; verwenden Sie die Pfeiltasten zur Auswahl.

Wechseln Sie in das initialisierte Verzeichnis vue-tailwind-app und installieren Sie die Abhängigkeiten:

cd vue-tailwind-app
npm install

Tailwind CSS installieren: Installieren Sie Tailwind CSS und die zugehörigen Abhängigkeiten:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Nach Abschluss der Erstellung sieht die Verzeichnisstruktur wie folgt aus:

Tailwind CSS konfigurieren: Öffnen Sie die Datei tailwind.config.js und ändern Sie sie wie folgt:

Beispiel

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind-Direktiven hinzufügen: Erstellen Sie eine styles.css-Datei im Verzeichnis src/assets und fügen Sie den folgenden Inhalt hinzu:

/* src/assets/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Importieren Sie dann diese Datei in src/assets/main.js:

import './assets/styles.css

Vue-Komponenten und -Stile erstellen

Jetzt können Sie mit dem Schreiben Ihrer Vue-3-Komponenten beginnen und Tailwind CSS verwenden, um die Seite zu verschönern.

App.vue

App.vue ist die Hauptkomponente der Anwendung; sie enthält die grundlegende Verwendung von Vue 3 und Tailwind CSS.

Beispiel

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
      <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
Vue 3 + Tailwind CSS Beispiel
      </h1>

      <!-- Eingabefeld und Schaltfläche -->
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700">Benutzername</label>
        <input
         type="text"
         id="name"
         v-model="username"
         placeholder="Bitte Benutzername eingeben"
         class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
      </div>

      <button
       @click="submitForm"
       class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200"
     >
Absenden
      </button>

      <!-- Benutzername anzeigen -->
      <p v-if="submitted" class="mt-4 text-center text-gray-600">Willkommen, {{ username }}!</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      submitted: false
    };
  },
  methods: {
    submitForm() {
      if (this.username) {
        this.submitted = true;
      } else {
alert('Bitte Benutzernamen eingeben');
      }
    }
  }
};
</script>

<style scoped>
/* Die Stile hier sind benutzerdefiniert, falls nötig */
</style>

Darüber hinaus können wir unseren eigenen Port in der Datei vite.config.js festlegen. Zum Beispiel, nachdem der Port wie folgt festgelegt wurde:3000：

Beispiel

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    port: 3000, // Unsere eigene angegebene Portnummer
  },
})

Nachdem die Einstellungen abgeschlossen sind, führen Sie den folgenden Befehl aus:npm run devDie Befehlsausgabe sieht wie folgt aus:

# npm run dev                                                         

> [email protected] dev
> vite


  VITE v6.0.3  ready in 333 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:3000/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

Besuchen Siehttp://localhost:3000/, und die Anzeige sieht wie folgt aus:

Als Nächstes versuchen wir, eine Liste zu erstellen. Ändern Sie die Datei App.vue, der Code sieht wie folgt aus:

Beispiel

<template>
  <div class="min-h-screen flex flex-col">
    <!-- Kopfbereich -->
    <header class="bg-blue-600 text-white py-4">
      <div class="container mx-auto text-center">
        <h1 class="text-3xl font-semibold">Listenseite</h1>
      </div>
    </header>

    <!-- Liste -->
    <main class="flex-grow py-8">
      <div class="container mx-auto px-4">
        <ul class="space-y-4">
          <li v-for="(item, index) in items" :key="index" class="p-4 bg-white border rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">{{ item.title }}</h2>
            <p class="text-gray-600">{{ item.description }}</p>
          </li>
        </ul>
      </div>
    </main>

    <!-- Fußzeile -->
    <footer class="bg-gray-800 text-white py-4">
      <div class="container mx-auto text-center">
        <p>&copy;2024 Meine Vue3-App</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "ListPage",
  data() {
    return {
      items: [
{ title: "Listeneintrag 1", description: "Dies ist die Beschreibung des ersten Listeneintrags." },
{ title: "Listeneintrag 2", description: "Dies ist die Beschreibung des zweiten Listeneintrags." },
{ title: "Listeneintrag 3", description: "Dies ist die Beschreibung des dritten Listeneintrags." },
// Weitere Listeneinträge
      ],
    };
  },
};
</script>

<style scoped>
/* Einige zusätzliche Stile hinzufügen (falls nötig) */
</style>

Codeanalyse:

  • Header (header): Verwendenbg-blue-600die Hintergrundfarbe festlegen,text-whitedie Textfarbe festlegen,py-4vertikales Padding festlegen,container mx-autowird verwendet, um eine feste Breite festzulegen und es zu zentrieren.
  • Liste (main): Verwendenflex-growdamit der Listenbereich den verbleibenden Platz ausfüllt,py-8vertikales Padding hinzufügen. Jedes Listenelement verwendetp-4, bg-white, border, rounded-lg, shadow-mdund andere Tailwind-Klassen, um das Erscheinungsbild festzulegen.
  • Footer (footer): Verwendenbg-gray-800einen dunklen Hintergrund festlegen,text-whiteweißen Text festlegen,py-4Padding festlegen.

Besuchen Siehttp://localhost:3000/, und die Anzeige sieht wie folgt aus:

Weitere Erweiterungen