Как установить Vue.js на CentOS Stream и Rocky Linux

Vue.js – JavaScript-фреймворк для создания пользовательских интерфейсов и одностраничных веб-приложений (SPA). С момента своего появления в 2014 году он завоевал популярность среди разработчиков благодаря низкому порогу входа, компонентной архитектуре и встроенной реактивной системе.

При используемом в Vue.js декларативном подходе к отрисовке данных разработчик описывает, как должен выглядеть интерфейс при тех или иных данных вместо того, чтобы вручную манипулировать DOM. При этом фреймворк берёт на себя синхронизацию представления с состоянием приложения, что существенно снижает количество ошибок и ускоряет разработку.

Фреймворк органично вписывается в уже существующие проекты. Его можно подключить к отдельной странице, постепенно переводя приложение на Vue, либо с самого начала строить полноценный клиентский интерфейс с маршрутизацией, управлением состоянием и тестами. Vue.js сочетается с различными бэкенд-технологиями и серверными платформами, в том числе с используемыми в корпоративной среде на базе RHEL-совместимых дистрибутивов.

В статье разберём, как установить JavaScript-фреймворк Vue.js на виртуальный выделенный сервер на примере CentOS Stream 10 и Rocky Linux 9.

Как установить Vue.js на CentOS Stream и Rocky Linux

Перед началом работы с Vue.js на сервер необходимо установить Node.js. Это связано с тем, что инструменты экосистемы Vue работают именно через среду выполнения Node.js. Она используется для установки зависимостей через npm, запуска утилит разработки, создания новых проектов и сборки готовых веб-приложений. Без Node.js невозможно полноценно использовать инструменты Vue.js и выполнять команды, необходимые для разработки и публикации приложения.

На CentOS Stream и Rocky Linux для работы с Vue.js рекомендуется использовать установку Node.js при помощи NodeSource. Данный метод инсталляции описан в соответствующей инструкции нашего справочника.

Vue CLI – официальный набор инструментов для работы с проектами на Vue.js через командную строку. С его помощью можно создать новый проект, настроить структуру приложения, подключить дополнительные модули и запускать команды разработки без ручной подготовки конфигурационных файлов. Vue CLI создаёт базовую структуру проекта, устанавливает необходимые зависимости, при этом упрощая настройку инструментов сборки.

Для установки Vue CLI используется менеджер пакетов npm, входящий в состав Node.js. Инструмент рекомендуется устанавливать глобально, чтобы команда управления Vue-проектами была доступна из любого каталога системы. Чтобы проинсталлировать Vue CLI, выполните команду:

$ sudo npm install -g @vue/cli

Флаг -g означает глобальную установку, когда пакет регистрируется как системная команда и становится доступен для всех пользователей вне зависимости от текущего каталога.

После завершения установки убедитесь, что команда vue доступна в системе:

$ vue --version

Команда должна вывести установленную версию Vue CLI.

Создание и запуск проекта

Сервер разработки Vue.js по умолчанию слушает порт 8080. Если на сервере активен firewalld, то необходимо явно разрешить входящие подключения к этому порту:

$ sudo firewall-cmd --permanent --add-port=8080/tcp

Для применения нового правила перезапустите конфигурацию брандмауэра:

$ sudo firewall-cmd --reload

Также проверьте, что правило добавлено:

$ sudo firewall-cmd --list-ports

Вывод команды отображает список портов, которые разрешены в текущей активной зоне брандмауэра. В нашем примере список должен содержать TCP-порт 8080.

Для создания нового проекта выполните команду, где your-vue-project – название проекта:

$ vue create your-vue-project

Мастер создания проекта предложит выбрать конфигурацию:

• Default (Vue 3) – готовый набор базовых настроек для быстрого старта;
• Default (Vue 2) – аналогичный вариант для предыдущей мажорной версии фреймворка;
• Manually select features – ручная настройка.

В качестве теста можно применить дефолтный вариант Vue 3.

После окончания работы мастера перейдите в каталог проекта:

$ cd your-vue-project/

Для запуска встроенного сервера разработки выполните команду:

$ npm run serve

Затем откройте браузер и перейдите на http://X.X.X.X:8080, где X.X.X.X замените на IP-адрес вашего сервера. Браузер должен открыть стартовую страницу нового Vue-приложения.

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