Фреймворк vue js что это
Введение
Что такое Vue.js?
Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.
Если вы хотите узнать больше о Vue перед тем как начать, мы создали видео с рассказом об основных принципах работы на примере проекта.
Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.
Начало работы
В этом руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Проще всего попробовать Vue.js, начав с примера Hello World. Откройте его в другой вкладке, и изменяйте по ходу чтения руководства. Можно и просто создать index.html файл на диске и подключить Vue:
Если предпочитаете что-то более интерактивное, можете пройти эту серию уроков на Scrimba, которая представляет собой сочетание скринкастов и песочницы для проверки примеров кода, где вы можете остановиться и продолжить изучение в любое время.
Декларативная отрисовка
В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM с помощью простых шаблонов:
Вот мы и создали наше первое Vue-приложение! Выглядит как простая отрисовка шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как это проверить? Просто откройте консоль JavaScript в браузере (прямо здесь, на этой странице) и задайте свойству app.message новое значение. Вы тут же увидите соответствующее изменение в браузере.
Обратите внимание, что теперь больше не нужно напрямую взаимодействовать с HTML. Приложение Vue присоединяется к одному элементу DOM ( #app в данном случае), а затем полностью контролирует его. HTML является нашей точкой входа, но всё остальное происходит внутри вновь созданного экземпляра Vue.
Кроме интерполяции текста, можно также связывать атрибуты элементов:
Условия и циклы
Управлять присутствием элемента в DOM тоже довольно просто:
Этот пример демонстрирует возможность связывать данные не только с текстом и атрибутами, но и со структурой DOM. Более того, Vue также имеет мощную систему анимации, которая автоматически применяет эффекты переходов, когда элементы добавляются/обновляются/удаляются.
Есть и другие директивы, каждая из которых имеет своё предназначение. Например, директива v-for для отображения списков, используя данные из массива:
Работа с пользовательским вводом
Чтобы пользователи могли взаимодействовать с вашим приложением, используйте директиву v-on для отслеживания событий, указав метод-обработчик:
Обратите внимание, в методе мы просто обновляем состояние приложения, не затрагивая DOM — всю работу с DOM выполняет Vue, а вы пишете код, который занимается только логикой приложения.
Разбиение приложения на компоненты
Важной концепцией Vue являются компоненты. Эта абстракция позволяет собирать большие приложения из маленьких «кусочков». Они представляют собой пригодные к повторному использованию объекты. Если подумать, почти любой интерфейс можно представить как дерево компонентов:
Во Vue компонент — это, по сути, экземпляр Vue с предустановленными опциями. Создать новый компонент во Vue просто:
Теперь его можно использовать в шаблоне другого компонента:
Пока что у нас получилось так, что во всех элементах списка будет один и тот же текст — это не очень-то интересно. Хотелось бы иметь возможность передавать данные от родительского в дочерние компоненты. Давайте изменим определение компонента, чтобы он мог принимать входной параметр:
Теперь можно передать текст задачи в каждый компонент с помощью v-bind :
В крупных приложениях разделение на компоненты становится обязательным условием для сохранения управляемости процесса разработки. Разговор о компонентах ещё далеко не окончен и мы вернёмся к ним позднее в этом руководстве, но уже сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:
Отношение к пользовательским элементам Web Components
Спецификация Web Components была завершена, но она реализована ещё не во всех браузерах. Safari 10.1+, Chrome 54+ и Firefox 63+ уже поддерживают веб-компоненты. Компоненты Vue, напротив, не требуют никаких полифилов и работают во всех поддерживаемых браузерах (IE9 и выше). При необходимости компоненты Vue могут быть «обёрнуты» в нативные пользовательские элементы.
Компоненты Vue предоставляют возможности, недоступные в простых пользовательских элементах. Самые значимые из них: кросс-компонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами сборок.
Готовы к большему?
Пока мы лишь кратко представили самые основные возможности ядра Vue.js — остаток этого руководства посвящён более детальному рассмотрению этих и других возможностей, поэтому советуем прочитать его целиком!
Видео Vue Mastery. Посмотрите бесплатный курс Vue Mastery Введение в курс Vue.
Vue.js для сомневающихся. Все, что нужно знать
В данной статье речь пойдет о замечательном фронтенд фреймворке Vue.js. Как вы видите, статья называется «Vue.js для сомневающихся», и, если вы до сих пор не могли решиться попробовать Vue.js на практике, то надеюсь, что после прочтения вы все-таки на это решитесь.
Фреймворки разрабатываются для того, чтобы упростить нам жизнь и освободить от написания однотипного кода. Но, по мере того как кодовая база некоторых фреймворков сильно разрастается, они начинают привносить свою долю сложности в проект. Из-за этого при планировании разработки мы должны учитывать два фактора:
Из вышесказанного, у нас получается два варианта выбора инструмента:
О Vue.js и авторе
Итак, разберемся с Vue и каким образом он может облегчить нам разработку приложения.
Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз. Vue широко используется среди китайских компаний, например: Alibaba, Baidu, Xiaomi, Sina Weibo и др. Он входит в ядро Laravel и PageKit. Недавно свободная система управления репозиториями GitLab тоже перешла на Vue.js.
В конце сентября 2016-го вышел в релиз Vue.js 2.0, еще круче и с упором на производительность — теперь используется виртуальный DOM, поддерживается серверный рендеринг, возможность использовать JSX и т.д. Хотя сейчас он поддерживается только сообществом, он держится достойно даже на уровне продуктов таких гигантов, как Google и Facebook (Angular2 и React 15), и постепенно догоняет их по популярности.
Рассмотрим самый простой пример:
Концепции Vue.js
Конструктор
Работа с Vue.js начинается с создания нового инстанса new Vue. В el у нас элемент, за которым следит Vue. В template выбран (либо прописан инлайново) элемент, куда Vue будет рендерить. В data хранится текущее состояние инстанса, а метод computed предоставляет нам вычисляемые свойства.
В примере вычисляемое свойство full_name отслеживает first_name и last_name как зависимости и автоматически синхронизируется.
В methods можно выделить следующие кастомные методы и методы жизненного цикла Vue:
Директивы
Директивы — специальные атрибуты для добавления элементам html дополнительной функциональности.
Рассмотрим некоторые встроенные директивы (кто работал с Angular, тому они покажутся очень знакомыми):
Все Vue-директивы имеют префикс “v-”. В директиву передается какое-то значение состояния, а в качестве аргументов могут быть атрибуты html или события.
Компоненты
Компоненты помогают расширить основные html элементы и внедрить переиспользуемый код. По сути, компоненты — повторно используемые части UI. На этапе проектирования мы разбиваем наше приложение на независимые части и получаем древовидную структуру компонентов.
В Vue.js нет особых требований к именам компонентов, но хорошая практика — придерживаться правил W3C насчет кастомных компонентов, то есть буквы нижнего регистра и разделения через дефис.
Новый компонент объявляется с помощью Vue.component, и в первый аргумент мы передаем имя нового тега (в нашем случае simple-counter)
Коммуникация между vue-компонентами осуществляется по принципу “Props in, Events out”. То есть от родительского элемента к дочернему информация передается через пропсы, а обратно — вызываются события.
Переходы
Vue предоставляет различные способы применения анимационных эффектов, когда элементы отрисованы, обновлены или удалены из DOM. Они включают в себя инструменты для:
Экосистема фреймворка
Роутинг
Во Vue.js за маршрутизацию отвечает отдельный пакет vue-router. Он поддерживает вложенные маршруты к вложенным компонентам, предлагает упрощенное API для навигационных хуков, управляемое поведение скрола и продвинутый контроль переходов.
Вот небольшой пример:
Ajax-запросы
Для работы с Ajax-запросами существует плагин vue-resource. Он предоставляет возможности для создания веб-запросов и обработки ответов с помощью XMLHttpRequest или JSONP. Также особенностью плагина является поддержка Promise API и URI шаблонов.
Управление состоянием
Vuex — паттерн и библиотека управления состоянием для приложений на Vue.js. Он предоставляет централизованное общее состояние для всех компонентов в приложении и правила, обеспечивающие предсказуемое изменение состояния.
На изображении ниже представлено приложение на Vue+Vuex со следующими частями:
Система сборки и инструменты разработчика
Для отладки в браузере существует Vue-devtools (к сожалению, пока только для Chrome), который позволяет видеть, какие компоненты есть в нашем приложении и их текущее состояние.
Также он прекрасно работает с Vuex и позволяет выполнять так называемый time-travel debugging: в браузере мы можем увидеть историю состояний и переключаться между ними.
Почему я должен его использовать
Vue удивителен! Я считаю, это здорово, что я могу просто подключить его на странице и начать работать без необходимости шаманить с системой сборки или CLI. С ним очень просто начать работать, даже если вы никогда не работали с JavaScript фреймворками. Это идеальное сочетание удобства и мощности. Рассмотрим еще несколько аргументов в его пользу:
Спасибо за внимание!
Статью подготовили: greebn9k (Сергей Грибняк), Dmitry-Ivanov (Дмитрий Иванов), silmarilion (Андрей Хахарев)
30 ноября 2017 г. Vue.js: особенности, применение и отличия от других Javascript фреймворков
Релиз фреймворка Vue.js 2.0 состоялся еще в 2016 году, но многие владельцы технологических компаний и Javascript разработчики все еще не решаются использовать его в своих проектах. В этой статье мы рассмотрим ключевые моменты данного решения.
По Vue JS отзывы довольно положительные. Согласно опросу компании Monterail, 81% разработчиков отмечают простоту интеграции как основное преимущество фреймворка Vue, в т. ч. и интеграцию с backend фреймворками. Большинство специалистов считает, что освоить Vue намного легче чем другие популярные Javascript фреймворки. Документация — еще одна сильная сторона Vue — так считают 60% опрошенных разработчиков. Аналогичное число респондентов (56%) отмечает производительность данного решения как одну из его самых сильных сторон. Разберемся подробнее, что же такое Vue.js?
Описание фреймворка
Vue.js — это JavaScript библиотека для создания веб-интерфейсов с использованием шаблона архитектуры MVVM (Model-View-ViewModel).
Поскольку Vue работает только на «уровне представления» и не используется для промежуточного программного обеспечения и бэкэнда, он может легко интегрироваться с другими проектами и библиотеками. Vue.js содержит широкую функциональность для уровня представлений и может использоваться для создания мощных одностраничных веб-приложений.
Где применяется Vue.js
Vue подходит для небольших проектов, которым необходимо добавить немного реактивности, представить форму с помощью AJAX, отобразить значения при вводе данных пользователем, авторизация или другие аналогичные задачи. Vue легко масштабируется и хорошо подходит для объемных проектов, поэтому его называют прогрессивным фреймворком.
Vue также отлично подходит для крупных одностраничных приложений благодаря своим основным компонентам, таким как Router и Vuex. С Vue можно как использовать общедоступные API для создания приложений, так и реализовывать выполняемые сервером приложения. Но Vue лучше всего подходит для разработки решений, которые используют внешние API для обработки данных.
С помощью Vue также можно создавать frontend блога на популярных CMS. Vue.js отлично подходит и для разработки динамических интерфейсов, которые адаптируются под пользователя.
Vue.js: примеры лучших проектов
Рассмотрим некоторые крупные проекты, основанные на фреймворке Vue. Отметим сложности, с которыми столкнулись их разработчики, и что им дал переход на Vue.js.
Chess.com
Chess.com — самый посещаемый сайт игры в шахматы в мире с более чем 19 миллионами пользователей. Ресурс содержит раздел новостей, блог, сообщества, уроки, головоломки и возможность играть в шахматы в режиме реального времени.
Его legacy-код был реализован в PHP и Angular 1, поэтому возникали определенные сложности при работе с таким кодом. Команда проекта перешла с AngularJS на Vue. Благодаря простоте и быстродействию Vue.js, основателю Chess.com стало легче сотрудничать с его дистанционной командой, а на создание нового функционала ушло совсем немного времени.
Codeship
Codeship — это платформа для непрерывной интеграции, основанная на облачной технологии. Она позволяет хранить веб-приложения в облаке. Эту платформу используют такие гиганты, как Red Bull, CNN и Product Hunt.
Прежде чем Codeship перешел с jQuery на Vue, их пользователи постоянно сталкивались с зависанием и сбоями при работе с веб-приложением. У них был длинный список пользователей которые были недовольны работой приложения. Их история является отличным примером того, как Vue может помочь создать программное обеспечение с надежным и простым в обслуживании код.
Vue.js помог команде Codeship правильно организовать свой код и улучшить пользовательский интерфейс.
Livestorm
Livestorm — это веб-приложение для создания вебинаров. Оно помогает таким компаниям, как Workable, Pipedrive и Instapage продавать свои услуги или обучать клиентов с помощью вебинаров.
Livestorm — это пример Vue JS приложения,созданного с нуля. Благодаря Vue и его повторно используемым компонентам, их процесс разработки был быстрым и довольно простым.
Чем Vue.js отличается от Angular и React
Рассмотрим основные отличия фреймворка Vue от Angular и React.
Компоненты
Все эти фреймворки основаны на компонентах. При этом необходимо отметить, что React и Vue хорошо подходят для обработки так называемых немых компонентов — небольших, не имеющих состояния функций, которые получают входные данные и возвращают элементы в качестве вывода. Vue.js компоненты не имеют особых требований к своим именам, но рекомендуется придерживаться правил W3C для кастомных компонентов — использовать буквы нижнего регистра и разделения через дефис.
Фреймворк против библиотеки
Angular — это фреймворк, а не библиотека, так как содержит четкие указания по структуре приложения, а также имеет широкую функциональность. Angular является полноценным решением для enterprise-приложений, которое не требует от вас анализа каких-либо других библиотек или применения дополнительных инструментов. React и Vue, с другой стороны, универсальны. Их библиотеки могут быть сопряжены со всеми типами пакетов, хотя у Vue их немного, так как он еще довольно молод.
Гибкость использования
Вы можете работать с React или Vue, просто добавив библиотеку Javascript в исходный код. Это невозможно в случае с Angular, так как он предназначен для более сложных задач. Когда же речь идет о микросервисах и микроприложениях, React и Vue предоставляют больше контроля над размером приложений, позволяя выбирать только те элементы, которые необходимы в конкретных случаях. Также они предлагают большую гибкость для перехода от одностраничных приложений к микросервисам, позволяя использовать части прежнего приложения. А Angular, благодаря своему широкому функционалу, лучше всего подходит для разработки самих одностраничных приложений.
Быстродействие и размер файлов
Фреймворк Angular довольно объемен. Из-за своего широкого функционала, размер архивированного файла составляет около 143k, по сравнению с более простыми Vue и React с 23K и 43k соответственно.
React и Vue имеют Virtual DOM (document object model), который создает копию объектного представления структурного документа и позволяет работать с визуальной копией, а не с самим представлением. Этот подход помогает повысить производительность фреймворков и таким образом ваше приложение будет работать быстрее. Vue, в частности, обладает отличной производительностью и глубоким распределением памяти, но все эти фреймворки в основном схожи по своим характеристикам.
В качестве вывода необходимо отметить, что основными преимуществами Vue JS является его простота и легкость изучения. Вместо того, чтобы изучать сложную терминологию и инструменты для создания простого приложения, как в случае с React, вы можете сразу приступать к разработке. Это делает Vue JS идеальным выбором для стартапов или любой команды разработчиков, которая хочет быстро создавать высокопроизводительные веб-приложения с легко читаемым кодом.
# Введение
Уже изучили Vue 2 и хотите узнать что нового во Vue 3? Посмотрите руководство по миграции!
# Что такое Vue.js?
Vue (произносится /vjuː/, примерно как view) — прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создавался пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), упрощая интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для разработки сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его в комбинации с современными инструментами и дополнительными библиотеками
Если хотите узнать о Vue больше, прежде чем начать — посмотрите видео с рассказом об основных принципах работы на небольшом примере проекта.
Video by Vue Mastery. Watch Vue Mastery’s free Intro to Vue course.
# Начало работы
В руководстве предполагаются знания HTML, CSS и JavaScript на среднем уровне. Для новичков во фронтенд-разработке сразу начинать изучение с фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.
Самый простой способ попробовать Vue.js — пример Hello World
# Декларативная отрисовка
В ядре Vue.js находится система, позволяющая декларативно отрисовывать данные в DOM с помощью простого синтаксиса шаблонов:
Вот и первое Vue-приложение! Хоть и выглядит как простая отрисовка строкового шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как в этом убедиться? Посмотрите на пример ниже, где свойство counter увеличивается каждую секунду и увидите, как изменяется DOM:
Кроме интерполяции текста также можно связывать данные с атрибутами элементов:
# Работа с пользовательским вводом
Чтобы позволить пользователям взаимодействовать с приложением, можно использовать директиву v-on для обработчиков событий, которые будут вызывать методы экземпляра:
Обратите внимание, в методе не трогаем DOM и обновляем только состояние приложения — всеми манипуляциями с DOM занимается Vue, а в коде фокусируемся на логике работы.
# Условия и циклы
Управлять присутствием элемента в DOM тоже просто:
Пример выше демонстрирует возможность связывания данных не только с текстом и атрибутами, но и со структурой DOM. Кроме того, Vue имеет мощную систему анимаций, которая может автоматически применять эффекты переходов при добавлении, обновлении или удалении элементов.
В примере ниже можно изменять значение seen с true на false чтобы увидеть эффект:
Есть и некоторое количество других директив, каждая из которых обладает своей особой функциональностью. Например, директиву v-for можно использовать для отображения списка элементов, используя данные из массива:
# Композиция приложения из компонентов
Компонентная система является ещё одной важной концепцией во Vue, потому что это абстракция, которая позволяет создавать большие приложения, состоящие из небольших, автономных и часто переиспользуемых компонентов. Если задуматься, то почти любой тип интерфейса приложения можно абстрактно представить в виде дерева компонентов:
После этого можно использовать его в шаблоне другого компонента:
Пока что во всех элементах списка будет один и тот же текст, что не очень-то интересно. Должна быть возможность передавать данные в дочерние компоненты из родительской области видимости. Доработаем компонент, чтобы он принимал входной параметр:
Теперь можно передавать свой текст для каждого из компонентов с помощью v-bind :
В больших приложениях разделение на компоненты становится жизненной необходимостью для сохранения управляемости разработки. Гораздо подробнее с компонентами продолжим разбираться далее в руководстве, но и сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:
# Отношение к пользовательским элементам
Можно заметить, что компоненты Vue похожи на пользовательские элементы, являющиеся частью спецификации веб-компонентов
Но главное отличие в том, что компонентная модель Vue разработана как часть целостного фреймворка, предоставляющего множество дополнительных возможностей, необходимых при создании нетривиальных приложений, например, реактивный шаблонизатор и управление состоянием — оба этих аспекта не покрываются спецификацией.
Vue также предоставляет отличную поддержку как для использования, так и для создания пользовательских элементов. Более подробную информацию можно найти в разделе Vue и веб-компоненты.
# Готовы к большему?
Пока что лишь вкратце познакомились с основными функциями ядра Vue.js — в следующих разделах руководства будем разбирать подробнее эти и другие интересные возможности, поэтому не забудьте прочитать его целиком!
(opens new window)
Последнее обновление страницы: около 2 месяцев назад
Всё, что нужно для начала работы с Vue.js
Скорее всего, вы, читая эти строки, уже слышали о JavaScript-фреймворке, который называется Vue. Если вы собирались его опробовать, но не очень хорошо представляли себе то, с чего вам стоит начать, значит — этот материал написан специально для вас. Его автор говорит, что хочет рассказать о том, почему ему очень нравится Vue. Кроме того, он собирается представить всем желающим 4 способа написания первого приложения на Vue.
В конце этого материала, вы найдете ссылки на целый курс по Vue.js.
Обзор материала
Обычно я стараюсь не рассказывать о слишком многих способах решения одних и тех же задач тем, кто только начинает осваивать некий фреймворк. Но в данном случае я полагаю, что показать несколько способов разработки первого приложения на Vue — это очень важно. Возможно, вам нравится работать с командной строкой, а возможно — с инструментами, оснащёнными графическим интерфейсом. Для Vue-разработки подходит и то и другое. Кроме того, Vue-приложения можно писать и не прибегая к командной строке. Для этого достаточно добавить на HTML-страницу тег для загрузки соответствующего скрипта. И, наконец, возможно, вам не хочется заботиться о настройке окружения разработки. Вместо этого вы стремитесь к тому, чтобы как можно скорее, без лишних движений, попробовать Vue. На самом деле, какой бы стратегии вы ни придерживались бы, здесь вы найдёте то, что поможет вам приступить к освоению Vue.
В процессе чтения этого материала вы будете встречать ссылки на полезные ресурсы. А когда вы прочтёте всю эту статью — я расскажу вам о том, на что вам стоит обратить внимание для дальнейшего изучения Vue. Надо отметить, что здесь мы не будем погружаться в тонкости Vue, не будем рассматривать все возможные механизмы этого фреймворка. Мы собираемся разобраться с основами и выйти на первое работающее приложение.
Для начала поговорим о некоторых интересных особенностях Vue.
Сильные стороны Vue
Сила Vue, на мой взгляд, заключается в том, насколько дружелюбно этот фреймворк относится к новичкам. Команда разработчиков Vue проделала замечательную работу, стремясь к тому, чтобы разработчики различной квалификации могли бы быстро приступить к продуктивной работе с фреймворком. Если вы знаете HTML, CSS и JavaScript — это означает, что вы буквально в шаге от того, чтобы разрабатывать довольно мощные приложения на Vue.
Я так же полагаю, что Vue, среди трёх ведущих инструментов для фронтенд-разработки (это — Angular, React и Vue), обладает самыми низкими входными барьерами. Это так по нескольким причинам, но для меня всё сводится к трём основным особенностям Vue:
▍Документация
Если поговорить с разработчиками, которым нравится Vue, то я думаю, что многие из них в первую очередь скажут о качестве документации этого фреймворка. Если посетить сайт Vue.js, то можно обнаружить, что документация разбита на несколько разделов:
▍Сообщество
Я, работая программистом, чувствую себя причастным к нескольким замечательным сообществам. Одно из них — это сообщество Vue. Его члены доброжелательны, дружелюбны, они более чем готовы оказать помощь тому, кто в ней нуждается. Рекомендую подписаться на Twitter-аккаунты следующих членов сообщества Vue. Так вам легче всего будет понять то, чем они занимаются, и узнать о том, чем они живут. Вот ссылки:
▍Vue — это прогрессивный фреймворк
Если посетить домашнюю страницу сайта Vue.js, то можно увидеть, что там его называют так: «Прогрессивный JavaScript-фреймворк». На первый взгляд это может показаться обычным маркетинговым ходом, но, немного вникнув в суть Vue, можно понять, что это не так. Для начала давайте определимся со значением слова «прогрессивное». Это — нечто, происходящее или развивающееся постепенно или поэтапно; это что-то такое, что выполняется пошагово.
Совсем скоро вы увидите, что при разработке Vue-приложений можно работать, поэтапно внедряя в них возможности этого фреймворка. Например, если у вас уже есть некий проект, то вы без проблем можете оснастить его поддержкой Vue. Начать можно с загрузки скрипта Vue и с написания нескольких строк кода.
Если вы хотите воспользоваться Vue CLI, средством командной строки Vue, для того, чтобы развернуть новый проект, обладающий необходимыми вам возможностями, то это — тоже не проблема. По мере того, как ваше приложение будет расти, и вам понадобятся достаточно продвинутые возможности вроде маршрутизации или управления состоянием, приложение несложно будет этими возможностями оснастить.
Как уже было сказано, Vue — это доступный фреймворк. Если вы уже знаете HTML, CSS и JavaScript, это значит, что вы готовы к тому, чтобы начать работу с Vue. Собственно говоря, если вы и правда стремитесь приступить к написанию Vue-приложений, тогда предлагаю этим и заняться.
Вариант №1: скрипт Vue, подключённый к странице
Обратите внимание на комментарий. Он указывает на одну важную вещь. А именно, сейчас мы подключили к странице версию Vue, предназначенную для разработки. Если некая страница предназначена для реального использования, то к ней нужно подключать продакшн-версию скрипта. Подробности об этом можно почитать здесь.
Теперь, после подключения скрипта, нам, в первую очередь, нужно добавить на страницу корневой элемент, к которому будет подключён экземпляр Vue:
После этого создадим новый экземпляр Vue и сообщим ему о том, к какому корневому элементу ему нужно подключиться:
Теперь создадим пару переменных. Они будут хранить значения, которые мы используем для вывода информации на страницу. Делается это путём объявления свойств объекта data :
Сейчас, когда данные готовы, мы готовы прибегнуть к возможностям Vue по выводу их на страницу. Делается это с использованием простых, удобных для восприятия конструкций:
Сейчас вы можете поздравить себя с тем, что вы только что создали своё первое Vue.js-приложение. Если открыть index.html в браузере, то в нём должна вывестись страница, на которой крупными буквами написано «Hello, Vue!». Ниже этой надписи должна находиться строка, выводящая текущие дату и время. В ходе разработки и исследования моего варианта примера я пользовался Visual Studio Code и расширением Live Server.
Если открыть эту страницу в браузере, то её внешний вид не изменится, но выводимое на ней время будет каждую секунду обновляться. При этом нам нет нужды в том, чтобы обновлять DOM вручную. Vue связал данные с DOM. При изменении данных меняется и то, что показано на странице.
Вариант №2: Vue CLI
Хотя мы и создали приложение, просто подключив скрипт Vue к странице, такой подход не отличается хорошей масштабируемостью. Если нужно разработать полноценное одностраничное приложение (Single Page Application, SPA) и при этом хочется воспользоваться вспомогательными инструментами Vue, тогда лучше всего будет прибегнуть к Vue CLI.
Если вы из тех, кто не очень любит работать в командной строке, тогда вы вполне можете воспользоваться инструментом с аналогичными возможностями, имеющим графический интерфейс (Vue UI).
▍Установка Vue CLI
Для начала нам нужно установить Vue CLI. Прежде чем это сделать — нужно обзавестись Node.js и npm. Если вы раньше не работали с Node.js и npm — уделите некоторое время на то, чтобы с ними познакомиться и немного в них разобраться. Вот команда, с помощью которой можно установить Vue CLI:
Список команд, поддерживаемых утилитой vue
Команда create принимает имя приложения. Создадим новое Vue-приложение, выполнив следующую команду:
Сейчас же нам достаточно согласиться с предлагаемыми по умолчанию параметрами. Это приведёт к созданию нового приложения.
Создание нового приложения с помощью Vue CLI
Теперь, в командной строке или во встроенном в ваш редактор терминале, выполните следующую команду:
Она запустит сервер, после чего выдаст сведения о том, как открыть начальную страницу приложения. А именно, это http://localhost:8080/.
Vue-приложение в браузере
Тут мы рассмотрели использование Vue CLI лишь весьма поверхностно. Однако я надеюсь, что этот пример показал вам то, как легко с помощью Vue CLI создавать новые приложения, которые обеспечены надёжной инфраструктурой и могут масштабироваться сообразно росту нужд развивающегося проекта.
Вариант №3: Vue UI
Вместе с Vue CLI, с инструментом командной строки, устанавливается и инструмент Vue UI. Для того чтобы его запустить — воспользуйтесь следующей командой:
В ходе её выполнения будет открыта страница нового приложения, находящаяся по адресу http://localhost:8000/dashboard.
С помощью Vue UI можно создать новый проект, который будет обладать теми же возможностями, что и проект, созданный средствами командной строки.
Создание нового проекта в Vue UI
После того как настройка проекта будет завершена, запустить его можно прямо из Vue UI, перейдя в раздел Project tasks и нажав на соответствующую кнопку.
Запуск приложения в Vue UI
Вариант №4: CodeSandbox
Хотя вышерассмотренные варианты создания первого Vue-приложения и позволили нам достичь поставленной цели, они требуют некоторой настройки окружения разработки. Возможно, вам это не подходит и вы до сих пор не создали своё первое Vue-приложение. Если так — тогда сейчас мы рассмотрим ещё один способ работы с Vue. Он заключается в использовании онлайновых сред разработки, одной из которых является CodeSandbox.
Прежде чем создавать проекты на CodeSandbox, вам понадобится зарегистрироваться на сайте или войти в систему с использованием GitHub-аккаунта. После этого нужно создать новую «песочницу» (в рамках проекта это называется «sandbox») и найти Vue среди доступных шаблонов (на закладке Popular templates или Client templates ).
Создание нового проекта, основанного на Vue, в CodeSandbox
После этого в вашем распоряжении окажется новое Vue-приложение. На следующем рисунке можно видеть, что в левой панели можно работать с файлами проекта, в центре находится окно редактора, а справа — область предварительного просмотра, в которой выводится работающее приложение.
Работа над приложением в CodeSandbox
Откройте в редакторе файл src/components/HelloWorld.vue и замените его содержимое на следующий код:
После этого вы увидите то же приложение, которым мы уже занимались. В ходе работы над проектом может возникнуть необходимость в том, чтобы кому-то его показать. Например — для того, чтобы о чём-то посоветоваться. CodeSandbox позволяет сделать это с помощью специальной ссылки.
Работа над приложением в CodeSandbox
Полезные ресурсы
Вот ссылки на некоторые из моих любимых ресурсов по Vue. Они помогут вам продвигаться в деле освоения этого фреймворка. Например — вот страница Awesome Vue, посетив которую можно получить представление о масштабах экосистемы Vue. Здесь можно найти репозитории Vue. Вот официальный блог проекта. Вот сайт сообщества Vue-разработчиков. Вот и вот — подкасты по Vue. Вот — страницы нескольких проектов, основанных на Vue: VuePress, Nuxt, Gridsome.
Что дальше?
Независимо от того, каким фреймворком вы пользуетесь для разработки фронтенда — вам нужно поддерживать в хорошем состоянии свои знания по JavaScript. Чем больше времени вы сможете уделить совершенствованию своих знаний по JS — тем лучше. Если вы хорошо знаете JavaScript — это значит, что вы сможете справиться с любым фреймворком или с любой библиотекой, с которыми вам может понадобиться работать.
Я уже говорил о руководстве по Vue из официальной документации. Но о нём стоит упомянуть снова. Я бы, если был бы начинающим разработчиком, постарался бы как можно тщательнее разобраться с этим руководством, читал бы его и перечитывал. Но при этом я не забывал бы испытывать на практике те примеры кода, которые там встречаются. Не зря говорят, что повторенье — мать ученья. Повторение играет важную роль в процессе изучения новых технологий, и без него вам не обойтись.
В процессе работы с документацией стоит обратить особое внимание на следующие базовые концепции Vue:
Итоги
Если вы следите за моими публикациями в Twitter, то вы знаете, что я — большой фанат Vue. Мне нравится создавать приложения, основанные на компонентах. Я полагаю, что использование Vue не только упрощает работу, но и делает процесс написания кода приятным и увлекательным занятием.
Уважаемые читатели! Если вам приходилось недавно изучать свой первый клиентский фреймворк — просим рассказать о том, как это было.