Настройка окружения

Мы будем использовать Vite, чтобы быстро создать проектTaskHubСсылка на материалы по Vite:Учебник по Vite。

1. Создание проекта

Откройте терминал и выполните следующую команду, чтобы создать проект Vite + Vue3 (выберите синтаксис 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

После успешного выполнения вывод будет следующим:

После успешного запуска перейдите по локальному адресу, отображаемому в терминале (по умолчанию http://localhost:5173/), и вы увидите начальную страницу Vue3.

2. Каталог проекта

Мы можем войти в каталог:

cd task-hub

Если VS Code установлен, вы можете использовать команду `code` VS Code, чтобы открыть каталог. Справочные материалы по VS Code:Руководство по VS Code。

code .

После запуска структура каталогов выглядит следующим образом:

Другие связанные команды:

# 安装依赖
npm install

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

2. Очистка кода по умолчанию

Удалите src/components/HelloWorld.vue.

Очистите src/style.css.

Измените src/App.vue, код выглядит следующим образом:

Пример

<script setup>
// Логика JS
</script>

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

Импорт Tailwind CSS

Установите и настройте атомарный CSS-фреймворк.

npm install tailwindcss @tailwindcss/vite

Измените vite.config.js:

Пример

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
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'), // Настроить псевдоним пути
    },
  },
})

В v4 Tailwind работает как плагин Vite и автоматически сканирует ваши .vue файлы.

Импортируйте это в src/style.css:

В Tailwind v4 вся конфигурация (темы, переменные) записывается непосредственно в CSS. Сбросьте src/style.css следующим образом:

Пример

@import "tailwindcss";

/* Способ, которым v4 определяет переменные темы */
@theme {
  --color-brand: #3b82f6;
  --radius-xl: 1rem;
}

/* Global base styles */
@layer base {
  body {
    @apply bg-slate-50 text-slate-900 antialiased;
  }
}
Другие расширения