Vue.js – это популярная платформа JavaScript, используемая для создания пользовательских интерфейсов. В этом руководстве мы познакомим вас с несколькими методами создания простого приложения «Hello World» с использованием Vue.js версии 3. Независимо от того, являетесь ли вы новичком в Vue.js или выполняете обновление со старой версии, это руководство поможет вам получить начал с Vue 3 и создал свое первое приложение Vue.

Метод 1: подход CDN
Самый простой способ начать работу с Vue.js — использовать сеть доставки контента (CDN). Выполните следующие действия:

Шаг 1. Создайте файл HTML
Создайте новый файл HTML и дайте ему подходящее имя, например index.html. Откройте файл с помощью текстового редактора.

Шаг 2. Добавьте скрипт Vue.js
Включите скрипт Vue.js, добавив следующий код в раздел вашего HTML-файла:

<script src="https://unpkg.com/vue@3.2.0/dist/vue.global.min.js"></script>

Шаг 3. Создайте экземпляр Vue
В разделе вашего HTML-файла добавьте следующий код, чтобы создать экземпляр Vue и отобразить сообщение «Hello World»:

<div id="app">
  {{ message }}
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello World!'
      }
    }
  })
  app.mount('#app')
</script>

Шаг 4. Откройте HTML-файл.
Сохраните изменения в HTML-файле и откройте его в веб-браузере. Вы должны увидеть надпись «Hello World!» сообщение, отображаемое на странице.

Метод 2: подход Vue CLI
Если вы предпочитаете более структурированный подход к созданию приложений Vue, вы можете использовать Vue CLI (интерфейс командной строки). Выполните следующие действия:

Шаг 1. Установите Vue CLI
Установите Vue CLI глобально на свой компьютер, выполнив следующую команду в терминале:

npm install -g @vue/cli

Шаг 2. Создайте новый проект Vue
Создайте новый проект Vue, выполнив в терминале следующую команду:

vue create hello-world

Шаг 3. Настройте проект
Выберите предустановку по умолчанию или вручную выберите функции, которые нужны для вашего проекта. После завершения настройки проекта перейдите в каталог проекта:

cd hello-world

Шаг 4. Запустите сервер разработки
Запустите сервер разработки, выполнив следующую команду:

npm run serve

Шаг 5. Измените компонент по умолчанию.
Откройте файл src/comComponents/HelloWorld.vueв текстовом редакторе и замените существующий код следующим:

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Hello World!'
    }
  }
}
</script>

Шаг 6. Просмотрите приложение в браузере.
Сохраните изменения и перейдите по адресу http://localhost:8080в своем браузере. Вы должны увидеть надпись «Hello World!» отображается сообщение.

В этом руководстве мы рассмотрели два метода создания простого приложения «Hello World» с использованием Vue.js версии 3. Первый метод включал использование CDN, который является быстрым и простым. Второй метод использовал возможности Vue CLI, обеспечивая более структурированный и масштабируемый подход. Какой бы метод вы ни выбрали, Vue.js версии 3 предлагает отличную платформу для создания динамических и адаптивных веб-приложений.