Делаешь страницу с расширением Vue или отдельно JavaScript и CSS

2.2 Middle🔥 161 комментариев

#Vue.js#Архитектура и паттерны

Комментарии (1)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Делаешь страницу с расширением Vue или отдельно JavaScript и CSS

Это вопрос о структуре проекта и подходе к разработке. Ответ зависит от проекта, но есть четкие лучшие практики.

Два подхода

1. Single File Components (SFC) — .vue файлы

.vue файлы — это стандартный способ писать компоненты в Vue:

<!-- ProductCard.vue -->
<template>
  <div class="card">
    <h2>{{ product.name }}</h2>
    <p class="price">{{ formatPrice(product.price) }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

interface Product {
  id: string;
  name: string;
  price: number;
}

defineProps<{
  product: Product;
}>();

const formatPrice = (price: number) => `$${price.toFixed(2)}`;

const addToCart = () => {
  console.log('Added to cart');
};
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #28a745;
}
</style>

Преимущества:

Весь компонент в одном файле (HTML, JS, CSS)
Scoped стили (CSS не конфликтуют)
Отличная IDE поддержка
Инкапсуляция и компонентность
Стандарт для Vue проектов

Недостатки:

Требует build tool (Webpack, Vite)
Сложнее использовать в простых HTML страницах

2. Отдельные JavaScript и CSS файлы (без фреймворка)

Старый подход: отдельные файлы:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="card">
    <h2>Product</h2>
    <p class="price">$99.99</p>
    <button id="addBtn">Add to Cart</button>
  </div>
  
  <script src="script.js" defer></script>
</body>
</html>

/* style.css */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #28a745;
}

// script.js
const button = document.getElementById('addBtn');
button.addEventListener('click', () => {
  console.log('Added to cart');
});

Преимущества:

Простой подход
Работает везде (в старых браузерах)
Без build инструментов
Подходит для простых страниц

Недостатки:

Нет инкапсуляции
Сложно масштабировать
Конфликты имен классов
Сложнее переиспользовать код
Сложно тестировать

Современный подход: Компоненты везде

Если используешь Vue/React/Svelte → .vue/.jsx/.svelte файлы

Это стандарт. Всегда используй SFC:

<!-- Button.vue -->
<template>
  <button :class="['btn', `btn--${variant}`]" @click="onClick">
    <slot />
  </button>
</template>

<script setup lang="ts">
defineProps<{
  variant?: 'primary' | 'secondary';
  onClick?: () => void;
}>();
</script>

<style scoped>
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.btn--primary {
  background-color: #007bff;
  color: white;
}

.btn--secondary {
  background-color: #f0f0f0;
  color: black;
}
</style>

Использование в других компонентах:

<!-- App.vue -->
<template>
  <div>
    <Button variant="primary" :onClick="handleClick">Click me</Button>
    <Button variant="secondary">Cancel</Button>
  </div>
</template>

<script setup>
import Button from '@/components/Button.vue';

const handleClick = () => {
  console.log('Clicked');
};
</script>

Если нет фреймворка → Web Components или обычная структура

Для простых страниц без фреймворка можно использовать Web Components:

// button.js
class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        button {
          padding: 8px 16px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
      </style>
      <button><slot /></button>
    `;
    
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('clicked'));
    });
  }
}

customElements.define('my-button', MyButton);

<!-- index.html -->
<html>
<head>
  <script src="button.js"></script>
</head>
<body>
  <my-button>Click me</my-button>
  
  <script>
    document.querySelector('my-button').addEventListener('clicked', () => {
      console.log('Button clicked');
    });
  </script>
</body>
</html>

Когда что использовать

Используй .vue (SFC) когда:

Проект на Vue
Много компонентов
Нужна масштабируемость
Есть build процесс (Vite, Webpack)

npm create vite@latest my-app -- --template vue
npm install
npm run dev

Используй отдельные файлы (HTML/JS/CSS) когда:

Простая страница без фреймворка
Нет build инструментов
Интеграция в существующий проект
Быстрый прототип

Используй Web Components когда:

Нужна инкапсуляция без фреймворка
Переиспользуемые компоненты между проектами
Shadow DOM нужен для изоляции стилей

Пример: Миграция из отдельных файлов в Vue

До (отдельные файлы):

<!-- index.html -->
<div id="products"></div>
<script src="app.js"></script>

// app.js
fetch('/api/products')
  .then(r => r.json())
  .then(products => {
    const html = products.map(p => `
      <div class="product-card">
        <h2>${p.name}</h2>
        <p>${p.price}</p>
      </div>
    `).join('');
    document.getElementById('products').innerHTML = html;
  });

/* style.css */
.product-card {
  border: 1px solid #ddd;
  padding: 16px;
}

После (Vue SFC):

<!-- ProductCard.vue -->
<template>
  <div class="product-card">
    <h2>{{ product.name }}</h2>
    <p>{{ product.price }}</p>
  </div>
</template>

<script setup>
defineProps({
  product: Object,
});
</script>

<style scoped>
.product-card {
  border: 1px solid #ddd;
  padding: 16px;
}
</style>

<!-- App.vue -->
<template>
  <div class="products">
    <ProductCard v-for="product in products" :key="product.id" :product="product" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ProductCard from '@/components/ProductCard.vue';

const products = ref([]);

onMounted(async () => {
  const response = await fetch('/api/products');
  products.value = await response.json();
});
</script>

Best Practices для Vue

1. Всегда используй SFC (Single File Components)

<!-- ✅ Правильно -->
<template>...</template>
<script setup>...</script>
<style scoped>...</style>

2. Используй scoped styles по умолчанию

<!-- CSS только этого компонента -->
<style scoped>
.btn {
  padding: 8px;
}
</style>

3. Структурируй проект компонентами

src/
  components/
    Button.vue
    Card.vue
    ProductCard.vue
  pages/
    Home.vue
    Products.vue
  App.vue

4. Используй TypeScript для типизации

<script setup lang="ts">
interface Props {
  title: string;
  count: number;
}

defineProps<Props>();
</script>

Best Practices для обычного HTML/JS

1. Разделяй на логические файлы

project/
  index.html
  styles/
    main.css
    components.css
  scripts/
    main.js
    utils.js

2. Избегай глобального состояния

// ❌ Плохо
let globalState = {};

// ✅ Хорошо
class Store {
  constructor() {
    this.state = {};
  }
  
  setState(key, value) {
    this.state[key] = value;
  }
  
  getState(key) {
    return this.state[key];
  }
}

3. Используй Web Components для инкапсуляции

class ToggleButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    // Код изолирован в Shadow DOM
    this.shadowRoot.innerHTML = `...`;
  }
}

Вывод

Используй Vue SFC (.vue файлы) когда:
- Проект на Vue
- Есть build инструменты
- Нужна масштабируемость
- Много компонентов
Используй отдельные HTML/JS/CSS когда:
- Простая страница
- Нет фреймворка
- Быстрый прототип
- Интеграция в существующий проект
Современный подход: всегда компоненты (Vue SFC, React JSX, Web Components)
Лучшая практика: структурируй как компоненты, даже если используешь обычный JavaScript