Umgebungs-Setup

Wir werden Vite verwenden, um das ProjektTaskHubschnell zu erstellen. Vite-Inhaltsreferenz:Vite-Tutorial。

1. Projekt erstellen

Öffnen Sie das Terminal und führen Sie den folgenden Befehl aus, um ein Vite + Vue3-Projekt zu erstellen (wählen Sie die Script-Setup-Syntax):

# npm 命令
npm create vite@latest task-hub -- --template vue

# yarn 命令
yarn create vite task-hub --template vue

# pnpm 命令（推荐，速度更快）
pnpm create vite task-hub -- --template vue

Nach erfolgreicher Ausführung sieht die Ausgabe wie folgt aus:

Nach erfolgreichem Start besuchen Sie die im Terminal angezeigte lokale Adresse (Standard http://localhost:5173/), und Sie sehen die Vue3-Startseite.

2. Projektverzeichnis

Wir können das Verzeichnis betreten:

cd task-hub

Wenn VS Code installiert ist, können Sie den Befehl `code` von VS Code verwenden, um das Verzeichnis zu öffnen. VS Code-Inhalt-Referenz:VS Code-Tutorial。

code .

Nach dem Start sieht die Verzeichnisstruktur wie folgt aus:

Weitere zugehörige Befehle:

# 安装依赖
npm install

# 启动
npm run dev
# 清理默认代码

2. Standardcode bereinigen

Löschen Sie src/components/HelloWorld.vue.

Leeren Sie src/style.css.

Ändern Sie src/App.vue, der Code lautet wie folgt:

Beispiel

<script setup>
// JS logic
</script>

<template>
  <div>
    <h1>TaskHub</h1>
  </div>
</template>

Tailwind CSS importieren

Installiere und konfiguriere das atomare CSS-Framework.

npm install tailwindcss @tailwindcss/vite

vite.config.js ändern:

Beispiel

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(), // Tailwind-v4-Engine aktivieren
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // Pfad-Alias konfigurieren
    },
  },
})

In v4 läuft Tailwind als Vite-Plugin und scannt deine .vue-Dateien automatisch.

Importiere es in src/style.css:

In Tailwind v4 wird die gesamte Konfiguration (Themes, Variablen) direkt in CSS geschrieben. Setze src/style.css wie folgt zurück:

Beispiel

@import "tailwindcss";

/* So definiert v4 Theme-Variablen */
@theme {
  --color-brand: #3b82f6;
  --radius-xl: 1rem;
}

/* Globale Basisstile */
@layer base {
  body {
    @apply bg-slate-50 text-slate-900 antialiased;
  }
}
Andere Erweiterungen