| Vue 3, быстрый старт |
|
| Добавил(а) microsin | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
В этой статье приведен своеобразный конспект сведений, которые почерпнул из курсов Степик [1] и других источников. Незнакомые аббревиатуры и термины расшифрованы в разделе "Словарик", в конце статьи. [1 Введение] 1.1 Vue и Pinia WEB-приложение состоит из 3 основных частей: ● Library это различные компоненты для разного фунционала. Логика приложения пишется на JavaScript или TypeScript. 1. Почему Vue.js? Простота изучения: Низкий порог входа, можно быстро начать работать, если знаешь JavaScript. Vue.js позволяет быстро разрабатывать одностраничные и многостраничные приложения с использованием роутинга, управления состоянием (обеспечивается компонентами Vue Router и Pinia), анимаций и т.д. 2. Для кого этот подойдет Vue? Начинающие Frontend-разработчики: Отличный старт для перехода от JavaScript к фреймворкам. 3. Требуемые знания HTML и CSS: используется верстка, основные знания этих технологий необходимы. [2 Настройка окружения] 2.1 Используется: VSCode и его плагины. 2.2 Настройки VSCode Необходимые расширения: Vue Official: Официальное расширение для поддержки Vue. Homebrew — это менеджер пакетов, который изначально был создан для macOS, а теперь также полноценно работает на Linux. Его основная задача — устанавливать программное обеспечение, которого нет в официальных репозиториях вашей операционной системы. Для чего нужен Homebrew? В двух словах: Homebrew упрощает установку и управление программами через терминал. Вот его ключевые функции: ● Установка программного обеспечения: позволяет устанавливать тысячи утилит, инструментов разработки, библиотек и даже полноценные приложения с графическим интерфейсом (через Homebrew Cask). Как Homebrew работает в Linux (на примере Ubuntu)? В Linux у каждого дистрибутива уже есть свой встроенный менеджер пакетов (например, apt в Ubuntu). Homebrew здесь выступает не как замена, а как дополнение. Его можно использовать для: 1. Установки программ, которых нет или которые устарели в официальных репозиториях Ubuntu. [Основные команды Homebrew] Освоить работу с Homebrew достаточно просто, так как он использует интуитивно понятные команды:
[Установка] $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Для добавления brew в переменную окружения PATH: $ echo >> /home/ваше_имя_пользователя/.bashrc \ Установка зависимостей Homebrew: $ sudo apt-get install build-essential 2.3 Установка NodeJS Способ 1: через официальный Package, который располагается на сайте NodeJS. Преимущество этого способа - простота. Пакет загружается на сайте nodejs.org и устанавливается. Рекомендуется брать последнюю версию LTS (Long Time Support), это четная версия, которая обычно меняется один раз в год. Не рекомендуется выбирать текущую (Current) версию, потому что она находится в разработке, в ней могут быть внесены изменения, из-за чего не все пакеты будут хорошо работать (хотя это мало вероятно для frontend-проектов, которые делают на Vue). Способ 2: через NVM. В этом случае сначала надо установить утилиту nvm в своей операционной системе, с помощью какого-либо менеджера пакетов, например на Linux или MacOS с помощью менеджера пакетов Homebrew. Для Windows есть отдельный NVM Windows. Homebrew: менеджер пакетов (команда brew). После установки следующая команда покажет версию NodeJS: $ node -v 2.4 О работе NVM С помощью NVM можно установить нужную версию NodeJS, например для установки последнего варианта глобальной версии 14: $ node install 14 Можно установить точную версию, например: $ node install 18.7.0 После завершения установки сразу происходит переключение на установленную версию: $ node -v Команда nvm ls выведет список пакетов вместе с алиасами: $ nvm ls Стрелочка показывает на текущую используемую версию node: -> v24.11.1 Команда nvm use позволяет переключиться на нужную версию node, указанную числовым значением. Также для обозначения нужной версии для команды use можно использовать алиасы, например: $ nvm use default Кроме команды node -v текущую версию можно узнать командой nvm current: $ node -v Команда nvm ls-remote выведет все доступные версии, которые можно установить (список очень длинный): $ nvm ls-remote Команда nvm alias — удобный способ создать для версии Node.js короткое и понятное имя. С её помощью можно назначить алиас как для управления на одном компьютере, так и для работы с проектом в команде. [Основное использование] Основной синтаксис команды выглядит так: nvm alias имя_алиаса версия_узла На практике это можно применять следующим образом. Для личного удобства создавайте короткие имена для часто используемых версий. $ nvm alias legacy 14.17.0 Для командной работы в корне проекта создайте файл .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 Команда 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. [Важные особенности и советы] 1. Команда установит только пакеты, а не конфигурацию. Она переносит только сами пакеты. Глобальные настройки npm или конфигурации отдельных пакетов (например, npm config) не копируются. 2. Проверяйте совместимость. Некоторые пакеты могут быть несовместимы с новой, особенно более старой или новой, мажорной версией Node.js. После переноса рекомендуется убедиться, что ключевые инструменты работают корректно. 3. Альтернативный метод — использование nvm install с флагом --reinstall-packages. Более удобный способ сделать то же самое за один шаг — установить новую версию и сразу же скопировать в неё пакеты из текущей. Например, вы в текущей версии 16.14.0. Следующая команда переустановит установленные пакеты в версии 16.14.0 в версию 18.12.0: $ nvm install 18.12.0 --reinstall-packages-from=16.14.0 4. Просмотр списка глобальных пакетов. Если вы хотите сначала посмотреть, что будет скопировано, выполните в исходной версии: $ nvm use 16.14.0 Краткий итог: nvm reinstall-packages — это инструмент для удобного переноса глобального окружения npm между версиями Node.js, который экономит время на повторной ручной установке всех утилит. Команда nvm run версия позволит запустить код в указанном окружении, без смены текущей версии. Команда nvm run позволяет запустить Node.js-скрипт, временно активировав нужную версию Node.js без постоянного переключения текущей версии в оболочке. Это удобно для одноразовых запусков в конкретной версии. [Основное назначение и синтаксис] nvm run версия_node script.js [аргументы] Что происходит: 1. NVM временно активирует указанную версию 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 4. Запуск с использованием алиасов. Можно использовать алиасы вместо номеров версий: $ nvm run lts/hydrogen server.js [Практические сценарии использования] 1. Тестирование совместимости — быстрая проверка, работает ли ваш код в разных версиях Node.js без постоянного переключения. 2. Скрипты в CI/CD — в сценариях сборки можно гарантировать запуск в конкретной версии. 3. Запуск устаревших скриптов — если вам нужно один раз запустить старый скрипт, который работает только в Node.js 14.x, но вы не хотите полностью переключать версию в оболочке. [Важные нюансы] - Временный характер — после выполнения команды ваша оболочка возвращается к предыдущей активной версии Node.js. [Альтернатива: nvm exec] Более гибкая альтернатива — команда nvm exec, которая позволяет выполнить любую команду во временно активированной версии Node.js. Следующая команда делает то же самое, что nvm run: $ nvm exec 18.17.0 node script.js Но также можно запустить другие команды: $ nvm exec 16.20.0 npm test Краткий итог: nvm run — это удобная команда для быстрого запуска JavaScript-файлов в конкретной версии Node.js без постоянного изменения вашего рабочего окружения. Команда nvm deactivate полностью декативирует рабочую среду NodeJS. Команда nvm deactivate отменяет эффект команд nvm use или nvm link для текущей оболочки (сессии терминала), возвращая систему к "системной" или ранее установленной по умолчанию версии Node.js. [Когда используется nvm deactivate] Эта команда нужна в специфическом сценарии: 1. Вы активировали NVM в текущей оболочке через nvm use версия. Что происходит после выполнения. До выполнения nvm deactivate: $ which node После выполнения: $ which node Важно: команда не удаляет и не отключает NVM полностью — она только отменяет текущую сессию NVM в этом конкретном окне терминала. [Пример рабочего сценария] Представьте, что у вас в системе уже была установлена Node.js 14.x через установщик с сайта, а потом вы установили NVM и начали использовать Node.js 18.x. 1. В системе установлена Node.js 14.x (не через NVM) $ node --version 2. Активируем через NVM версию 18.x: $ nvm use 18.17.0 3. Теперь активна версия из NVM $ node --version 4. Хотим временно вернуться к системной версии $ nvm deactivate 5. Снова активна системная версия $ node --version [Распространённые заблуждения]
[Сравнение с похожими командами]
[Практические советы] 1. nvm use system обычно предпочтительнее — более явный и понятный способ переключиться на системную версию. [Когда НЕ нужно использовать nvm deactivate] - Если вы просто хотите переключиться на другую версию Node.js (используйте nvm use версия). Краткий итог: nvm deactivate — это нишевая команда для возврата из сессии NVM к системной установке Node.js. В большинстве повседневных задач достаточно использовать nvm use версия или nvm use system. Команда nvm unload полностью выгружает NVM (Node Version Manager) из текущей сессии оболочки (терминала), отключая все его функции. [Что именно делает команда] После выполнения nvm unload: 1. Удаляются все функции и алиасы NVM из текущей оболочки. [Пример эффекта] ДО выполнения nvm unload: $ nvm --version $ node --version Выполняем выгрузку: $ nvm unload ПОСЛЕ выполнения: $ nvm [Критически важные ограничения] 1. Только текущая сессия — влияет ТОЛЬКО на текущее окно/вкладку терминала. [Сравнение с похожими командами]
[Практические сценарии использования] 1. Отладка проблем с путями (PATH). Если команды node/npm ведут себя странно: $ nvm unload Теперь проверяем, какие версии доступны без NVM. 2. Временная работа с системной Node.js. Когда нужно гарантированно использовать системную установку для конкретной задачи (например, настройка глобального пакета): $ nvm unload 3. Тестирование окружения без NVM. Проверка, будет ли скрипт работать у пользователей без NVM: $ nvm unload [Когда НЕ НАДО использовать nvm unload] - Если вы просто хотите переключить версию Node.js → используйте nvm use версия. [Как восстановить NVM после unload] Если вы случайно выполнили nvm unload и хотите вернуть NVM в текущей сессии: Способ 1 (предпочтительный) — просто закройте текущий терминал и откройте новый. Для bash/zsh: $ source ~/.nvm/nvm.sh Для fish: $ source ~/.nvm/nvm.fish [Альтернативы для частых задач]
Краткий итог: nvm unload — это "тяжёлая артиллерия" для полного удаления NVM из текущего сеанса оболочки. Используйте её крайне редко, только для отладки или специфических задач. В 99% случаев достаточно nvm use system или nvm deactivate. 2.5 Создание проекта Выполните команду: В консоли запустится мастер, в котором должны быть сделаны первоначальные настройки шаблона нового приложения. Последовательно введите имя для приложения (в этом примере 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+. npm ERR! A complete log of this run can be found in: Для исправления ошибки выберите подходящую версию Node.js. Команда nvm list выведет список доступных версий (также используйте nvm ls-remote): $ nvm list $ nvm current $ node -v Для нашего примера ошибки подойдет версия lts/iron: $ nvm install lts/iron $ node -v В результате выполнения всех шагов по созданию приложения получится следующий экран: VITE v7.3.0 ready in 207 ms ➜ Local: http://localhost:5173/ Это уже работающее простое приложение веб-сервера, которое можно протестировать по ссылке по ссылке http://localhost:5173/: [Обзор корневого каталога проекта] Если зайти в каталог vue-app, то мы увидим список сгенерированных папок и файлов: .vscode/ Каталоги проекта:
Файлы проекта:
Что находится внутри папки src/ Это ядро вашего приложения. Его типичная структура выглядит так: src/ [Типичный рабочий процесс] 1. Запуск сервера для разработки: npm run dev (команда определена в package.json). На что следует обратить внимание: ● Все ваши .vue компоненты и основной код находятся в папке src/. [Словарик] 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, обратите внимание на два ключевых варианта.
[Решения на других языках программирования] Если ваш проект не ограничен стеком 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) и используется по умолчанию в новых проектах. [Ссылки] |