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

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

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

Що таке Vue.js?

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

Ключові особливості та переваги Vue 3

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

З Vue 3 розробники можуть ще ефективніше створювати сучасні, швидкі та реактивні веб-додатки.

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

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

Передумови

Перед початком переконайтесь, що налаштовано таке:

1. Встановлено ServBay: На вашому macOS успішно інстальовано локальне середовище розробки ServBay.
2. Встановлено пакет Node.js: Через інструменти керування пакетами ServBay додано пакет Node.js. Детальні кроки дивіться у розділі Встановлення та використання Node.js у ServBay.

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

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

   Спочатку відкрийте термінал. Рекомендується зберігати проєкти вебсайтів у каталозі /Applications/ServBay/www. Перейдіть у цю директорію та використайте команду npm create vue@latest для ініціалізації нового проєкту Vue.js. @latest гарантує використання новітньої версії CLI чи create-vue, зазвичай це створить проєкт на Vue 3.

   cd /Applications/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. Запуск сервера розробки

   У кореневій директорії проєкту запустіть команду для старту dev-серверу. Використайте параметр --port для вказання порту (наприклад, 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 (той самий, що й у dev-сервері)

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

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

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

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

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

   Ви побачите свій Vue-застосунок у режимі розробки, і зможете насолоджуватись перевагами hot reload під час правок коду.

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

Коли розробку завершено і сайт готовий до релізу, вам потрібно зібрати оптимізовану продакшен-версію. Це набір статичних файлів (HTML, CSS, JS і т.д.), які легко розмістити на статичному сервері ServBay.

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

   У кореневій директорії проєкту виконайте:

   npm run build

   У результаті отримаєте оптимізовані статичні файли у папці dist в кореневому каталозі проєкту.

2. Налаштування статичного сайту

   У ServBay перейдіть у розділ Вебсайти та додайте новий сайт типу Статичний:

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

   Збережіть налаштування. ServBay автоматично сконфігурує сервер для роздачі статичних файлів з цієї директорії.

3. Доступ до продакшен-сайту

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

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

Важливі зауваження

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

Висновок

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