Vue.js - это одна из JavaScript-библиотек, призванная значительно упростить создание сайтов и веб-приложений. Отличительной особенностью является использование “на уровне представления”, что позволяет интегрировать ее с другими проектами и библиотеками. Несмотря на то, что релиз Vue состоялся еще в 2016 году, она только начинает интегрироваться в технологические процессы, так как пока многие компании и разработчики относятся к библиотеке со скепсисом.

Основной функционал Vue.js

Библиотека Vue.js работает на архитектуре Model-View-ViewModel. Взаимодействие на уровне представления упрощает как сам процесс разработки, так и процесс связки с другими проектами и демонстрацию конечного результата. Примечательно, что с Vue.js можно корректно взаимодействовать как через “Терминал”, так и через графические интерфейсы.

Среди функциональных возможностей библиотеки Vue.js выделяют:

  • поддержка реактивных интерфейсов;
  • декларативный рендеринг;
  • поддержка директив с собственным префиксом и возможностью передачи в качестве аргументов HTML-атрибуты или специальные JS-события;
  • есть собственная логика поведения шаблонов;
  • наличие встроенных компонентов;
  • обработчик событий;
  • переходы и анимация;
  • фильтры.

Это самые основные функциональные возможности Vue.js. Далее, по ходу статьи, они будут рассмотрены более подробно.

Преимущества Vue.js

Основным преимуществом Vue.js является простота освоения - главной целью команды разработчиков было сделать фреймворк к работе с которым могли бы полноценно приступить веб-мастера различной квалификации. Средних знаний HTML, CSS, JavaScript будет достаточно для полноценного использования Vue и создания на нем мощных проектов. Оставаться таким простым для работы и освоения данной библиотеке помогают следующие моменты:

  1. Очень мало весит. Вес основной библиотеки всего 17 кб, следовательно, она практически не будет нагружать проект. Даже если добавить к ней другие Vue-библиотеки и инструменты, то нагрузка не увеличится, следовательно, разработчику не нужно будет думать лишний раз об оптимизации.
  2. Подробная документация. На официальном сайте есть версия на русском языке, которая переведена максимально корректно.
  3. Легкость составления документации к проектам, которые используют Vue.js. Это поможет команде разработчиков быстрее привлекать к работе над проектом других участников.
  4. Есть дружелюбное сообщество разработчиков, которые помогут новичкам быстрее освоиться. Правда, они все англоязычные, русское комьюнити пока очень небольшое.
  5. Библиотека постоянно обновляется, становясь все более дружелюбной к разработчикам и добавляя новые фичи.

Документация для Vue.js

На официальном сайте вся документация переведена на русский язык и разбита на несколько больших разделов:

  1. Руководство для начинающих. Здесь приведены самые базовые моменты, позволяющие начать работу с фреймворком. Разбит на несколько подразделов для удобства изучения.
  2. API. Раздел, посвященный работе с API Vue. Здесь можно подробно ознакомиться со всеми методами на реальных примерах.
  3. Рекомендации. Приведены просто общие рекомендации, позволяющие упростить работу с Vue.js и избежать частых ошибок в ходе разработки. Правда, они будут полезны уже тем, кто хоть немного освоился с фреймворком и начал работать с реальными проектами.
  4. Примеры продуктов. В этом разделе собраны примеры ранее разработанных приложений на Vue.js. Разработчик может изучить их функционал и внутреннее устройство. Полезно как для начинающих, так как позволяет посмотреть на возможности фреймворка на реальных примерах, так для уже опытных разработчиков, так как позволяет лучше понять принцип работы.
  5. “Книга рецептов”. По-сути является форумом разработчиков, где одни спрашивают, как реализовать что-либо на Vue.js, а другие дают советы или практические решения. Также можно посмотреть ответы на ранее заданные вопросы.
  6. Дополнительная документация по инструментам и встроенным библиотекам. Здесь собрана вся информация об имеющихся инструментах и библиотеках данного фреймворка. Правда, не для всех есть полноценная версия на русском языке.

В каких проектах применяется Vue.js

Библиотека отлично подходит для небольших проектов, однако, благодаря своим особенностям, легко масштабируется по мере развития, поэтому может использовать и в более объемных проектах. Часто используется в тех случаях, когда нужно добавить реактивности, настроить отображение вводимых данных пользователем, AJAX-формы и так далее.

На Vue.js часто делают:

  • одностраничные веб-приложения;
  • серверные приложения, использующие общедоступные API;
  • приложения и сайты, использующие внешние API для обработки данных;
  • фронтенд сайтов, работающих на популярных CMS;
  • динамические интерфейсы, адаптирующиеся под пользователя.

Прогрессивный JavaScript-фреймворк

На главной странице официального сайта его прямо так и называют. Это подразумевает постепенное развитие и раскрытие возможностей библиотеки по ходу. Действительно, вам необязательно полноценно внедрять все возможности или даже рассматривать необходимость их внедрения. Это можно делать по мере развития проекта, что облегчает как разработку, так и поддержку. Начать вообще можно только с добавления поддержки Vue, а для этого потребуется только прописать в корневом файле один небольшой скрипт.

Создавать новый проект на Vue.js тоже очень удобно - достаточно на первых этапах подключить специальное средство для командной строки - Vue CLI. Дальше, по мере роста проекта и требований к нему, можно и нужно подключать дополнительные библиотеки.

Как работать с Vue.js

Для продуктивной работы с компонентами Vue.js достаточно знать на среднем уровне HTML, CSS и JavaScript. Имея эту базу со всем остальным очень легко разобраться, используя техническую документацию или методом проб и ошибок. Рассмотрим на примере несколько вариантов подключения, а также то, как взаимодействовать с Vue на начальных этапах работы.

Подключение через скрипт

Самый популярный способ подключить Vue.js к проекту - это прописать специальный скрипт в теге <script> в главном файле проекта. Данный метод подключения является полноценным и подходит не только в учебных, но и в реальных проектах. Это удобно не только понятным принципом подключения, но и возможностью реализации функционала Vue на отдельной странице, без необходимости вносить правки в весь проект. Отличный вариант в том случае, если уже есть, например, готовый большой сайт и вы хотите протестировать, как будет работать с ним Vue.js, но при этом сам ресурс адаптировать нет времени.

Для подключения Vue.js к конкретной веб-странице или всему проекту, нужно ввести следующий скрипт в основном HTML-документе:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

Обращаем внимание, что эта версия Vue.js не предназначена для продакшена. Если требуется быстро запустить проект без дополнительных отладок, то рекомендуется подключить production-версию. Для ее подключения в src нужно заменить ссылку на: https://cdn.jsdelivr.net/npm/vue@2.

Теперь можно переходить непосредственно к использованию Vue в проекте. Для этого добавим корневой элемент в документ. Корневым элементом в данном случае будет обычный div с идентификатором app. После того как корневой элемент создан, его необходимо будет инициализировать с помощью скрипта:

<script>
const app = new Vue({
el: '#app'
})
</script>

Далее добавим несколько переменных, которые будут выводится в корневом элементе. В тестовом примере просто выведем там сообщение “Hello world!”. Все данные вводятся также в теге скрипта:

<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello, World!',
now: new Date()

})
</script>

Как видите, скрипту выше просто было добавлено свойство data. Чтобы прописанные данные выводились на страницу их нужно добавить в корневой элемент:

<div id="app">
<h1>{{ message }}</h1>
<p>{{ now }}</p>
</div>

Здесь в h1 выводится само сообщение “Hello, World!”, а в теге p текущая дата. Пока проект выглядит максимально примитивным, однако Vue.js к нему подключен и полностью работоспособен. Чтобы лучше продемонстрировать возможности библиотеки, сделаем отображение в переменной now времени, которое будет регулярно обновляться самостоятельно:

methods: {
updateDate() {
this.now = new Date();
}
},
mounted() {
setInterval(() => {
this.updateDate();
}, 1000);

Этот кусок кода нужно добавить к уже имеющемуся скрипту. Он запускает автоматическое обновление выводимых значений переменной now раз в секунду.

Подключение через терминал

Этот вариант используется для Vue CLI. В отличии от предыдущего варианта, в этом случае масштабирование продумано гораздо лучше. Подключать Vue через терминал рекомендуется в том случае, когда нужно быстро создать одностраничное многофункциональное приложение с полноценным использованием всех дополнительных библиотек и инструментов фреймворка. Для того, чтобы корректно выполнить установку через терминал потребуется обзавестись Node.js и npm. Они должны быть в обязательном порядке у каждого разработчика.

Изначально выполните установку Vue CLI в свой проект. Делается это с помощью следующей команды для терминала:

npm install -g @vue/cli

Дождитесь установки инструмента. Дальнейшее взаимодействие с ним будет производиться через интерфейс терминала. Чтобы посмотреть список всех доступных команд с пояснениями введите vue -h.

Перечень поддерживаемых команд с пояснениями

Создадим новое приложение с помощью команды create:

vue create hello-world

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

Завершение создания Vue-приложения

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

Работа через Vue UI

Не всем разработчикам удобно работать через интерфейс терминала. В таком случае альтернативой является использование инструмента Vue UI, предлагающий удобный графический интерфейс. Однако установку основных компонентов все равно придется произвести через встроенный терминал, как это было описано выше. Для запуска Vue UI после установки основных компонентов потребуется ввести команду:

vue ui

Локальная страница Vue UI

После ее выполнения откроется страница с локальным приложением. С его помощью можно создать новый проект и выполнить все необходимые настройки. Все организовано максимально удобно, поэтому разобраться с ними сможет даже самый начинающий разработчик. Единственный нюанс - встроенное приложение полностью на английском языке.

Интерфейс создания нового веб-приложения в Vue UI

Связка Vue.js и Vite.js: что это и зачем нужно

Vite.js - это инструмент, который значительно ускоряет сборку проектов на таких фреймворках как Vue и React. Представляет современную среду разработки, где можно отказаться или сильно минимизировать этап связывания. Vite также делает автоматическую минимизацию всего CSS и JavaScript кода, задействованного в проекте. Использование встроенного компонента esbuild делает загрузку и компиляцию кода еще более быстрой, что может быть полезно для больших проектов.

Процесс установки Vite.js для вашего проекта выглядит следующим образом:

1. Запустите инициализацию Vite-приложения с помощью команды: npm init vite@latest.

2. Дальше запустится генератор нового приложения. Там нужно прописать название для проекта и нажать Enter для продолжения процедуры.

3. Теперь выберите фреймворк, с которым будете работать. Так как рассматривается связка с Vue, то его и выбирайте.

Выбор фреймворка Vue при установке Vite

4. Выберите, требуется ли использовать TypeScript в созданном проекте.

5. В качестве завершающего этапа нужно перейти в корневую папку проекта и запустить npm -install.

По итогу вы получите готовый шаблон веб-приложения, работающего на связке Vue+Vite.

Заключение

Vue.js - это мощный инструмент для быстрого создания продвинутых веб-приложений. Несмотря на то, что он достаточно прост в освоении, чтобы полноценно пользоваться всеми преимуществами данного фреймворка требуется поддерживать на достаточном уровне знания HTML, CSS и, особенно, JavaScript. Также, если вы планируете часто работать с Vue, то вам придется постоянно “держать руку на пульсе”, так как фреймворк и инструменты, входящие в него регулярно обновляются.