Установка и подключение фреймворка Vue

Vue фрейворк используется для создания SPA (single page application — одностраничное приложение). То есть сайтов, на котором все действия происходят на одной странице без перезагрузки. Примерами таких сайтов могут служить социальные сети, почтовые веб клиенты и другие сайта, на которых вы не замечали перезагрузки страниц.

Установка Vue из npm

Фреймворк рекомендовано устанавливать через npm. Для начала обязательно убедитесь, что на вашем компьютере установлена последняя версия NodeJS. Далее вам нужно создать папку, перейти в нее в терминале и выполнить следующую команду:

npm init vue@latest

В процессе установки нужно указать название проекта, а также выбрать дополнительный инструментарий. Можете пока отказаться от дополнительных инструментов, их всегда можно добавить позже. После установки, для запуска фреймворка, вам нужно зайти в папку с вашим созданным проектом, и выполнить команду:

npm install

Запуск в режиме разработки

Далее для запуска в режиме разработки, если не использовать Docker, достаточно выполнить команду:

npm run dev

С Docker дела обстоят немного сложнее, нужно прокинуть из контейнера ip адрес по которому будет доступен проект с внешней стороны контейнера, делается это командой:

npm run dev -- --host

Появившийся в терминале линк, можно теперь открывать в браузере, по этому адресу и будет отображаться ваше VUE-приложение.

После выполнения команды, запускается процесс, оптимизированный для разработки, который включает в себя:

1. Запуск сервера разработки для фронтенд-проектов, что позволяет просматривать проект в браузере
2. Автоматическая перезагрузку проекта при изменениях кода
3. Обработка ошибок в реальном времени

Стартовая структура проекта

Рассмотрим базовую структуру Vue приложения, которая получается при инициализации через Vue CLI команда vue create my-app или Vite команда npm init vue@latest. Посмотрим, что там появляется автоматически:

• my-app
• node_modules (есть по дефолту), сторонние пакеты, сюда обычно не лезут руками
• public (есть по дефолту), статические файлы (иконки, favicon, HTML-шаблон)
  • index.html
• src (есть по дефолту), тут лежит весь исходный код приложения
  • assets (есть по дефолту), статические ресурсы — картинки, шрифты
  • components (есть по дефолту), мелкие переиспользуемые компоненты-инструменты
  • views страницы/экраны, которые сопоставляются с роутами
  • router настройки маршрутизации
  • store центральное хранилище состояния (Vuex, Pinia)
  • composables логика-композиции (composition API)
  • utils утилиты и хелперы
  • services работа с API/сервером
  • App.vue (есть по дефолту), главный корневой компонент
  • main.js (есть по дефолту), точка входа, инициализация Vue-приложения
• dist (создается автоматически после запуска компиляции), тут будет лежать весь скомпелированный код приложения
  • assets стили и скрипты приложения
  • index.html индексная страница входа в приложение
• .gitignore (есть по дефолту), список файлов и папок, игнорируемых git
• package.json (есть по дефолту), зависимости, скрипты и базовые настройки проекта
• README.md (есть по дефолту), описание проекта для разработчиков

Продовая сборка проекта

После того, как приложение полностью работоспособно в режиме разработки, мы можем собрать в автоматическом режиме приложение и подключить на нужную нам страницу, для этого есть команда которую нужно выполнить в консоли находясь в директории проекта:

npm run build

Команда предназначена для сборки проекта для производства. Она вызывает скрипт из файла package.json в корне проекта, который запускает сборку:

• Компилирует .vue файлы в JS код
• Собирает CSS из компонентов
• Минифицирует скрипты и стили
• Кладёт всё в папку dist

Сборка превращает исходный код написанный на JavaScript, TypeScript, SCSS, Sass и других языках и пакеты npm в минифицированный, оптимизированный код, пригодный для запуска в браузере.

Настроить процесс сборки можно через файл vue.config.js в корне проекта. Например, можно изменить имя папки дистрибутива и базовый путь для ассетов.

Подключение Vue на веб страницу

Прежде всего нам надо подключить файлы фреймворка на веб-страницу. Это можно сделать разными способами, обычно я использую два варианта:

1. Создать приложение в режиме разработки, скомпилировать код и подключить на страницу
2. Самый простой представляет загрузка файлов фреймворка из CDN

Подключим файлы фреймворка из CDN по ссылке:

https://unpkg.com/vue

index.html<!DOCTYPE html>
<html>
<head>
<title>Изучаем Vue 3</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
    <input type="text" v-on:input="setMessage" />
    <p>{{message}}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  },
  methods: {
    setMessage(event) {
      this.message = event.target.value;
    }
  }
}).mount('#app');
</script>
</body>
</html>

Чтобы создать объект приложения в Vue 3 применяется функция Vue.createApp. В эту функцию передается объект, который определяет используемые данные через параметр data и выполняемые в приложении действия через параметр methods.

В конце, чтобы связать созданный объект Vue с конкретным элементом веб-страницы, применяется метод mount(). В этот метод передается селектор html-элемента:

index.html.mount('#app')

В данном случае мы говорим, что объект Vue будет выполняться в рамках элемента html с идентификатором app.