Configuración del entorno

Usaremos Vite para construir rápidamente el proyectoTaskHub, consulte el contenido de Vite:Tutorial de Vite。

1. Crear proyecto

Abra la terminal y ejecute el siguiente comando para crear un proyecto Vite + Vue3 (elija la sintaxis 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

Después de ejecutarlo correctamente, la salida es la siguiente:

Una vez que el inicio tenga éxito, acceda a la dirección local indicada en la terminal (por defecto http://localhost:5173/) y verá la página inicial de Vue3.

2. Directorio del proyecto

Podemos entrar en el directorio:

cd task-hub

Si tiene VS Code instalado, puede usar el comando code de VS Code para abrir el directorio. Referencia de contenido de VS Code:Tutorial de VS Code。

code .

Después del inicio, la estructura del directorio es la siguiente:

Otros comandos relacionados:

# 安装依赖
npm install

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

2. Limpiar el código predeterminado

Elimine src/components/HelloWorld.vue.

Vacíe src/style.css.

Modifique src/App.vue, el código es el siguiente:

Ejemplo

<script setup>
// Lógica JS
</script>

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

Introducir Tailwind CSS

Instale y configure el framework CSS atómico.

npm install tailwindcss @tailwindcss/vite

Modifique vite.config.js:

Ejemplo

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(), // Activar el motor de Tailwind v4
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // Configurar alias de ruta
    },
  },
})

En v4, Tailwind se ejecuta como un complemento de Vite y escanea automáticamente tus archivos .vue.

Introdúzcalo en src/style.css:

En Tailwind v4, toda la configuración (temas, variables) se escribe directamente en CSS. Restablezca src/style.css de la siguiente manera:

Ejemplo

@import "tailwindcss";

/* Forma de definir variables de tema en v4 */
@theme {
  --color-brand: #3b82f6;
  --radius-xl: 1rem;
}

/* Estilos base globales */
@layer base {
  body {
    @apply bg-slate-50 text-slate-900 antialiased;
  }
}
Otras extensiones