Создание современного веб-приложения с использованием Vue 3, Vite и Tailwind CSS обеспечивает высокую производительность и удобство разработки. Следуйте этой пошаговой инструкции для настройки проекта.
1. Установка необходимых расширений в Visual Studio Code
Для повышения эффективности разработки рекомендуется установить следующие расширения:
Tailwind CSS IntelliSense: Предоставляет автодополнение и подсказки для классов Tailwind CSS.
Vetur или Volar: Официальные расширения для поддержки Vue.js в VS Code.
Не забудьте установить последнюю версию NodeJS!
2. Создание нового проекта с использованием Vite и Vue 3
Откройте терминал и выполните команду для инициализации нового проекта:
npm init vite@latest frontend -- --template vue
frontend в данном случае - это название проекта. Название может быть любым.
Следуйте инструкциям в терминале для завершения установки, затем перейдите в созданную папку проекта:
cd frontend
3. Установка зависимостей проекта
Выполните команду для установки всех необходимых зависимостей:
npm install
4. Установка и настройка Tailwind CSS
Установите Tailwind CSS и его одноранговые зависимости:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Сгенерируйте файлы конфигурации для Tailwind CSS и PostCSS:
npx tailwindcss init -p
В файле tailwind.config.js настройте пути для очистки неиспользуемых стилей:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: 'media', // или 'class' для ручного управления
theme: {
extend: {},
},
plugins: [],
};
5. Создание и настройка файла стилей
Создайте файл src/index.css и добавьте в него следующие директивы:
@ tailwind base;
@ tailwind components;
@ tailwind utilities;
После @ пробел убираем.
6. Настройка Vite для работы с Tailwind CSS
В файле vite.config.js убедитесь, что PostCSS настроен для использования Tailwind CSS:
import { defineConfig } from "vite"; // Импорт функции для определения конфигурации Vite
import vue from "@vitejs/plugin-vue"; // Импорт плагина для поддержки Vue
import tailwindcss from "tailwindcss"; // Импорт Tailwind CSS
import autoprefixer from "autoprefixer"; // Импорт Autoprefixer
export default defineConfig({
plugins: [vue()], // Подключение плагина Vue
css: {
postcss: {
plugins: [tailwindcss, autoprefixer], // Подключение Tailwind CSS и Autoprefixer для обработки CSS
},
},
server: {
host: "0.0.0.0", // Настройка хоста сервера
port: 3000, // Настройка порта сервера
},
});
Кроме того, обратите внимание на необходимость явного указания хоста и порта. Иногда в Vite возникают проблемы с запуском VueJS3 без явного указания этих параметров.
7. Импорт стилей Tailwind CSS в проект
В файле src/main.ts импортируйте созданный файл стилей:
import { createApp } from 'vue';
import App from './App.vue';
import './index.css';
createApp(App).mount('#app');
8. Установка и настройка Vue Router
Установите Vue Router для управления маршрутизацией в приложении, если он не был установлен ранее:
npm install vue-router@next
Создайте папку src/router и файл index.ts со следующим содержимым:
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [
{ path: '/', name: 'Home', component: Home },
// Добавьте другие маршруты по мере необходимости
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Создайте папку src/views и добавьте файл Home.vue с базовым содержимым:
<script setup lang="ts">
// Логика компонента (если необходима)
</script>
<template>
<div>
<h1 class="text-2xl font-bold">Главная страница</h1>
<p>Добро пожаловать на главную страницу вашего приложения!</p>
</div>
</template>
<style scoped>
/* Локальные стили компонента */
</style>
В файле src/main.ts подключите роутер к приложению:
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import './index.css';
createApp(App).use(router).mount('#app');
9. ОПЦИОНАЛЬНО. Настройка компонента Header и использование маршрутизации
Создайте папку src/components и добавьте файл Header.vue с навигацией:
<template>
<header class="p-4 bg-gray-800 text-white">
<nav>
<ul class="flex space-x-4">
<li>
<router-link to="/" class="hover:underline">Главная</router-link>
</li>
<!-- Добавьте другие ссылки по мере необходимости -->
</ul>
</nav>
</header>
</template>
<script setup lang="ts">
// Логика компонента (если необходима)
</script>
<style scoped>
/* Локальные стили компонента */
</style>
В файле App.vue используйте компонент Header и добавьте место для отображения текущего маршрута:
<script setup lang="ts">
import Header from './components/Header.vue';
</script>
<template>
<div id="app">
<Header />
<main class="p-4">
<router-view />
</main>
</div>
</template>
<style scoped>
/* Глобальные стили приложения */
</style>
10. Запуск проекта
npm run dev