Поддерживаемые шаблоны: vanilla, vue, react, preact, lit, svelte, solid

Одной из ключевых особенностей Vite является встроенная система шаблонов проектов. При создании нового приложения через create-vite разработчик может выбрать готовую архитектурную основу для конкретного фреймворка или подхода разработки. Эти шаблоны позволяют быстро развернуть проект с уже настроенной структурой директорий, конфигурацией сборки, поддержкой TypeScript и базовыми сценариями разработки.

Система шаблонов Vite ориентирована на современные frontend-технологии и охватывает как классические приложения на чистом JavaScript, так и полноценные SPA-фреймворки.

Основные поддерживаемые шаблоны:

  • vanilla
  • vue
  • react
  • preact
  • lit
  • svelte
  • solid

Каждый шаблон существует в нескольких вариантах:

  • JavaScript
  • TypeScript
  • иногда дополнительные модификации

Например:

npm create vite@latest

После запуска появится выбор:

Sel ect a framework:
> Vanilla
  Vue
  React
  Preact
  Lit
  Svelte
  Solid

Затем выбирается вариант языка:

Sel ect a variant:
> JavaScript
  TypeScript

Шаблон vanilla

Общая характеристика

Шаблон vanilla предназначен для разработки приложений без использования frontend-фреймворков. Он представляет собой минималистичную структуру проекта с поддержкой:

  • ES-модулей
  • горячей перезагрузки
  • production-сборки
  • оптимизации Rollup
  • современной системы импортов

Этот шаблон часто используется:

  • для небольших приложений;
  • UI-виджетов;
  • встроенных интерфейсов;
  • админ-панелей;
  • библиотек;
  • экспериментов;
  • обучения JavaScript.

Структура проекта

Типичная структура vanilla-проекта:

project/
├── public/
├── src/
│   ├── counter.js
│   ├── javascript.svg
│   ├── main.js
│   └── style.css
├── index.html
├── package.json
└── vite.config.js

Главная особенность — index.html выступает точкой входа приложения.

Работа через нативные ES-модули

Внутри main.js используются обычные импорты:

import './style.css'
import { setupCounter } fr om './counter.js'

Vite обрабатывает их напрямую через dev-сервер без предварительной сборки.

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

Минимальный размер проекта

Отсутствуют:

  • виртуальный DOM;
  • runtime-фреймворк;
  • дополнительные зависимости.

Максимальная производительность

Код практически полностью состоит из нативного JavaScript.

Подходит для библиотек

Шаблон удобен для:

  • UI-компонентов;
  • SDK;
  • независимых модулей;
  • web-компонентов.

Ограничения

При росте приложения становится сложнее:

  • управлять состоянием;
  • масштабировать компоненты;
  • переиспользовать интерфейсы;
  • организовывать архитектуру.

Поэтому для крупных проектов обычно используются фреймворки.

Шаблон vue

Назначение

Шаблон vue предназначен для разработки приложений на базе фреймворка Vue.js.

Vite является официально рекомендуемым инструментом сборки для Vue 3.

Структура проекта

src/
├── assets/
├── components/
├── App.vue
└── main.js

Главный файл запуска:

import { createApp } fr om 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Поддержка Single File Components

Одной из главных особенностей Vue является формат .vue.

Пример:

<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
const title = 'Vite + Vue'
</script>

<style scoped>
h1 {
  color: green;
}
</style>

Vite через специальный плагин обрабатывает:

  • template;
  • script;
  • style;
  • scoped CSS;
  • HMR.

Vue-плагин

Для поддержки Vue используется пакет:

@vitejs/plugin-vue

Конфигурация:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

Особенности HMR

Vite обновляет Vue-компоненты практически мгновенно:

  • изменение template не сбрасывает состояние;
  • обновляется только нужный компонент;
  • перерисовка происходит выборочно.

Это значительно ускоряет разработку.

Поддержка Composition API

Шаблон изначально ориентирован на Vue 3 и Composition API:

import { ref } from 'vue'

const count = ref(0)

Когда используется Vue-шаблон

Чаще всего:

  • SPA-приложения;
  • административные панели;
  • корпоративные интерфейсы;
  • dashboard-системы;
  • CRM;
  • frontend для backend-приложений.

Шаблон react

Общая характеристика

Шаблон react используется для приложений на базе React.

Vite обеспечивает React-проектам:

  • сверхбыстрый запуск dev-сервера;
  • быстрый Fast Refresh;
  • эффективную production-сборку;
  • поддержку JSX и TSX.

Структура проекта

src/
├── App.jsx
├── main.jsx
└── assets/

Файл запуска:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)

React-плагин

Подключается официальный плагин:

@vitejs/plugin-react

Конфигурация:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

Fast Refresh

Vite использует Fast Refresh для React.

Это позволяет:

  • обновлять компоненты без полной перезагрузки;
  • сохранять состояние hooks;
  • быстро тестировать изменения.

JSX и TSX

Vite поддерживает:

function Button() {
  return <button>Click</button>
}

А также TypeScript-вариант:

type Props = {
  title: string
}

function Header({ title }: Props) {
  return <h1>{title}</h1>
}

SWC и Babel

В современных версиях React-шаблонов может использоваться:

  • Babel;
  • SWC.

SWC обеспечивает значительно более быструю трансформацию кода.

Особенности React-шаблона

Отличная скорость разработки

Даже большие React-проекты запускаются очень быстро.

Удобная экосистема

Легко подключаются:

  • React Router;
  • Zustand;
  • Redux Toolkit;
  • TanStack Query;
  • Material UI.

Хорошая поддержка TypeScript

TypeScript работает практически без дополнительной настройки.

Шаблон preact

Назначение

Шаблон preact предназначен для разработки приложений на базе Preact.

Preact представляет собой облегчённую альтернативу React.

Основная идея Preact

Цель библиотеки:

  • минимальный размер runtime;
  • высокая скорость;
  • совместимость с React API.

Размер Preact существенно меньше React.

Структура проекта

Очень похожа на React:

src/
├── app.jsx
├── main.jsx
└── assets/

Пример компонента

export function App() {
  return (
    <h1>Preact App</h1>
  )
}

Плагин Vite

Используется:

@preact/preset-vite

Конфигурация:

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

export default defineConfig({
  plugins: [preact()]
})

Совместимость с React

Preact поддерживает:

  • hooks;
  • JSX;
  • context;
  • functional components.

Во многих случаях React-приложение можно адаптировать под Preact с минимальными изменениями.

Когда выбирают Preact

Основные сценарии:

  • lightweight SPA;
  • embedded widgets;
  • мобильные web-приложения;
  • высокопроизводительные интерфейсы;
  • проекты с жёсткими ограничениями размера bundle.

Шаблон lit

Общая характеристика

Шаблон lit предназначен для разработки Web Components через библиотеку Lit.

Lit ориентирован на:

  • стандарты браузеров;
  • native custom elements;
  • Shadow DOM;
  • инкапсуляцию компонентов.

Особенности Web Components

Компоненты работают независимо от фреймворков.

Можно использовать:

  • внутри React;
  • внутри Vue;
  • внутри обычного HTML;
  • в CMS;
  • в legacy-проектах.

Пример компонента

import { LitElement, html, css } from 'lit'

class MyElement extends LitElement {
  static styles = css`
    h1 {
      color: blue;
    }
  `

  render() {
    return html`
      <h1>Hello Lit</h1>
    `
  }
}

customElements.define('my-element', MyElement)

Shadow DOM

Lit активно использует Shadow DOM для изоляции:

  • CSS;
  • структуры;
  • логики компонентов.

Это предотвращает конфликты стилей.

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

Близость к веб-стандартам

Используются нативные механизмы браузера.

Независимость от framework runtime

Компоненты могут использоваться практически в любом окружении.

Подходит для design systems

Lit часто применяется при создании:

  • UI-kit;
  • корпоративных библиотек компонентов;
  • reusable widgets.

Шаблон svelte

Назначение

Шаблон svelte предназначен для приложений на базе Svelte.

Главная особенность Svelte — перенос значительной части работы из runtime в compile-time.

Архитектурная особенность Svelte

В отличие от React и Vue, Svelte:

  • не использует virtual DOM;
  • компилирует компоненты в оптимизированный JavaScript;
  • минимизирует runtime-логику.

Это даёт:

  • высокую производительность;
  • маленький размер bundle;
  • быструю работу интерфейсов.

Структура компонента

<script>
  let count = 0
</script>

<button on:click={() => count++}>
  {count}
</button>

Плагин Vite

Используется:

@sveltejs/vite-plugin-svelte

HMR в Svelte

Vite обеспечивает очень быстрый HMR:

  • обновление компонентов почти мгновенное;
  • сохраняется состояние;
  • минимальные перерисовки.

Реактивность

Svelte использует встроенную реактивность:

$: doubled = count * 2

Без hooks и сложных API.

Сценарии использования

Svelte хорошо подходит для:

  • интерактивных интерфейсов;
  • анимаций;
  • lightweight SPA;
  • высокопроизводительных приложений;
  • embedded UI.

Шаблон solid

Общая характеристика

Шаблон solid предназначен для разработки приложений на базе SolidJS.

Solid сочетает:

  • JSX-синтаксис;
  • fine-grained reactivity;
  • отсутствие virtual DOM;
  • высокую производительность.

Архитектура Solid

Вместо полного повторного рендера Solid обновляет только конкретные DOM-узлы, которые изменились.

Это обеспечивает:

  • минимальные накладные расходы;
  • очень высокую скорость интерфейсов;
  • эффективную реактивность.

Пример компонента

import { createSignal } from 'solid-js'

function Counter() {
  const [count, setCount] = createSignal(0)

  return (
    <button onCl ick={() => setCount(count() + 1)}>
      {count()}
    </button>
  )
}

Плагин Vite

Используется:

vite-plugin-solid

Конфигурация:

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solid()]
})

Особенности реактивности

Solid использует сигналы:

const [value, setValue] = createSignal(10)

Изменения обновляют только зависимые участки DOM.

Отличия от React

Хотя используется JSX, архитектурно Solid сильно отличается:

React Solid
Virtual DOM Fine-grained DOM updates
Повторный render Точечные обновления
Hooks Signals
Runtime diffing Компиляция зависимостей

TypeScript-варианты шаблонов

Практически каждый шаблон имеет TypeScript-версию:

vanilla-ts
vue-ts
react-ts
preact-ts
lit-ts
svelte-ts
solid-ts

Отличия TypeScript-шаблонов

Добавляются:

  • tsconfig.json;
  • типизированные компоненты;
  • .ts и .tsx файлы;
  • типы framework API.

Пример React TypeScript

type ButtonProps = {
  text: string
}

export function Button({ text }: ButtonProps) {
  return <button>{text}</button>
}

Сравнение шаблонов

Шаблон Размер runtime Virtual DOM Подходит для
vanilla минимальный нет простые приложения
vue средний да универсальные SPA
react средний да крупные frontend-системы
preact маленький да lightweight SPA
lit маленький нет web components
svelte очень маленький нет быстрые интерфейсы
solid маленький нет высокопроизводительные UI

Выбор подходящего шаблона

Когда подходит vanilla

Оптимален для:

  • небольших проектов;
  • обучающих задач;
  • библиотек;
  • виджетов.

Когда подходит Vue

Часто выбирается для:

  • корпоративных интерфейсов;
  • административных панелей;
  • быстро развиваемых SPA.

Когда подходит React

Используется в:

  • крупных frontend-платформах;
  • enterprise-приложениях;
  • масштабируемых UI-системах.

Когда подходит Preact

Полезен при:

  • ограничениях размера bundle;
  • мобильных web-приложениях;
  • lightweight-интерфейсах.

Когда подходит Lit

Эффективен для:

  • web components;
  • reusable UI-kit;
  • framework-agnostic компонентов.

Когда подходит Svelte

Подходит для:

  • высокопроизводительных интерфейсов;
  • анимаций;
  • компактных приложений.

Когда подходит Solid

Используется там, где важны:

  • максимальная производительность;
  • fine-grained reactivity;
  • минимальные обновления DOM.
Оглавление