ServBay

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Русский

English
简体中文
繁體中文
Español
العربية
Português
日本語
Deutsch
Français
Tiếng Việt
Türkçe
Italiano

Appearance

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

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 ​

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

Пререквизиты ​

Перед началом убедитесь, что выполнили следующие шаги:

  1. Установлен ServBay: Вы успешно установили локальную среду разработки ServBay на macOS.
  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.

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

    Следуйте инструкциям в терминале для выбора имени (например, servbay-vue-app) и настройки опций вроде TypeScript, Vue Router, Pinia и др. Пример выбора опций:

    bash
    ✔ 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 — и выполните команду для установки всех зависимостей:

    bash
    cd servbay-vue-app
npm install

Изменение примера содержимого проекта (необязательно) ​

Чтобы убедиться, что проект работает корректно, измените файл src/App.vue, заменив содержимое на простой вывод “Hello ServBay!”.

Откройте файл src/App.vue вашего проекта и замените его содержимое на следующее:

html
<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>

Настройка среды разработки (с использованием обратного прокси) ​

В режиме разработки обычно запускается локальный dev-сервер (на базе Vite или Webpack), который обеспечивает горячую перезагрузку и удобен для работы. ServBay может через обратный прокси связать локальный домен с портом dev-сервера.

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

    В корне проекта выполните команду для запуска dev-сервера. С помощью параметра --port укажите свободный порт, например 8585.

    bash
    npm run dev -- --port 8585

    В терминале увидите сообщение о запуске сервера на указанном порту, например http://localhost:8585.

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

    Откройте интерфейс ServBay и перейдите в раздел Websites (Сайты). Добавьте новую конфигурацию типа Reverse Proxy (Обратный прокси):

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

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

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

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

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

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

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

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

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

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

    В корне проекта выполните сборку:

    bash
    npm run build

    В результате появится оптимизированная статическая версия в папке dist в корне вашего проекта.

  2. Настройка сервиса статики

    В интерфейсе ServBay откройте страницу Websites и добавьте новый сайт типа Static (Статический):

    • Название: My first Vue production site (или подходящее)
    • Домен: servbay-vue-prod.servbay.demo (или иной .servbay.demo)
    • Тип сайта: Static
    • Корневая папка сайта: /Applications/ServBay/www/servbay-vue-app/dist (путь к папке 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 вашей системы или воспользоваться инструментом ServBay Hosts Manager для корректного разрешения.

Заключение ​

С помощью ServBay возможно быстро развернуть локальную среду разработки с Node.js на macOS и удобно управлять всеми этапами работы с проектами на Vue.js. Функция Websites ServBay позволяет легко настраивать обратный прокси для dev-сервера или раздавать продакшен-сборку как статический сайт, а автоматическая работа с SSL и доменами делает процесс гибким и безопасным. Всё это значительно упрощает локальную разработку и публикацию проектов на Vue.js.