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

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

В этом руководстве вы узнаете, как с нуля создать проект Vue.js с помощью интегрированной среды ServBay, а также как запускать приложение как в режиме разработки, так и в режиме продакшн.

Что такое Vue.js?

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

Ключевые особенности и преимущества Vue 3

• Composition API (Композиционный API): Организация логики компонента через функции, что улучшает читаемость и повторное использование кода в крупных проектах.
• Улучшенная производительность: В Vue 3 используется объект Proxy для реактивности и оптимизирован алгоритм виртуального DOM, что даёт значительный прирост скорости.
• Минимальный размер ядра: Благодаря tree-shaking, библиотека стала значительно легче и быстрее загружается.
• Продвинутая поддержка TypeScript: Полноценные типы позволяют комфортно писать Vue-приложения с TypeScript.
• Новые хуки жизненного цикла: Добавлен Setup-функционал и расширенные хуки, что делает структуру компонента более прозрачной и управляемой.

Использование Vue 3 значительно ускоряет создание современных интерактивных web-приложений.

Как создать и запустить проект Vue.js в ServBay

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

Предварительные требования

Перед началом убедитесь, что:

1. ServBay установлен: Локальная среда разработки ServBay успешно установлена на вашем компьютере.
2. Node.js установлен: Node.js добавлен через менеджер пакетов ServBay. Подробно инструкции: Установка и использование Node.js в ServBay.

Создание проекта Vue.js

1. Инициализация проекта

   Откройте терминал. ServBay рекомендует сохранять проекты сайтов в директории по умолчанию. Перейдите в эту папку и выполните команду npm create vue@latest для инициализации свежего проекта Vue.js — она используется для создания проектов на последней версии Vue 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. Запуск сервера разработки

   Выполните из корня проекта команду для запуска dev-сервера, указав порт (например, 8585):

   npm run dev -- --port 8585

   Терминал покажет адрес и порт, например http://localhost:8585.

2. Настройка обратного прокси в ServBay

   Откройте интерфейс ServBay и перейдите к разделу Web-сайты. Добавьте новый сайт — выберите тип Обратный прокси:

   • Название: My first Vue dev site (или другое удобное)
   • Домен: servbay-vue-dev.servbay.demo (либо любой подходящий .servbay.demo адрес)
   • Тип сайта: Обратный прокси
   • IP-цель: 127.0.0.1
   • Порт-цель: 8585 (такой же, как выбран при запуске сервера)

   Сохраните настройки — ServBay автоматически обновит конфигурацию web-сервера (Caddy или Nginx) и настроит прокси для домена servbay-vue-dev.servbay.demo на адрес http://127.0.0.1:8585.

   Более детально о добавлении Node.js сайта читайте здесь: Добавление Node.js сайта в ServBay.

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

   Убедитесь, что web-сервер ServBay запущен. Откройте браузер и перейдите на ваш домен https://servbay-vue-dev.servbay.demo.

   ServBay автоматически сгенерирует SSL-сертификаты (через ServBay User CA или ServBay Public CA). Вы сможете безопасно работать по HTTPS, как в реальном продакшне. Про SSL и сертификаты читайте подробнее: Настройка SSL для сайтов в ServBay.

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

Сборка и деплой продакшн-версии (статический сайт)

Когда проект завершён, его необходимо собрать для продакшн — получится набор статических файлов (HTML, CSS, JS), которые можно легко разместить через статический сайт в ServBay.

1. Сборка продакшн-версии

   Из корневой директории выполните команду сборки:

   npm run build

   Результат — оптимизированная версия приложения, которая окажется в папке dist внутри проекта.

2. Настройка сервиса статических файлов

   Через интерфейс ServBay перейдите к Web-сайты и добавьте новый сайт — выберите тип Статический:

   • Название: 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. Доступ к продакшн-версии

   Убедитесь, что web-сервер ServBay запущен. Перейдите на настроенный домен https://servbay-vue-prod.servbay.demo в браузере.

   Теперь вы видите оптимизированное продакшн-приложение Vue с высокой производительностью. Благодаря ServBay с доменом и SSL, вы можете безопасно протестировать продакшн-версию локально.

Важные моменты

• Конфликт портов: Если порт 8585 (или выбранный вами) занят, команда npm run dev выдаст ошибку. Просто выберите другой свободный порт и не забудьте обновить настройки обратного прокси ServBay.
• Статус web-сервера ServBay: Убедитесь, что web-сервер (Caddy или Nginx; зависит от конфигурации) запущен — иначе сайт не будет доступен по домену.
• Разрешение домена: ServBay автоматически настраивает локальное разрешение добавленных доменов .servbay.demo на адрес 127.0.0.1. Если используете другой домен, вам может понадобиться вручную изменить hosts-файл системы или воспользоваться менеджером hosts ServBay.

Заключение

ServBay позволяет просто и быстро развернуть локальную Node.js-среду для работы с проектами Vue.js на macOS и Windows, а также удобно управлять их жизненным циклом — от разработки до продакшн-деплоя. С помощью функции Web-сайты можно быстро организовать обратное проксирование для разработки или настроить сервис статических файлов для продакшн-версии. Автоматическая поддержка доменов и SSL делает разработку и предпросмотр максимально удобными и безопасными. ServBay значительно упрощает процесс настройки и работы с Vue.js локально.