Vue — это интерфейсная платформа с открытым кодом для создания пользовательских интерфейсов и одностраничных веб-приложений на JavaScript. Эта платформа была выпущена в 2014 году. Ее поддерживают создатель Эван Ю (Evan You) и члены его основной команды. Во Vue основное внимание уделяется декларативной отрисовке и созданию компонентов, а основная библиотека предлагается только для слоя представления.
Если вы хотите создать веб-приложение Vue, которое отрисовывается на сервере, с дополнительными функциями, такими как маршрутизация, управление состоянием и средства сборки, ознакомьтесь с Nuxt.js.
В чем особенность Vue?
Vue использует архитектуру Model-View-ViewModel. Ранее Эван Ю работал над проектом AngularJS в Google и на основе некоторых аспектов Angular создал более простую платформу. Vue во многом напоминает React, Angular, Ember, Knockout и другие платформы. Более подробное сравнение Vue с этими платформами JavaScript см. в документации по Vue.
Что можно делать с помощью Vue?
- Создать одностраничное приложение.
- Можно добавить простой список задач в приложение либо реализовать более сложные примеры с помощью одного компонента Vue.
- Создать веб-сайт с отрисовкой на сервере и серверной частью на базе Node.js с помощью Nuxt.js.
Инструменты Vue
Платформа Vue.js предназначена только для слоя представления, поэтому для создания более сложного приложения могут потребоваться дополнительные инструменты. Вот какие инструменты вам могут потребоваться:
Все что вам нужно знать про Vue js
- Диспетчер пакетов — с Vue используются два популярных диспетчера пакетов: npm (включен в Node.js) и yarn. Оба из них поддерживают широкую библиотеку пакетов для установки.
- Vue CLI — стандартный набор средств для быстрой разработки в Vue.js со встроенной поддержкой Babel, PostCSS, TypeScript, ESLint и т. д.
- Nuxt.js — платформа, которая помогает создавать приложения Vue.js с отрисовкой на стороне сервера. Отрисовка на стороне сервера может улучшить SEO и ускорить работу пользовательских интерфейсов.
- Пакет расширений Vue для VS Code — позволяет добавить выделение синтаксиса, форматирование кода и фрагменты кода в файлы с расширением .vue.
- Vuetify — библиотека пользовательского интерфейса Vue, в которой предлагаются компоненты платформы Material Design.
- Vuesion — библиотека стандартных текстов Vue для прогрессивных веб-приложений (PWA), готовых к развертыванию в рабочей среде.
- Storybook — среда разработки и тестирования для компонентов пользовательского интерфейса Vue.
- Vue Router — поддерживает сопоставление URL-адресов приложений с компонентами Vue.
- Vue Design System — инструмент с открытым кодом для создания систем проектирования с помощью Vue.js.
- VueX — система управления состоянием для приложений Vue.
Дополнительные ресурсы
- Документация по Vue
- Общие сведения о Vue.js
- Выбор между установкой в Windows и подсистеме Windows для Linux (WSL)
- Установка Vue.js в WSL
- Установка Vue.js в Windows
- Установка Nuxt.js
- Выполните первые шаги с помощью схемы обучения Vue.js
- Руководство по работе с Vue в VS Code
Источник: learn.microsoft.com
Что такое VUE.JS
Что такое Vue.js и почему он популярен?
Vue.js — это среда JavaScript, которую разработчики ценят за ее универсальность. Результаты опроса State of JavaScript 2020 показали, что почти половина респондентов используют Vue.js, а уровень удовлетворенности фреймворком превышает 80%.
Помеченный как «Прогрессивная среда JavaScript», Vue.js, без сомнения, может предложить что-то заманчивое обычному разработчику.
Что такое Vue.js?
Vue.js — это JavaScript-фреймворк модель-представление-представление (MVVM) для создания пользовательских интерфейсов (UI) и одностраничных приложений. Создателем Vue.js является бывший инженер Google Эван Ю, который быстро разочаровался в использовании AngularJS в проектах Google. Он решил извлечь лучшие черты Angular и создать что-то невероятно легкое.
- Управление состоянием, когда элементы управления пользовательского интерфейса, такие как текстовые поля, кнопки OK и т. д., могут потребовать управления за пределами текущей страницы, которую посещает пользователь (Vuex).
- Маршрутизация — процесс, который происходит, когда вам нужно синхронизировать URL-адреса с представлениями в вашем приложении (Vue-Router).
Во-первых, Vue.js хорошо подходит для любых проектов, в которых задействованы HTML, CSS и JavaScript . И именно поэтому Vue.js в основном используется для создания пользовательских интерфейсов и любых веб-разработок. Но поскольку Vue.js легкий, это также хороший выбор для быстрого прототипирования. Скажем, вы хотели создать минимально жизнеспособный продукт (MVP) по той или иной причине. Vue.js сделал бы это в один миг.
Одностраничные приложения (SPA) также находятся в сфере компетенции Vue.js. В SPA есть только одна страница для просмотра информации. Пользователи получают доступ к новой информации, поскольку веб-сайт динамически переписывает страницу при взаимодействии с пользователем. Как и React Native, Vue.js позволяет разрабатывать нативные мобильные приложения.
Разработчики могут использовать NativeScript для создания мобильных приложений на Android и iOS с общим кодом JavaScript. Может быть полезно знать, что глобальные веб-сайты, использующие Vue.js, включают в себя такие, как Facebook, Netflix и Google , что демонстрирует, насколько мощна эта структура.
Почему Vue.js популярен?
Разработчики используют Vue.js по ряду причин. Понятно, что Vue.js популярен, но его истинная привлекательность заключается в его технической проницательности. Вот некоторые особенности, отражающие возможности Vue.js:
- Легкий дизайн
- Двусторонняя привязка данных
- DOM-рендеринг
- Компонентный
- Vue.js имеет большое и активное сообщество
Vue.js против других фреймворков JavaScript
Крупнейшими конкурентами Vue.js являются другие фреймворки JavaScript, такие как React и Angular.
- Трудно учиться
- Склонен к жаргонной документации
HR Блог для IT рекрутера в Телеграм
Хочешь всегда получать новые статьи, бесплатные материалы и полезные HR лайфхаки! Подписывайся на нас в Telegram! С нами подбор ит персонала становится проще 😉
Источник: itanddigital.ru
Почему разработчики выбирают Vue
Если вы планируете создавать одностраничные приложения, вам нужно изучить хотя бы один современный фреймворк — например, Vue, React или Angular. Давайте посмотрим, чем они отличаются и в чём преимущества Vue.
- React — UI-библиотека.
- Vue — фреймворк, который нужно расширять с помощью разных дополнений.
- Angular — полноценный фреймворк.
Всё это — «большая тройка» фреймворков. Но сейчас набирают популярность и другие решения: Svelte, Qwik и Solid.
Популярность и поддержка
Сравниваем популярность по количеству форков и звёзд на GitHub.
Vue создан бывшим инженером Google — Эваном Ю. Фреймворк поддерживается сообществом, имеет 197 000 звёзд и 32 300 форков.
Известные сайты и приложения на Vue: Zoom, GitLab, Wizzair.
React создан компанией Meta. Поддерживается Meta и сообществом разработчиков. Имеет 189 000 звёзд и 39 000 форков.
Известные сайты и приложения на React: AirBnB, Nike, Udemy.
Angular 2+ создан и поддерживается Google, имеет 81 800 звёзд и 21 600 форков.
Известные сайты и приложения на Angular: YouTube TV, PayPal, Gmail.
Получается, в 2022 год Vue и React лидируют по количеству звёзд. Но по количеству написанных приложений или загруженных пакетов, выиграет React.
Количество вакансий
Vue встречается в каждой четвёртой вакансий для разработчиков с опытом 1–3 года и в 15% вакансий — с опытом от трёх лет.
React упоминается в половине вакансий для фронтендеров с опытом 1–3 года и в 64% вакансий, где нужен опыт от трёх лет.
Angular требуется в 21% вакансий для разработчиков с опытом 1–3 года и в 27% вакансий — с опытом более трёх лет.
Эти данные мы взяли из собственного исследования. Как видно, React выигрывает по количеству вакансий.
Сложность вхождения
Vue имеет низкий порог вхождения. В документации говорится, что разработчику нужен вечер, чтобы разобраться с основами фреймворка. Но чтобы писать сложные приложения, придётся потратить время и детальнее изучить Vue.
У React тоже невысокий порог вхождения. Чтобы приступить к работе, достаточно сделать импорт библиотеки и написать несколько строк кода. Но для создания сложных приложений придётся хорошенько изучить React, в том числе освоить синтаксис JSX.
Angular — более комплексный в изучении фреймворк. Чтобы начать работу, придётся изучить множество концепций и TypeScript. Но с другой стороны, Angular предлагает всё необходимое для работы «из коробки», поэтому разработчику не придётся «изобретать велосипед», создавая очередной API-модуль.
Производительность
Итоги работы JS-фреймворков мы оцениваем по данным с сайта krausest.github.io. Все три инструмента показывают неплохие результаты, но у Vue производительность чуть выше, чем у React и Angular.
Как смотреть результаты тестов: например, в create rows создаётся 1000 строк и измеряется время, за которое каждый фреймворк их отрисовывает. В swap row две строки в таблице из 1000 строк меняются местами.
Цвет показывает относительные значения. Зелёный — лучшее время. Если результаты немного отстают, ячейка окрашивается в жёлтый цвет, а если значительно — в красный. Как видно, местами Vue показывает лучшие результаты.
Здесь показана проверка с помощью Google Lighthouse. И вновь показатели Vue чуть лучше.
Конечно, всё это синтетические тесты — на производительность больше влияет архитектура проекта, а не выбор фреймворка или библиотеки.
Заключение
У Vue неплохие показатели почти по всем критериям. Чем он хорош:
- Низкий порог вхождения.
- Возможности расширяются за счёт официальных пакетов.
- Широкая поддержка сообществом разработчиков. Можно быстро найти ответы на вопросы.
- Удобный шаблонизатор HTML с мощной функциональностью.
- JavaScript-, HTML- и CSS-компоненты находятся в одном файле — это ускоряет разработку.
- Можно использовать несколько подходов к разработке: Options API и Composition API.
Но вы можете изучить и что-то другое — React или Angular. Все три инструмента подходят для создания проектов любой сложности. Каждый из них находится в активной разработке и поддерживается профессиональным сообществом. Каждый имеет свои плюсы и минусы — поэтому вам решать, что выбирать и на чём писать приложения.
Если вы захотите прокачать свои знания по Vue, то рекомендуем пройти наш подробный практический курс.
В материалах упоминается библиотека React, созданная и поддерживаемая Meta Platforms Inc. — компанией, являющейся экстремистской организацией, деятельность которой запрещена в Российской Федерации на основании осуществления ей экстремистской деятельности.
Материалы по теме
- Зачем фронтендеру разбираться в дизайне
- Что должен уметь мидл в разных компаниях
- Зачем нужны анимации в вебе и как их создавать
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru