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

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

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

Основные особенности и преимущества Vue 3

• Составной API: Организация логическом кода с помощью комбинации функций, что делает код более поддерживаемым и повторно используемым.
• Более высокая производительность: Vue 3 использует объекты Proxy для реализации реактивной системы, что значительно улучшает производительность.
• Меньший размер пакета: За счет технологии Tree-shaking размер пакета Vue 3 меньше, чем у Vue 2.
• Лучшая поддержка TypeScript: Vue 3 предоставляет улучшенные определения типов для TypeScript, что делает разработку более удобной.
• Улучшенные жизненные циклы компонентов: Новые хуки жизненного цикла делают логику компонентов более понятной и управляемой.

Использование Vue 3 поможет разработчикам более эффективно строить современные и отзывчивые веб-приложения.

Создание и запуск проекта на Vue 3 с использованием ServBay

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

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

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

   Сначала убедитесь, что у вас установлена среда Node.js, предоставляемая ServBay. Затем используйте следующую команду для инициализации нового проекта на Vue 3:

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

   Следуйте инструкциям для ввода имени проекта (рекомендуется назвать servbay-vue-app) и выбора других опций по необходимости:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No
   ✔ Add JSX Support? … No
   ✔ Add Vue Router for Single Page Application development? … Yes
   ✔ Add Pinia for state management? … No
   ✔ Add Vitest for Unit testing? … No
   ✔ Add an End-to-End Testing Solution? … No
   ✔ Add ESLint for code quality? … Yes
   ✔ Add Prettier for code formatting? … Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

2. Установка зависимостей

   Перейдите в каталог проекта и установите зависимости:

   cd servbay-vue-app
   npm install

Изменение вывода контента Vue проекта

1. Изменение файла src/App.vue

   Откройте файл src/App.vue и измените содержимое, чтобы веб-страница выводила "Hello ServBay!":

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </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>

Переход в режим разработки

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

   Запустите сервер разработки и укажите порт (например, 8585):

   npm run dev -- --port 8585

   Это запустит локальный сервер разработки и откроет порт 8585.

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

   Используйте функцию "Host" от ServBay, чтобы получить доступ к серверу разработки через обратный прокси. В настройках хоста ServBay добавьте новый обратный прокси:

   • Имя: My first Vue dev site
   • Домен: servbay-vue-test.dev
   • Тип хоста: Обратный прокси
   • IP: 127.0.0.1
   • Порт: 8585

   Подробные шаги настройки смотрите в добавлении узла разработки Node.js.

3. Получение доступа в режиме разработки

   Откройте браузер и перейдите по адресу https://servbay-vue-test.dev, чтобы в реальном времени посмотреть проект. Благодарاشи ServBay поддерживает настройку доменных имен и бесплатные SSL-сертификаты, вы получите высокий уровень безопасности.

Сборка производственной версии

1. Сборка производственной версии

   Когда разработка будет завершена, используйте следующую команду для сборки производственной версии:

   npm run build

   После завершения сборки, сгенерированные статические файлы будут находиться в каталоге dist.

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

   Используйте функцию "Host" от ServBay, чтобы обеспечить доступ к производственной версии через статический файловый сервис. В настройках хоста ServBay добавьте новый статический сайт:

   • Имя: My first Vue production site
   • Домен: servbay-vue-test.prod
   • Тип хоста: Статический
   • Корневой каталог сайта: /Applications/ServBay/www/servbay-vue-app/dist

3. Доступ к производственной версии

   Откройте браузер и перейдите по адресу https://servbay-vue-test.prod, чтобы посмотреть сборку производственной версии. Используя собственные доменные имена и бесплатные SSL-сертификаты от ServBay, ваш сайт будет обладать более высокой безопасностью и доверием.

Следуя этим шагам, вы успешно создали и запустили проект на Vue 3, используя функции от ServBay для управления и доступа к вашему проекту.