Configuration de l'environnement

Nous utiliserons Vite pour construire rapidement le projetTaskHubRéférence du contenu Vite :Tutoriel Vite。

1. Créer un projet

Ouvrez le terminal et exécutez la commande suivante pour créer un projet Vite + Vue3 (sélectionnez la syntaxe Script Setup) :

# 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

Après une exécution réussie, la sortie est la suivante :

Une fois le démarrage réussi, visitez l'adresse locale indiquée dans le terminal (par défaut http://localhost:5173/), et vous verrez la page initiale de Vue3.

2. Répertoire du projet

Nous pouvons entrer dans le répertoire :

cd task-hub

Si VS Code est installé, vous pouvez utiliser la commande `code` de VS Code pour ouvrir le répertoire. Référence du contenu VS Code :Tutoriel VS Code。

code .

Après le démarrage, la structure du répertoire est la suivante :

Autres commandes associées :

# 安装依赖
npm install

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

2. Nettoyer le code par défaut

Supprimez src/components/HelloWorld.vue.

Videz src/style.css.

Modifiez src/App.vue, le code est le suivant :

Exemple

<script setup>
// Logique JS
</script>

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

Importer Tailwind CSS

Installez et configurez le framework CSS atomique.

npm install tailwindcss @tailwindcss/vite

Modifiez vite.config.js :

Exemple

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(), // Activer le moteur Tailwind v4
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // Configurer l'alias de chemin
    },
  },
})

Dans la v4, Tailwind s'exécute comme un plugin Vite et analyse automatiquement vos fichiers .vue.

Importez-le dans src/style.css :

Dans Tailwind v4, toute la configuration (thèmes, variables) s'écrit directement en CSS. Réinitialisez src/style.css comme suit :

Exemple

@import "tailwindcss";

/* La façon dont la v4 définit les variables de thème */
@theme {
  --color-brand: #3b82f6;
  --radius-xl: 1rem;
}

/* Styles de base globaux */
@layer base {
  body {
    @apply bg-slate-50 text-slate-900 antialiased;
  }
}
Autres extensions