Створення та запуск проекту Vue.js з використанням ServBay

Vue.js — популярний прогресивний фреймворк JavaScript для побудови інтерфейсів користувача. Він простий у використанні, гнучкий і дуже продуктивний, особливо для створення односторінкових застосунків (SPA). ServBay — це потужне локальне оточення для веб-розробки, яке забезпечує зручну підтримку Node.js, працює на macOS і Windows, і є ідеальною платформою для розробки на Vue.js.

У цьому посібнику ви дізнаєтесь, як з нуля створити проект Vue.js у інтегрованому середовищі ServBay, запустити його та отримати доступ у режимах розробки й продакшн.

Що таке Vue.js?

Vue.js — це прогресивний JavaScript-фреймворк для розробки інтерфейсів користувача. На відміну від важких фреймворків, Vue побудований за принципом поступового нарощування функціоналу. Основна бібліотека Vue зосереджена лише на шарі представлення, що робить її простою для старту й легкою для інтеграції із сторонніми бібліотеками чи існуючими проєктами. Остання версія — Vue 3, пропонує багато нових можливостей і покращень: вищу продуктивність, менший розмір пакету і кращу підтримку TypeScript.

Головні переваги та особливості Vue 3

• Composition API (Композиційний API): Організація логіки компонентів через функції, що полегшує підтримку і повторне використання коду, особливо у великих компонентах.
• Підвищена продуктивність: Vue 3 використовує Proxy для реактивності й оптимізований алгоритм віртуального DOM, що значно покращує швидкість.
• Менший розмір пакету: За рахунок tree-shaking основна бібліотека Vue 3 стала ще компактнішою та швидше завантажується.
• Краща підтримка TypeScript: Повноцінні типи для TypeScript роблять роботу з Vue комфортною для розробників, які пишуть на TS.
• Оновлений життєвий цикл компонентів: Нові хуки та функція setup зробили логіку компонентів ще більш прозорою й легкою для керування.

Використання Vue 3 допомагає швидко і ефективно створювати сучасні та швидкі веб-застосунки.

Створення і запуск проекту Vue.js за допомогою інтегрованого середовища ServBay

У цьому матеріалі ви дізнаєтесь, як скористатись середовищем Node.js у складі ServBay для створення та запуску проекту Vue.js. Ми використаємо функцію Веб-сайт у ServBay для налаштування веб-сервера, а також зворотний проксі та сервіс статичних файлів для локального доступу до вашого проекту.

Попередні умови

Перш ніж почати, переконайтеся, що ви:

1. Встановили ServBay: ServBay локальне середовище успішно встановлене.
2. Встановили пакет Node.js: За допомогою менеджера пакетів ServBay інсталювали Node.js. Детальніше про це — у розділі Встановлення та використання Node.js у ServBay.

Створення проекту Vue.js

1. Ініціалізація проекту

   Відкрийте термінал. ServBay рекомендує зберігати сайти у стандартному каталозі. Перейдіть у цей каталог і виконайте npm create vue@latest для ініціалізації нового проекту Vue.js. Ключ @latest гарантує створення проекту на основі найсвіжішої версії CLI або create-vue — зазвичай з Vue 3.

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   Введіть назву проекту (рекомендуємо servbay-vue-app) і виберіть потрібні опції, як TypeScript, Vue Router, Pinia тощо. Наприклад:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Виберіть Yes або No за потреби
   ✔ Add JSX Support? … No # Виберіть Yes або No за потреби
   ✔ Add Vue Router for Single Page Application development? … Yes # Рекомендуємо вибрати Yes
   ✔ Add Pinia for state management? … No # Виберіть Yes або No за потреби
   ✔ Add Vitest for Unit testing? … No # Виберіть Yes або No за потреби
   ✔ Add an End-to-End Testing Solution? … No # Виберіть Yes або No за потреби
   ✔ Add ESLint for code quality? … Yes # Рекомендуємо вибрати Yes
   ✔ Add Prettier for code formatting? … Yes # Рекомендуємо вибрати Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Виберіть Yes або No за потреби

2. Встановлення залежностей

   Після ініціалізації перейдіть у каталог проекту servbay-vue-app і встановіть всі необхідні залежності командою:

   cd servbay-vue-app
   npm install

Зміна стартового контенту проекту (необов’язково)

Щоб переконатися, що проект працює, змініть файл src/App.vue, замінивши стандартний контент простим виводом "Hello ServBay!".

Відкрийте src/App.vue у каталозі вашого проекту та замініть вміст на:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>Це Vue.js застосунок, запущений через ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Налаштування середовища розробки (зворотний проксі)

У режимі розробки Vue-проекти запускають локальний сервер (на базі Vite чи Webpack) з підтримкою гарячого перезавантаження (HMR). ServBay може через зворотний проксі перенаправляти домен на локальну адресу і порт цього сервера.

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

   Запустіть сервер розробки, знаходячись у каталозі проекту, обравши вільний порт (наприклад, 8585):

   npm run dev -- --port 8585

   В терміналі з’явиться адреса, за якою запущений сервер, наприклад http://localhost:8585.

2. Налаштування зворотного проксі у ServBay

   Відкрийте інтерфейс ServBay і перейдіть у розділ Веб-сайти. Додайте новий сайт із типом Зворотний проксі:

   • Назва: My first Vue dev site (або будь-яка зручна)
   • Домен: servbay-vue-dev.servbay.demo (або інший домен із .servbay.demo)
   • Тип сайту: Зворотний проксі
   • IP проксі: 127.0.0.1
   • Порт проксі: 8585 (той самий порт, що використовується при запуску сервера)

   Після збереження ServBay автоматично оновить конфігурацію веб-сервера (Caddy або Nginx), перенаправляючи всі запити до servbay-vue-dev.servbay.demo на http://127.0.0.1:8585.

   Детальна інструкція в розділі Додавання Node.js сайту для розробки у ServBay.

3. Доступ до сайту в режимі розробки

   Переконайтесь, що веб-сервер ServBay працює. Відкрийте браузер і перейдіть за доменом https://servbay-vue-dev.servbay.demo.

   ServBay підтримує автоматичну генерацію SSL-сертифікату для локальних доменів (через ServBay User CA або ServBay Public CA), тому ви можете безпечно працювати через HTTPS — це відтворює реальні умови продакшн. Детальніше у розділі SSL для сайтів у ServBay.

   Після цього у браузері має з’явитися ваша Vue-аплікація у режимі розробки із підтримкою гарячих оновлень.

Збірка та розгортання продакшн-версії (статичний сайт)

Коли розробка завершена, ви можете створити оптимізовану версію проекту для бойового використання у вигляді статичних файлів (HTML, CSS, JavaScript тощо). ServBay дозволяє легко розгорнути такий сайт через функцію Статичний сайт.

1. Збірка продакшн-версії

   Запустіть у каталозі проекту команду для збірки бойової версії:

   npm run build

   Після завершення процесу, оптимізовані файли з’являться у каталозі dist у корені проекту.

2. Налаштування сервісу статичних файлів

   Відкрийте інтерфейс ServBay, перейдіть у розділ Веб-сайти і додайте новий сайт із типом Статичний:

   • Назва: My first Vue production site (або зручна для вас)
   • Домен: servbay-vue-prod.servbay.demo (або інший з .servbay.demo)
   • Тип сайту: Статичний
   • Корінь сайту: Шлях до вашого каталогу dist:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   Збережіть налаштування, і ServBay почне обслуговувати ваш статичний сайт напряму з каталогу dist.

3. Доступ до бойової версії

   Переконайтесь, що веб-сервер ServBay працює. У браузері перейдіть за адресою, яку призначили для бойової версії — https://servbay-vue-prod.servbay.demo.

   Ви побачите оптимізовану версію вашого Vue-застосунку, яка має найкращу швидкість завантаження. Завдяки персоналізованим доменам та автоматичному SSL у ServBay ви можете безпечно переглядати продакшн-сайт локально.

Корисні поради

• Конфлікт портів: Якщо порт 8585 (або ваш обраний) уже зайнятий, команда npm run dev повідомить про помилку. Змініть порт на вільний і відредагуйте відповідно налаштування проксі у ServBay.
• Статус веб-сервера ServBay: Веб-сервер (Caddy або Nginx, залежно від ваших налаштувань) має бути запущений. Якщо ні — доступ по домену буде недоступний.
• Розв’язання домену: ServBay автоматично налаштовує локальні домени з .servbay.demo на адресу 127.0.0.1. Якщо використовуєте інший домен, відредагуйте hosts-файл вручну або скористайтеся Hosts Manager у ServBay.

Висновок

За допомогою ServBay ви можете швидко налаштувати локальне середовище з інтегрованим Node.js для розробки Vue.js-проектів на macOS чи Windows. Функція Веб-сайт дозволяє легко налаштовувати зворотний проксі для доступу до серверу розробки або обслуговувати статичні продакшн-файли, а автоматична генерація доменів і SSL-сертифікатів забезпечує зручність і безпеку. Завдяки ServBay ваш процес створення і запуску локальних Vue.js-проектів стає простим і ефективним.