Wiki · Технологии разработки

Vue.js

5 мин чтенияАвтор: Дмитрий КолесниковСоавторы: Евгений Баев

Vue.js – это JavaScript-фреймворк для создания интерфейсов сайтов и веб-приложений, который можно подключать постепенно: от одного интерактивного блока на странице до целого приложения. Его создал Эван Ю в 2014 году, код открыт под лицензией MIT, а развивает проект независимая команда без компании-владельца.

Подрядчик говорит: «сделаем на Vue». Для заказчика за этим стоят простые вопросы: подойдёт ли это сайту, найдётся ли потом кому его поддерживать и не придётся ли переписывать проект через пару лет. На последний вопрос у Vue есть свежий пример, о нём ниже.

Почему Vue называют прогрессивным

На официальном сайте Vue называют прогрессивным фреймворком. Смысл в том, что его не обязательно внедрять целиком. Документация перечисляет варианты:

оживить готовую HTML-страницу без сборки проекта, например добавить калькулятор на сайт на CMS;
встроить виджет как веб-компонент;
сделать одностраничное приложение: личный кабинет, админку, сервис;
собирать страницы на сервере или заранее через фреймворки над Vue, чаще всего через Nuxt.

Уровни внедрения Vue.js: интерактивный блок на готовой странице, виджет, одностраничное приложение и сайт с серверным рендерингом на Nuxt — Как внедряют Vue по шагам

Для бизнеса это значит, что Vue можно внедрять по шагам: сначала один сложный блок на существующем сайте, потом, если понадобится, отдельное приложение.

Файлы .vue, шаблоны и реактивность

Проект на Vue состоит из компонентов в файлах с расширением .vue. В одном файле лежат шаблон (HTML), логика (JavaScript) и стили (CSS) компонента. Шаблон кнопки корзины выглядит так:

<template>
  <button @click="count++">В корзине: {{ count }}</button>
</template>

Шаблон похож на обычный HTML с парой добавок: @click вешает действие на кнопку, двойные фигурные скобки выводят данные. За данными Vue следит сам: изменилось число, и текст на кнопке обновился без лишнего кода. Эту возможность называют реактивностью.

Логику компонентов пишут в одном из двух стилей: Options API (по разделам: данные, методы) и Composition API (через функции). Документация считает их равноценными, но в одном проекте лучше договориться о едином стиле, иначе код читается тяжело.

Что входит в набор Vue

В отличие от React, у Vue есть официальные библиотеки для типовых задач: Vue Router для адресов страниц, Pinia для общего состояния, create-vue для создания проекта на сборщике Vite. Команда Vue поддерживает и генератор статических сайтов VitePress. Споров о выборе библиотек меньше, и новому разработчику проще разобраться в чужом проекте.

Схема набора Vue.js: ядро с компонентами и реактивностью, официальные Vue Router и Pinia, фреймворки Nuxt и VitePress — Что входит в набор Vue

Vue и React: в чём разница по сути

	Vue.js	React
Как описывают интерфейс	Шаблоны, похожие на HTML	JSX, разметка внутри JavaScript
Маршруты и состояние	Официальные Vue Router и Pinia	Сторонние библиотеки или фреймворк
Кто развивает	Независимая команда Эвана Ю	Фонд React Foundation
Серверный рендеринг	Nuxt	Next.js
Мобильные приложения	Сторонние инструменты	React Native

Задачи у них одни и те же: кабинеты, каталоги, интерактивные сервисы. Vue удобен, когда команда привыкла к HTML-шаблонам или интерактив нужно постепенно встроить в готовый сайт. React удобен, когда рядом планируется мобильное приложение на React Native или в команде уже есть React-разработчики.

Версия, поиск и хостинг: что уточнить у подрядчика

Версия. Сейчас актуален Vue 3. Поддержка Vue 2 закончилась 31 декабря 2023 года, команда Vue больше не выпускает для него обновлений. Для перехода есть официальное руководство по миграции, объём работ зависит от проекта и его библиотек.
Поиск. Одностраничное приложение на Vue собирает страницу в браузере, и с индексацией тут те же вопросы, что у любого JS-сайта: см. JavaScript SEO: CSR и SSR. Документация Vue прямо советует брать фреймворк, если нужен серверный рендеринг.
Хостинг. Одностраничное приложение на Vue после сборки превращается в набор статических файлов, их отдаст любой веб-сервер. Серверный рендеринг через Nuxt уже потребует Node.js или платформы, которая его поддерживает.
Передача проекта. Код в репозитории компании, единый стиль компонентов и список зависимостей с версиями. Тогда проект сможет подхватить другая команда.

Как проверить, что сайт на Vue

Расширение Vue DevTools в браузере показывает, что на странице работает Vue, и даёт посмотреть компоненты.
В инспекторе элементов часто видны атрибуты вида data-v-3f2a1c: их добавляет Vue для стилей компонентов.
Wappalyzer определяет Vue.js, а у сайтов на Nuxt в путях к файлам встречается /_nuxt/.
Точную версию покажет файл package.json в репозитории проекта.

Что делает проект на Vue дорогим в поддержке

Оставаться на Vue 2, пока работает. Старые зависимости копят уязвимости, а чем дольше откладывать переход, тем он дороже.
Делать каталог или блог одностраничным приложением без серверного рендеринга и терять поисковый трафик.
Тянуть в проект библиотеки, которые давно не обновлялись. При переходе на новую версию Vue именно они чаще всего тормозят обновление.
Смешивать два стиля API без правил: через год в проекте трудно разобраться даже его авторам.

Выбор между Vue и React, версии и интеграция с сайтом

В чём разница между Vue и React для заказчика?

Задачи у них одни и те же, отличается подход. Vue описывает интерфейс шаблонами, похожими на HTML, и сам даёт библиотеки для маршрутов и состояния, а в React разметку пишут внутри JavaScript и библиотеки подбирают отдельно. Если позже понадобится мобильное приложение, у React есть React Native, у Vue только сторонние инструменты.

Чем Vue 3 отличается от Vue 2 для владельца проекта?

Vue 2 больше не обновляется: его поддержку прекратили в последний день 2023 года, а документация целиком рассчитана на Vue 3. Для перехода есть официальное руководство, но сроки обычно определяют библиотеки проекта: давно заброшенные пакеты тормозят миграцию сильнее, чем собственный код.

Как подключить Vue к сайту на 1С-Битрикс или другой CMS?

Vue подключают к уже готовой странице, без сборки проекта, и отдают ему один блок: калькулятор, фильтр или форму расчёта. Всё остальное продолжает работать на CMS, как раньше.

Как Vue работает в паре с бэкендом на PHP, Laravel или Python?

Серверная часть может быть на любом языке, потому что Vue работает в браузере. Сервер на PHP с Laravel или на Python с Django отдаёт данные, а Vue показывает их и обновляет экран без перезагрузки. Если же поисковику нужен готовый HTML, рендеринг на сервере делают через Nuxt на Node.js.

Кто развивает Vue.js, если за ним нет корпорации?

Vue создал Эван Ю в 2014 году, сейчас проект ведёт международная команда разработчиков. Кроме ядра, она сама поддерживает Vue Router, Pinia, create-vue и VitePress, а код всего набора открыт под MIT.

Почему каталог на Vue плохо индексируется без Nuxt?

Одностраничное приложение собирает содержимое уже в браузере, и робот получает страницу почти без текста. Поэтому документация Vue сама советует фреймворк с рендерингом на сервере, обычно Nuxt: он отдаёт поисковику готовый HTML. Подробнее о разнице в статье JavaScript SEO: CSR и SSR.

Интерфейсы на Vue делаем в составе услуги разработка сайтов. Если проект уже работает на Vue.js, берём его на доработку и техническую поддержку.

Где проверить

Официальная документация Vue.js: разделы «Introduction», «Quick Start» и «Server-Side Rendering»
Блог Vue: «Vue 2 is Approaching End Of Life», декабрь 2023 года
Vue.js: страница команды проекта

См. также: JavaScript SEO: CSR и SSR, CMS, Скорость сайта, Nuxt, Веб-приложение.