В этой статье приведен своеобразный конспект сведений, которые почерпнул из курсов Степик [1] и других источников. Незнакомые аббревиатуры и термины расшифрованы в разделе "Словарик", в конце статьи.
[1 Введение]
1.1 Vue и Pinia
WEB-приложение состоит из 3 основных частей:
● Library это различные компоненты для разного фунционала. ● Pinia это State manager. ● Router это поддержка полноценного многостраничного приложения с традиционными сервисами (авторизацией, настройками и т. п.).
Логика приложения пишется на JavaScript или TypeScript.
1. Почему Vue.js?
Простота изучения: Низкий порог входа, можно быстро начать работать, если знаешь JavaScript. Чистый синтаксис: Компоненты, логика и стили в одном файле. Активное сообщество: Быстрое развитие и поддержка экосистемы. Сравнение с React: Меньше подводных камней и хорошая экосистема, аналогичная React.
Vue.js позволяет быстро разрабатывать одностраничные и многостраничные приложения с использованием роутинга, управления состоянием (обеспечивается компонентами Vue Router и Pinia), анимаций и т.д.
2. Для кого этот подойдет Vue?
Начинающие Frontend-разработчики: Отличный старт для перехода от JavaScript к фреймворкам.
3. Требуемые знания
HTML и CSS: используется верстка, основные знания этих технологий необходимы. JavaScript: нужно иметь хорошее понимание, так как он является основой работы с Vue. TypeScript (опционально): базовые знания помогут, особенно знание интерфейсов и типизаций.
[2 Настройка окружения]
2.1 Используется:
VSCode и его плагины. Fork, удобный клиент git - не обязательно, можно пользоваться командной строкой. На Linux нет Fork, но есть альтернативы: бесплатные утилиты командной строки Gitg, Meld, а также GitKraken и Sublime Merge. Firefox (обертка Zen) - не обязательно, можно использовать Chrome. Нужен для отображения приложения. Node.js, основной инструментарий (npm).
2.2 Настройки VSCode
Необходимые расширения:
Vue Official: Официальное расширение для поддержки Vue. ESLint: Для подсветки синтаксиса и форматирования стилей. Printer: Для автоматического форматирования кода. Env: Подсветка синтаксиса для .env файлов (не обязательно).
Homebrew — это менеджер пакетов, который изначально был создан для macOS, а теперь также полноценно работает на Linux. Его основная задача — устанавливать программное обеспечение, которого нет в официальных репозиториях вашей операционной системы.
Для чего нужен Homebrew?
В двух словах: Homebrew упрощает установку и управление программами через терминал. Вот его ключевые функции:
● Установка программного обеспечения: позволяет устанавливать тысячи утилит, инструментов разработки, библиотек и даже полноценные приложения с графическим интерфейсом (через Homebrew Cask). ● Простота управления: c помощью коротких команд можно легко обновлять, удалять и искать пакеты. ● Разрешение зависимостей: Homebrew автоматически находит и устанавливает все необходимые для работы программы дополнительные библиотеки (зависимости). ● Изоляция и безопасность: программы устанавливаются в собственную директорию Homebrew (/opt/homebrew или /home/linuxbrew/.linuxbrew) и символически связываются с системой, что минимизирует вмешательство в работу ОС.
Как Homebrew работает в Linux (на примере Ubuntu)?
В Linux у каждого дистрибутива уже есть свой встроенный менеджер пакетов (например, apt в Ubuntu). Homebrew здесь выступает не как замена, а как дополнение. Его можно использовать для:
1. Установки программ, которых нет или которые устарели в официальных репозиториях Ubuntu. 2. Создания единой среды для управления пакетами на компьютерах с разными ОС (например, если вы работаете и на macOS, и на Linux).
[Основные команды Homebrew]
Освоить работу с Homebrew достаточно просто, так как он использует интуитивно понятные команды:
Способ 1: через официальный Package, который располагается на сайте NodeJS. Преимущество этого способа - простота. Пакет загружается на сайте nodejs.org и устанавливается. Рекомендуется брать последнюю версию LTS (Long Time Support), это четная версия, которая обычно меняется один раз в год. Не рекомендуется выбирать текущую (Current) версию, потому что она находится в разработке, в ней могут быть внесены изменения, из-за чего не все пакеты будут хорошо работать (хотя это мало вероятно для frontend-проектов, которые делают на Vue).
Способ 2: через NVM. В этом случае сначала надо установить утилиту nvm в своей операционной системе, с помощью какого-либо менеджера пакетов, например на Linux или MacOS с помощью менеджера пакетов Homebrew. Для Windows есть отдельный NVM Windows.
Стрелочка показывает на текущую используемую версию node:
-> v24.11.1 system
Команда nvm use позволяет переключиться на нужную версию node, указанную числовым значением. Также для обозначения нужной версии для команды use можно использовать алиасы, например:
$ nvm use default Now using node v24.11.1 (npm v11.6.2)
Кроме команды node -v текущую версию можно узнать командой nvm current:
$ node -v v24.11.1 $ nvm current v24.11.1
Команда nvm ls-remote выведет все доступные версии, которые можно установить (список очень длинный):
Команда nvm alias — удобный способ создать для версии Node.js короткое и понятное имя. С её помощью можно назначить алиас как для управления на одном компьютере, так и для работы с проектом в команде.
[Основное использование]
Основной синтаксис команды выглядит так:
nvm alias имя_алиаса версия_узла
На практике это можно применять следующим образом. Для личного удобства создавайте короткие имена для часто используемых версий.
$ nvm alias legacy 14.17.0 $ nvm alias stable 18.16.1
Для командной работы в корне проекта создайте файл .nvmrc и укажите в нём нужную версию (например, 20.11.0). После этого вы или любой другой разработчик, зайдя в папку, сможет выполнить просто nvm use, и NVM автоматически переключит версию, указанную в файле.
Установка версии по умолчанию. Это специальный алиас default. Он задаёт версию Node.js, которая будет автоматически загружаться в каждом новом окне терминала.
$ nvm alias default 20.11.0
[Управление алиасами]
Просмотр всех алиасов: выполните команду nvm ls. В выводе команды будет раздел, где перечислены все созданные алиасы.
Удаление алиаса: если алиас больше не нужен, удалите его командой nvm unalias имя_алиаса.
[Рекомендации]
Для командной работы файл .nvmrc предпочтительнее личных алиасов, так как он гарантирует, что все разработчики в проекте используют одинаковую версию Node.js. Личные алиасы лучше подходят для ваших рабочих предпочтений, например, чтобы быстро переключаться между stable и lts.
Команда npm install-latest-npm установит последний вариант для текущей версии npm.
Для каждой установленной версии NodeJS создается отдельный каталог. Чтобы узнать месторасположения каталога нужной версии, исопльзуйте команду nvm which номер_версии, вместо номера версии можно также использовать имена алиасов:
$ nvm which 24 /home/user/.nvm/versions/node/v24.11.1/bin/node $ nvm which current /home/user/.nvm/versions/node/v24.11.1/bin/node $ nvm which default N/A: version "default -> v24.12.0" is not yet installed. You need to run `nvm install default` to install and use it.
Команда nvm reinstall-packages добавит к установленной чистой версии уже установленные пакеты из указанной версии.
Команда nvm reinstall-packages копирует все глобально установленные npm-пакеты из одной версии Node.js в другую.
Когда вы устанавливаете новую версию Node.js через NVM, она поставляется с "чистым" npm — в ней нет пакетов, которые вы устанавливали ранее глобально (например, yarn, nodemon, typescript, vue-cli и т. д.). Вместо того, чтобы устанавливать их заново вручную, nvm reinstall-packages автоматически считывает список пакетов из исходной версии и устанавливает их в новую.
Синтаксис:
nvm reinstall-packages исходная_версия
[Пример использования]
Допустим, вы работали на Node.js версии 16.14.0 и установили глобально несколько утилит. Теперь вы установили свежую версию 18.12.0 и хотите перенести в неё все свои пакеты.
1. Сначала переключитесь на новую версию:
$ nvm use 18.12.0
2. Затем выполните команду, указав версию, из которой нужно взять пакеты:
$ nvm reinstall-packages 16.14.0
NVM автоматически:
- Получит список всех глобальных пакетов из 16.14.0. - Установит их (с теми же версиями) в текущую активную версию 18.12.0.
[Важные особенности и советы]
1. Команда установит только пакеты, а не конфигурацию. Она переносит только сами пакеты. Глобальные настройки npm или конфигурации отдельных пакетов (например, npm config) не копируются.
2. Проверяйте совместимость. Некоторые пакеты могут быть несовместимы с новой, особенно более старой или новой, мажорной версией Node.js. После переноса рекомендуется убедиться, что ключевые инструменты работают корректно.
3. Альтернативный метод — использование nvm install с флагом --reinstall-packages.
Более удобный способ сделать то же самое за один шаг — установить новую версию и сразу же скопировать в неё пакеты из текущей. Например, вы в текущей версии 16.14.0. Следующая команда переустановит установленные пакеты в версии 16.14.0 в версию 18.12.0:
4. Просмотр списка глобальных пакетов. Если вы хотите сначала посмотреть, что будет скопировано, выполните в исходной версии:
$ nvm use 16.14.0 $ npm list -g --depth=0
Краткий итог: nvm reinstall-packages — это инструмент для удобного переноса глобального окружения npm между версиями Node.js, который экономит время на повторной ручной установке всех утилит.
Команда nvm run версия позволит запустить код в указанном окружении, без смены текущей версии.
Команда nvm run позволяет запустить Node.js-скрипт, временно активировав нужную версию Node.js без постоянного переключения текущей версии в оболочке. Это удобно для одноразовых запусков в конкретной версии.
[Основное назначение и синтаксис]
nvm run версия_node script.js [аргументы]
Что происходит:
1. NVM временно активирует указанную версию Node.js. 2. Запускает указанный JavaScript-файл в этой версии. 3. После выполнения возвращает вашу оболочку к предыдущей активной версии Node.js.
[Примеры использования]
1. Базовый запуск скрипта. Запустит script.js во временно активированной Node.js 18.17.0:
$ nvm run 18.17.0 script.js
2. Запуск с передачей аргументов скрипту. Аргументы после имени файла скрипта передаются в сам скрипт:
$ nvm run 16.20.2 app.js --port=3000 --env=development
3. Быстрая проверка версии Node.js для скрипта. Вот так можно проверить, работает ли скрипт в разных версиях:
$ nvm run 14.21.3 test-compatibility.js $ nvm run 20.11.0 test-compatibility.js
4. Запуск с использованием алиасов. Можно использовать алиасы вместо номеров версий:
$ nvm run lts/hydrogen server.js $ nvm run default benchmark.js
[Практические сценарии использования]
1. Тестирование совместимости — быстрая проверка, работает ли ваш код в разных версиях Node.js без постоянного переключения.
2. Скрипты в CI/CD — в сценариях сборки можно гарантировать запуск в конкретной версии.
3. Запуск устаревших скриптов — если вам нужно один раз запустить старый скрипт, который работает только в Node.js 14.x, но вы не хотите полностью переключать версию в оболочке.
[Важные нюансы]
- Временный характер — после выполнения команды ваша оболочка возвращается к предыдущей активной версии Node.js. - Алиасы работают — можно использовать алиасы типа lts/*, stable, default. - Локальные .nvmrc — команда не учитывает файл .nvmrc в текущей директории, нужно явно указывать версию.
[Альтернатива: nvm exec]
Более гибкая альтернатива — команда nvm exec, которая позволяет выполнить любую команду во временно активированной версии Node.js. Следующая команда делает то же самое, что nvm run:
$ nvm exec 18.17.0 node script.js
Но также можно запустить другие команды:
$ nvm exec 16.20.0 npm test $ nvm exec 14.21.0 npx jest
Краткий итог: nvm run — это удобная команда для быстрого запуска JavaScript-файлов в конкретной версии Node.js без постоянного изменения вашего рабочего окружения.
Команда nvm deactivate полностью декативирует рабочую среду NodeJS.
Команда nvm deactivate отменяет эффект команд nvm use или nvm link для текущей оболочки (сессии терминала), возвращая систему к "системной" или ранее установленной по умолчанию версии Node.js.
[Когда используется nvm deactivate]
Эта команда нужна в специфическом сценарии:
1. Вы активировали NVM в текущей оболочке через nvm use версия. 2. Теперь хотите "вернуться" к версии Node.js, которая была активна до NVM (обычно это версия, установленная в системе не через NVM).
Что происходит после выполнения. До выполнения nvm deactivate:
$ which node /Users/username/.nvm/versions/node/v18.17.0/bin/node $ nvm deactivate
После выполнения:
$ which node /usr/local/bin/node (или другой системный путь)
Важно: команда не удаляет и не отключает NVM полностью — она только отменяет текущую сессию NVM в этом конкретном окне терминала.
[Пример рабочего сценария]
Представьте, что у вас в системе уже была установлена Node.js 14.x через установщик с сайта, а потом вы установили NVM и начали использовать Node.js 18.x.
1. В системе установлена Node.js 14.x (не через NVM)
$ node --version v14.21.0
2. Активируем через NVM версию 18.x:
$ nvm use 18.17.0
3. Теперь активна версия из NVM
$ node --version v18.17.0
4. Хотим временно вернуться к системной версии
$ nvm deactivate
5. Снова активна системная версия
$ node --version v14.21.0
[Распространённые заблуждения]
Заблуждение
Реальность
"Отключает NVM навсегда"
Отключает только для текущей сессии терминала
"Удаляет установленные версии"
Не удаляет никакие версии Node.js
"Аналог nvm unload"
deactivate работает иначе, чем nvm unload (который полностью выгружает NVM из оболочки)
[Сравнение с похожими командами]
Команда
Назначение
Сфера применения
nvm deactivate
Возврат к системной Node.js
Текущая оболочка
nvm use system
Явное переключение на системную Node.js
Текущая оболочка
nvm unload
Полное удаление NVM из оболочки
Полное отключение NVM
[Практические советы]
1. nvm use system обычно предпочтительнее — более явный и понятный способ переключиться на системную версию. 2. Часто используется в скриптах — когда нужно временно использовать NVM, а затем гарантированно вернуться к системной версии. 3. После деактивации NVM всё ещё доступен — вы можете снова выполнить nvm use, если потребуется. 4. Новая вкладка/окно терминала не будет затронута — deactivate влияет только на текущую сессию/терминал.
[Когда НЕ нужно использовать nvm deactivate]
- Если вы просто хотите переключиться на другую версию Node.js (используйте nvm use версия). - Если вы хотите полностью отключить NVM (используйте nvm unload, но это редко нужно). - Если вы закрываете терминал (просто закройте его, эффект nvm use и так не сохранится).
Краткий итог: nvm deactivate — это нишевая команда для возврата из сессии NVM к системной установке Node.js. В большинстве повседневных задач достаточно использовать nvm use версия или nvm use system.
Команда nvm unload полностью выгружает NVM (Node Version Manager) из текущей сессии оболочки (терминала), отключая все его функции.
[Что именно делает команда]
После выполнения nvm unload:
1. Удаляются все функции и алиасы NVM из текущей оболочки. 2. Команды nvm, node, npm, npx перестают работать (если они были установлены через NVM). 3. Возвращаются пути (PATH) к системным бинарникам, если они существуют. 4. Текущая сессия терминала "забывает" о NVM.
[Пример эффекта]
ДО выполнения nvm unload:
$ nvm --version 0.39.0
$ node --version v18.17.0 (управляется через NVM) $ which node /Users/username/.nvm/versions/node/v18.17.0/bin/node
Выполняем выгрузку:
$ nvm unload
ПОСЛЕ выполнения:
$ nvm command not found: nvm node --version # возможно будет выведена системная версия ИЛИ command not found $ which node # другой путь ИЛИ ничего не найдено
[Критически важные ограничения]
1. Только текущая сессия — влияет ТОЛЬКО на текущее окно/вкладку терминала. 2. Не удаляет файлы — не удаляет установленные версии Node.js или сам NVM. 3. Обратимость только через перезапуск — чтобы снова использовать NVM в этой же сессии, нужно: - Либо перезапустить терминал. - Либо вручную загрузить NVM (обычно через source ~/.nvm/nvm.sh).
[Сравнение с похожими командами]
Команда
Эффект
Обратимость в той же сессии
nvm unload
Полное удаление NVM из оболочки
Нет (только перезапуск)
nvm deactivate
Возврат к системной Node.js, но NVM остаётся доступен
Да (через nvm use)
nvm use system
Переключение на системную Node.js
Да (через nvm use версия)
[Практические сценарии использования]
1. Отладка проблем с путями (PATH). Если команды node/npm ведут себя странно:
$ nvm unload
Теперь проверяем, какие версии доступны без NVM.
2. Временная работа с системной Node.js. Когда нужно гарантированно использовать системную установку для конкретной задачи (например, настройка глобального пакета):
$ nvm unload
3. Тестирование окружения без NVM. Проверка, будет ли скрипт работать у пользователей без NVM:
$ nvm unload ./run-my-script.sh
[Когда НЕ НАДО использовать nvm unload]
- Если вы просто хотите переключить версию Node.js → используйте nvm use версия. - Если хотите временно использовать системную версию → используйте nvm use system или nvm deactivate. - Если у вас проблемы с конкретной версией Node.js → попробуйте nvm reinstall-packages или установите другую версию.
[Как восстановить NVM после unload]
Если вы случайно выполнили nvm unload и хотите вернуть NVM в текущей сессии:
Способ 1 (предпочтительный) — просто закройте текущий терминал и откройте новый. Способ 2 — вручную загрузите скрипт.
Для bash/zsh:
$ source ~/.nvm/nvm.sh
Для fish:
$ source ~/.nvm/nvm.fish
[Альтернативы для частых задач]
Задача
Лучшая команда
Почему лучше
Временное использование системной Node.js
nvm use system
NVM остаётся доступен
Проверка работы без NVM
Открыть новый терминал без NVM
Чистое тестирование
Сброс проблемного окружения
nvm deactivate → nvm use версия
Менее разрушительно
Краткий итог: nvm unload — это "тяжёлая артиллерия" для полного удаления NVM из текущего сеанса оболочки. Используйте её крайне редко, только для отладки или специфических задач. В 99% случаев достаточно nvm use system или nvm deactivate.
2.5 Создание проекта
Выполните команду:
$ npm create vite@latest
В консоли запустится мастер, в котором должны быть сделаны первоначальные настройки шаблона нового приложения.
Последовательно введите имя для приложения (в этом примере vue-app) и выберите фреймворк Vue:
Выберите основной язык приложения (в этом примере JavaScript):
Для опции rolldown-vite оставьте по умолчанию No. В ответ на вопрос "Install with npm and start now?" ответьте Yes.
При запуске npm-команд сборки проекта вы можете столкнуться с ошибками наподобие следующей:
You are using Node.js 18.19.1. Vite requires Node.js version 20.19+ or 22.12+. Please upgrade your Node.js version. error when starting dev server: TypeError: crypto.hash is not a function at getHash (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:2444:19) at getLockfileHash (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:32382:9) at getDepHash (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:32385:23) at initDepsOptimizerMetadata (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:31844:53) at createDepsOptimizer (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:34032:17) at new DevEnvironment (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:34806:109) at Object.defaultCreateClientDevEnvironment [as createEnvironment] (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:35218:9) at file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:25389:52 at Array.map (< anonymous>) at _createServer (file:///home/vue-app/node_modules/vite/dist/node/chunks/config.js:25388:58) npm ERR! code 1 npm ERR! path /home/vue-curse npm ERR! command failed npm ERR! command sh -c create-vite
npm ERR! A complete log of this run can be found in: npm ERR! /home/.npm/_logs/2025-12-25T05_18_19_634Z-debug-0.log
Для исправления ошибки выберите подходящую версию Node.js. Команда nvm list выведет список доступных версий (также используйте nvm ls-remote):
Настройки VSCode, необходимые для отображения различных элементов проекта Vue.
node_modules/
Папка со всеми зависимостями проекта. Её создаёт npm/yarn при установке пакетов. Не коммитится в Git (добавляется в .gitignore).
public/
Статические ресурсы, которые должны быть доступны напрямую по своему имени (например, favicon.ico, роботы для SEO robots.txt). Файлы из этой папки не обрабатываются сборщиком Vite и копируются как есть.
src/
Исходный код приложения. Это главная рабочая папка, где вы будете проводить 90% времени.
Файлы проекта:
Файл
Назначение
index.html
Главная HTML-страница приложения. Vite автоматически добавляет в неё ссылки на собранные JavaScript и CSS. Точка входа.
package.json
Манифест проекта. Содержит список зависимостей (dependencies, devDependencies), метаданные проекта (имя, версия) и определения скриптов (scripts) для запуска команд (npm run dev, npm run build).
package-lock.json
Фиксирует точные версии всех зависимостей и их подзависимостей. Автоматически создаётся npm. Нужен для гарантии одинаковых сборок на разных компьютерах. Коммитится в Git.
README.md
Документация проекта в формате Markdown. Обычно здесь описывают, как установить, настроить и запустить проект.
vite.config.js
Конфигурационный файл для сборщика Vite. Здесь настраиваются параметры разработки, сборки, плагины (например, @vitejs/plugin-vue для поддержки .vue файлов) и многое другое.
.gitignore
Список файлов и папок, которые не должны попадать в репозиторий Git.
Что находится внутри папки src/
Это ядро вашего приложения. Его типичная структура выглядит так:
src/ ├── assets/ # Ресурсы, которые обрабатывает Vite (изображения, шрифты, стили) ├── components/ # Переиспользуемые Vue-компоненты (.vue файлы) ├── router/ # Файлы конфигурации маршрутизации (если используется vue-router) ├── stores/ # Файлы управления состоянием (если используется Pinia) ├── views/ или pages/ # Компоненты-страницы для маршрутов ├── App.vue # Корневой компонент всего приложения └── main.js или main.ts # Точка входа JavaScript/TypeScript, где создаётся # и монтируется приложение
[Типичный рабочий процесс]
1. Запуск сервера для разработки: npm run dev (команда определена в package.json). 2. Сборка для развертывания приложения: npm run build — создаёт оптимизированные файлы в папке dist/. 3. Установка нового пакета: npm install имя_пакета. Установка всех пакетов, от которых зависит приложение: npm install.
На что следует обратить внимание:
● Все ваши .vue компоненты и основной код находятся в папке src/. ● Файл index.html — это шаблон. Vite автоматически подключит к нему скрипты. ● Конфигурация сборки меняется в vite.config.js. Например, там можно настроить порт сервера разработки или алиасы для импортов.
[Словарик]
API В контексте программирования на Node.js (JavaScript, TypeScript, Vue и все что с этим связано) под API подразумевается нечто не совсем то, что имеется в виду под Application Program Interface при программировании PC-приложений на C/C++. А именно: ...
backend невидимая для пользователя часть приложения, которая обычно расположена и работает на сервере.
DOM (Document Object Model) — это представление HTML- или XML-документа в виде древовидной структуры объектов (узлов), с которой программы (например, JavaScript) могут взаимодействовать, чтобы изменять структуру, стиль и содержание веб-страницы.
Figma В экосистеме Vue.js термин "Figma" относится не к самостоятельному инструменту, а к популярному дизайн-инструменту. Связь между ними строится вокруг ускорения процесса переноса готовых дизайнов из Figma в рабочий код на Vue.
frontend внешняя сторона приложения, которую видит пользователь - его внешний вид и поведение.
Homebrew менеджер пакетов, который изначально был создан для macOS, а теперь также полноценно работает на Linux. Его основная задача — устанавливать программное обеспечение, которого нет в официальных репозиториях вашей операционной системы.
JWT-токен JWT это современный, компактный и безопасный (при правильном использовании) стандарт для аутентификации в веб-приложениях и API. Он особенно удобен в связке с фронтенд-фреймворками, такими как Vue.js, для создания SPA (Single Page Applications).
node Node.js, runtime обработчик приложения JavaScript или TypeScript. Существуют альтернативы: Bun и Deno.
В области серверной разработки на JavaScript, Node.js — безусловно, популярный выбор, но у него есть альтернативы. Они включают как другие среды выполнения для JavaScript, так и экосистемы на других языках программирования, каждая из которых ориентирована на определенные задачи.
[Прямые альтернативы на JavaScript/TypeScript]
Если ваша цель — найти среду, которая может напрямую запускать существующий код JavaScript/TypeScript, обратите внимание на два ключевых варианта.
Название
Ключевые особенности
Преимущества
Недостатки
Типичные сценарии использования
Bun
Очень высокая скорость, интегрированность, совместимость с Node.js
Выдающаяся производительность (особенно скорость запуска и установки пакетов), удобство для разработчика (встроенные сборка, тесты, менеджер пакетов), высокая совместимость с Node.js
Экосистема менее зрелая (некоторые npm-пакеты могут требовать доработки), требует проверки в промышленной эксплуатации
Новые проекты (особенно где важна скорость), быстрая разработка прототипов, проекты, где нужно повысить производительность существующего стека
Deno
Безопасность прежде всего, нативная поддержка TypeScript, современные стандарты
Безопасность по умолчанию (требуется явное разрешение), встроенные инструменты (форматирование, тестирование и др.), ориентация на веб-стандарты
Экосистема менее зрелая, чем у npm, требуется привыкнуть к импорту модулей по URL
Проекты с высокими требованиями к безопасности, проекты на TypeScript/современном JS, edge-вычисления, промежуточное ПО
[Решения на других языках программирования]
Если ваш проект не ограничен стеком JavaScript или есть особые требования к производительности, параллелизму и парадигмам, рассмотрите эти зрелые экосистемы.
● Go (Golang): известен своим простым синтаксисом и эффективной моделью параллелизма (горутины). Идеально подходит для создания высокопроизводительных микросервисов, сетевых сервисов и CLI-инструментов. Это компилируемый язык с быстрым выполнением и простым развертыванием (единый исполняемый файл).
● Elixir: основан на виртуальной машине Erlang, создан для высокого параллелизма, надежности и приложений реального времени. Может обрабатывать миллионы легковесных параллельных процессов. Отлично подходит для систем мгновенного обмена сообщениями, чатов и других систем с высокими требованиями к доступности.
● Rust: язык системного уровня, ориентированный на безопасность памяти и нулевую стоимость абстракций. Обеспечивает производительность, сравнимую с C++, но предотвращает ошибки памяти на этапе компиляции. Подходит для проектов, где критически важны производительность и безопасность: системные утилиты, игровые движки, WebAssembly.
● Python: славится простым синтаксисом и богатой экосистемой. Хотя по чистой вычислительной производительности он может уступать, у него нет равных в области науки о данных, машинного обучения, искусственного интеллекта и скриптов автоматизации.
[Как выбрать подходящий вариант?]
Для быстрого принятия решения вы можете следовать этой схеме:
Краткий итог: если ваш приоритет — остаться в экосистеме JavaScript/TypeScript, то Bun и Deno — прямые конкуренты Node.js, предлагающие более высокую производительность или современные возможности. Если вы открыты для других языков, то Go и Elixir отлично справляются с параллельными задачами, Rust дает максимальный контроль над производительностью и безопасностью, а Python доминирует в сфере работы с данными.
NVM Node Version Manager, управление версиями Node.js (https://github.com/nvm-sh/nvm)
SPA Single Page Application, одностраничное приложение.
Pinia официальная библиотека для управления состоянием (state) в Vue.js-приложениях. Она решает проблему централизованного хранения и контроля над общими данными, которые используются многими компонентами, например, данными пользователя или содержимым корзины покупок.
Portal В контексте Vue понятие "Portal" относится к возможности рендерить часть компонента в другом месте DOM, а не там, где он определён логически. Это ключевое решение для модальных окон, всплывающих уведомлений и других элементов, которые должны появляться поверх основного интерфейса. Основная цель — преодолеть ограничения, которые создаёт вложенная иерархия DOM.
Существует два основных способа реализации этой технологии в Vue, которые отражают её развитие: Portal-Vue (сторонняя библиотека) и Teleport (встроенный, официальный компонент Vue 3).
Router официальная библиотека для создания навигации и маршрутизации в одностраничных приложениях (Single Page Applications, SPA) на Vue.js.
Saas (Software as a Service, "программное обеспечение как услуга") — модель, где приложение работает в облаке и доступно через браузер по подписке. Под этим обычно понимают использование фреймворка Vue.js для создания фронтенда SaaS-приложений, таких как онлайн-платформы по подписке.
Transition компонент, встроенный в Vue.js, работающий как инструмент для создания плавных анимаций при добавлении, удалении и изменении элементов в DOM.
UX (User Experience, пользовательский опыт) для Vue — практика проектирования и создания интуитивных, отзывчивых и приятных в использовании интерфейсов с помощью экосистемы Vue.js. Это не отдельный инструмент, а методология и набор принципов, которые реализуются через возможности фреймворка.
vite сборщик Vue-приложения. Vite (перевод с французского "быстрый") это современный инструмент для сборки и разработки, созданный специально для веб-проектов и ставший стандартом для Vue.js. Это не часть Vue, но официально рекомендован его создателем Эваном Ю (Evan You) и используется по умолчанию в новых проектах.