Vue_start.md

План обучения Vue.js для новичка

🎯 Цель: Научиться создавать интерактивные веб-страницы с помощью Vue.js:

• Установить Vue
• Создать страницу
• Переходить между страницами
• Отправлять запросы на сервер
• Работать с веб-сокетами
• Хранить данные в браузере

Шаг 1: Подготовка среды разработки

Задача: Установить Node.js и Vue CLI на Windows 11 и Ubuntu

• Скачать и установить Node.js (Выбери LTS версию)
• Проверить установку Node.js и npm

node -v
npm -v

• Установить Vue CLI глобально

npm install -g npm
npm install -g @vue/cli

• Проверить установку Vue CLI

vue --version

Шаг 2: Создание первого Vue-проекта

🧩 Задача: Создать новый проект с помощью Vue CLI и запустить его

• Открой терминал (например, PowerShell или CMD), для смены диска ввести:

d:

• Выполни команду для создания проекта

vue create hello-vue

• Перейди в папку проекта

cd hello-vue

• Запусти проект

npm run serve

• Открой в браузере http://localhost:8080

Шаг 3: Навигация между страницами (роутинг)

• Установи Vue Router через CLI, открой терминал в папке проекта (hello-vue) и выполни:

vue add router

• После установки ты увидишь новые файлы:

  • src/router.js — здесь настроены маршруты
  • src/views/About.vue и Home.vue — примеры страниц

Шаг 4: Получение данных с сервера при помощи fetch

🧩 Задача: Научиться делать запросы к серверу и выводить полученные данные на странице

💡 Что такое fetch? Представь, что у тебя есть почтальон. Ты просишь его сходить к соседнему дому и принести письмо. В программировании — это как запрос к серверу за данными.

Мы будем использовать бесплатный API:

👉 https://jsonplaceholder.typicode.com/users

Он возвращает список пользователей.

• Отредактируем файл Home.vue следующим образом:

<template>
  <div class="home">
    <h2>Список пользователей</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} ({{ user.email }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      users: []
    }
  },
async mounted() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users'); 
    if (!response.ok) throw new Error('Ошибка сети');
    const data = await response.json();
    this.users = data;
  } catch (error) {
    console.error('Не удалось загрузить данные:', error);
  }
}

}
</script>

📌 Объяснение:

mounted() — специальное "место", где Vue говорит: "Страница готова, можно запускать код"

fetch(...) — отправляем запрос

.then(...) — обрабатываем ответ

this.users = data — записываем полученные данные в переменную

Шаг 5: Работа с веб-сокетами (WebSocket)

🧩 Задача: Научиться получать данные в реальном времени через WebSocket

💡 Что такое веб-сокеты?

Представь, что ты играешь в мяч с другом. Раньше ты бросал мяч и ждал, пока он вернётся — это как fetch. А теперь вы просто держите связь открытым и можете обмениваться мячом в любое время — это и есть веб-сокеты .

Мы будем использовать демо-сервер: wss://echo.websocket.org

<template>
  <div class="home">
    <h2>WebSocket чат</h2>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="Напиши что-нибудь..." />
    <button @click="sendMessage">Отправить</button>

    <ul>
      <li v-for="(msg, index) in messages" :key="index">
        {{ msg }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      message: '',
      messages: [],
      socket: null
    }
  },
  mounted() {
    // Подключаемся к серверу
    this.socket = new WebSocket('wss://echo.websocket.org')

    // Слушаем сообщения
    this.socket.onmessage = (event) => {
      this.messages.push('Сервер: ' + event.data)
    }

    // Проверяем ошибки
    this.socket.onerror = (error) => {
      console.log('Ошибка WebSocket:', error)
    }
  },
  methods: {
    sendMessage() {
      if (this.message.trim()) {
        this.socket.send(this.message)
        this.messages.push('Вы: ' + this.message)
        this.message = ''
      }
    }
  }
}
</script>