Как установить Vue.JS на Ubuntu 22.04

Vue.js — это фреймворк JavaScript, используемый для создания интерактивного пользовательского интерфейса и одностраничных приложений. Он легче и более адаптируем, чем фреймворк AngularJS. Он прост, гибок, модульный, высокопроизводительный, легко усваивается и предоставляет множество инструментов и библиотек, которые упрощают разработку приложений. Если вы знаете основы HTML, CSS и JavaScript, вы можете быстро начать создавать веб-приложения с помощью Vue.js.

Этот гид покажет вам, как установить Vue JS на Ubuntu 22.04.

Предварительные требования

• Сервер с установленной Ubuntu 22.04 для HAProxy.
• Пароль root настроен на всех серверах.

Установка Node.js

Перед началом вам нужно установить Node.js на ваш сервер. По умолчанию последняя версия Node.js не включена в стандартный репозиторий Ubuntu 22.04. Поэтому вам нужно будет установить его из репозитория Node source.

Сначала установите необходимые зависимости, используя следующую команду:

apt install curl gnupg2 gnupg git wget -y

Затем добавьте репозиторий Node source, используя следующую команду:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

После добавления репозитория вы можете установить Node.js с помощью следующей команды:

apt install nodejs -y

После установки Node.js вы можете проверить версию Node.js, используя следующую команду:

node --version

Вы получите следующий вывод:

v16.16.0

Теперь обновите NPM до последней версии, используя следующую команду:

npm install npm@latest -g

Вы также можете проверить версию NPM с помощью следующей команды:

npm --version

Вы должны получить следующий вывод:

8.13.2

Установка Vue CLI

Теперь вы можете использовать NPM для установки пакета Vue CLI с помощью следующей команды:

npm install -g @vue/cli

После установки Vue вы можете проверить версию Vue JS, используя следующую команду:

vue --version

Вы должны увидеть следующий вывод:

@vue/cli 5.0.8

Создание простого приложения с Vue JS

Теперь вы можете использовать Vue CLI для легкого создания вашего приложения. Выполните следующую команду, чтобы создать пример приложения с именем myapp.

vue create myapp

Вы получите следующий вывод:

Vue CLI v5.0.8
?  Создание проекта в /root/myapp.
????  Инициализация репозитория git...
??  Установка плагинов CLI. Это может занять некоторое время...


добавлено 848 пакетов и проверено 849 пакетов за 24 секунды

88 пакетов ищут финансирование
  выполните `npm fund` для получения подробной информации

найдено 0 уязвимостей
????  Вызов генераторов...
????  Установка дополнительных зависимостей...


добавлено 95 пакетов и проверено 944 пакета за 6 секунд

98 пакетов ищут финансирование
  выполните `npm fund` для получения подробной информации

найдено 0 уязвимостей
?  Выполнение хуков завершения...

????  Генерация README.md...

????  Проект myapp успешно создан.
????  Начните с выполнения следующих команд:

 $ cd myapp
 $ npm run serve

 WARN  Пропущен коммит git из-за отсутствия имени пользователя и электронной почты в конфигурации git или неудачного подписания коммита.
       Вам нужно будет выполнить начальный коммит самостоятельно.

Затем перейдите в каталог myapp и перечислите все установленные файлы и каталоги, используя следующую команду:

cd myapp  
ls

Вы получите следующий вывод:

babel.config.js  jsconfig.json  node_modules  package.json  package-lock.json  public  README.md  src  vue.config.js

Запуск приложения Vue JS

Теперь вы можете запустить ваше приложение Vue JS, выполнив следующую команду:

npm run serve

После запуска приложения вы получите следующий вывод:

> [email protected] serve
> vue-cli-service serve

 INFO  Запуск сервера разработки...

 DONE  Компиляция прошла успешно за 6469 мс                                                                                              8:45:33 AM


  Приложение работает на:
  - Локально:   http://localhost:8080/ 
  - Сеть: недоступна

  Обратите внимание, что сборка для разработки не оптимизирована.
  Чтобы создать сборку для продакшена, выполните npm run build.

Доступ к веб-интерфейсу Vue JS

На данный момент приложение Vue JS установлено и слушает на порту 8080. Теперь вы можете открыть ваш веб-браузер и получить доступ к приложению Vue JS, используя URL http://your-serevr-ip. Вы должны увидеть панель управления Vue JS на следующей странице:

Заключение

В этом посте мы объяснили, как установить Vue JS на Ubuntu 22.04. Теперь вы можете начать создавать ваше одностраничное приложение с помощью фреймворка Vue JS. Не стесняйтесь задавать мне вопросы, если у вас есть какие-либо.