Введите имя домена:
.ua .com.ua .in.ua .org.ua
.ru .com .net .org
Показать все домены

Hello World на Vue

Ответы на вопросы от компании «Украинский хостинг».

Первая программа Hello World на Vue

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

Перед написанием скрипта на Vue, необходимо предварительно установить на сервере веб-сервер Apache.

Рекомендуется создать не root пользователя с доступом к sudo.

В инструкции используется текстовый редактор nano, для установки которого требуется выполнить команду:

yum install nano

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

  1. Обновляем пакеты:

    sudo yum -y update
  2. Устанавливаем веб-сервер Apache:

    sudo yum -y install httpd
  3. Запускаем веб-сервер Apache:

    sudo systemctl start httpd.service
  4. Включаем Apache для запуска при загрузке:

    sudo systemctl enable httpd.service
  5. По умолчанию CentOS 7 использует Firewall-CMD в закрытом режиме, в связи с чем необходимо настроить его для обеспечения доступа по порту 80 (http) или 443 (https), чтобы сделать Apache доступным из Интернета.

    Включаем firewalld:

    sudo systemctl start firewalld

    И поочередно выполняем следующие команды:

    sudo firewall-cmd --permanent --zone=public --add-service=http
    sudo firewall-cmd --permanent --zone=public --add-service=https
    sudo firewall-cmd --reload

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

  6. Создаем тестовый файл .html

    sudo nano /var/www/html/hello_world.html

    Добавляем в него следующий код:

    <!DOCTYPE html>  
    <html lang="en">  
    <head>
    <meta charset="utf 8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello, World!'
        }
    })
    </script>
    </body>
    </html>

    Сохраняем изменение в файле, нажав сочетание клавиш Ctrl+x , затем клавишу y и затем клавишу Enter.

  7. Чтобы запустить скрипт и увидеть результат его выполнения, открываем в браузере следующий адрес (вместо 93.190.42.52 необходимо указать собственный IP адрес или доменное имя):

    http://93.190.42.52/hello_world.html

    На этом создание скрипта на Vue и его запуск завершены.

См.также: