Vue.js — JavaScript-фреймворк, предназначенный для разработки пользовательских интерфейсов и одностраничных веб-приложений. Разработанный в 2014 году, Vue.js получил широкое распространение благодаря своей простоте, гибкости и удобству интеграции.
Одной из особенностей Vue.js является реактивная система привязки данных. Фреймворк отслеживает изменения в состоянии приложения и автоматически обновляет соответствующие элементы интерфейса без необходимости ручного управления DOM. Благодаря этому разработчик может сосредоточиться на логике приложения и не тратить время на прямую работу с элементами страницы. Такой подход значительно упрощает разработку сложных интерактивных веб-интерфейсов.
Фреймворк отличается высокой гибкостью и может использоваться как для внедрения в существующие проекты, так и для создания полноценных клиентских приложений. Vue.js легко интегрируется с другими библиотеками и серверными технологиями. Также фреймворк поддерживает современную экосистему инструментов разработки, включая сборщики модулей, менеджеры пакетов и средства тестирования.
В статье разберём, как установить Vue.js и с его помощью запустить проект на сервере под управлением Ubuntu и Debian.
Как установить Vue.js на Ubuntu и Debian
На сервере перед установкой и использованием Vue.js необходимо установить Node.js. Связано это с тем, что большинство инструментов экосистемы Vue, такие как сборщики проектов, системы сборки и менеджеры зависимостей, работают на основе среды выполнения Node.js. Именно Node.js используется для запуска утилит разработки, установки пакетов и выполнения команд, связанных с созданием и сборкой Vue-приложений.
В нашем справочнике есть статьи по установке Node.js как на Ubuntu, так и на Debian. В данном случае предпочтительнее использовать установку Node.js из репозитория NodeSource. Данный способ установки позволяет проинсталлировать более актуальную и поддерживаемую версию Node.js, чем та, которая часто доступна в стандартных репозиториях дистрибутивов. Это важно для работы инструментов экосистемы Vue.js, требующих совместимости с новыми версиями Node.js.
Установку Vue CLI выполните с использованием менеджера пакетов npm, который входит в состав среды Node.js. Пакет @vue/cli представляет собой официальный инструмент командной строки для работы с Vue.js. Ключ -g, то есть global, означает глобальную установку. При такой установке пакет становится доступным как системная команда для всех пользователей и может выполняться из любого каталога.
$ sudo npm install -g @vue/cliВ результате установки в системе появится команда vue. С её помощью можно создавать новые проекты, управлять зависимостями, запускать среду разработки и выполнять сборку приложения. Чтобы убедиться в работоспособности Vue.js, выведите версию установленного пакета:
$ vue --version
Как запустить проект на основе Vue.js
Для создания нового проекта на основе Vue.js с помощью инструмента Vue CLI выполните команду:
$ vue create your-vue-projectВ процессе работы мастер предложит выбрать один из вариантов конфигурации. Можно использовать предустановленный набор параметров, включающий базовые настройки, либо выполнить ручную настройку проекта. В режиме ручной конфигурации пользователь может выбрать дополнительные компоненты экосистемы Vue, например, поддержку TypeScript, маршрутизацию, управление состоянием, систему тестирования или средства проверки кода.
При создании проекта через Vue CLI, сервер разработки по умолчанию использует порт 8080. Если в качестве сервера вы используете VPS, то для получения доступа к веб-интерфейсу приложения извне, необходимо разрешить входящие подключения к этому порту в брандмауэре UFW. Чтобы это сделать, в брандмауэр добавьте соответствующее правило:
$ sudo ufw allow 8080/tcpЗатем перейдите в каталог проекта:
$ cd your-vue-project/Для запуска сервера разработки проекта выполните команду:
$ npm run serveПри выполнении команды npm находит скрипт с именем serve и запускает связанную с ним команду. В проектах, созданных с помощью Vue CLI, скрипт serve как правило запускает встроенный сервер разработки, который компилирует исходный код приложения и запускает локальный веб-сервер. Для подключения к веб-интерфейсу откройте браузер и перейдите на X.X.X.X:8080, где вместо X.X.X.X укажите IP-адрес вашего сервера.
Веб-сервер отслеживает изменения в исходных файлах и при их сохранении выполняет пересборку проекта. В результате происходит обновление страницы в браузере.
