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

И не без причины - среди наиболее заметных особенностей Vue - плавная кривая обучения, лаконичный стиль программирования и высокая производительность из-за к автоматическому отслеживанию зависимостей компонента во время его рендеринга. Кроме того, его основные концепции хорошо документированы.

По мере роста сообщества Vue.js растет и его экосистема инструментов разработки. Рассмотрим его лучших представителей более подробно.

Vue CLI

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

Гибкая система плагинов Vue CLI поддерживает Babel, TypeScript, ESLint, PostCSS, PWA, Jest, Mocha, Cypress и Nightwatch. Кроме того, благодаря этой системе разработчики могут делиться своими плагинами с сообществом.

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

Еще одна вещь, которая вам понравится, - это мощный GUI Vue CLI, который значительно упрощает создание, настройку и управление проектами. Кроме того, Vue CLI имеет встроенную поддержку модульного и сквозного тестирования.

Сборник рассказов

Storybook - это среда с открытым исходным кодом для разработки, управления и тестирования компонентов пользовательского интерфейса. Простая настройка компонентов с помощью гибкого API - это то, что делает его незаменимым инструментом для эффективного создания пользовательского интерфейса.

С помощью Storybook вы можете создавать потрясающие компоненты и демонстрировать их в изолированной среде. Поскольку он работает вне вашего приложения, вам не нужно беспокоиться о его зависимостях и конкретных требованиях.

Если вы хотите реализовать дополнительные функции для Storybook, вы можете попробовать функциональность аддонов.

Vuetify

Vuetify - это компонентный фреймворк, который предлагает широкий спектр потрясающих компонентов пользовательского интерфейса. Все компоненты соответствуют принципам Material Design. Вы можете использовать эту платформу для создания мобильных, отображаемых на стороне сервера, одностраничных и прогрессивных веб-приложений, а также для обычных HTML-страниц.

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

Еще один аспект, который я хотел бы выделить, - это его богатая экосистема, которая включает генератор тем, vuetify-loader, модуль Cognito и другие инструменты. Более того, компоненты хорошо документированы и сопровождаются хорошими примерами.

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

VuePress

VuePress - инструмент для создания статических сайтов. Он предлагает функции ведения блога и систему плагинов. Вы можете создавать собственные темы и использовать готовые к использованию темы сообщества.

Разрешите мне раскрыть суть его работы. После того, как вы напишете контент сайта с использованием синтаксиса Markdown, VuePress преобразует его в статические файлы HTML. Как только эти файлы загружаются, ваш сайт запускается как одностраничное приложение (SPA), поддерживаемое Vue, Vue Router и Webpack.

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

VueX

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

Давайте подробнее рассмотрим структурные компоненты VueX:

  • состояние - объект, содержащий состояние приложения.
  • геттеры - объекты, которые предоставляют методы, используемые для доступа к состоянию. Они действуют как вычисляемые свойства для магазинов.
  • мутации - объекты, которые предоставляют методы воздействия на состояние. Мутации могут напоминать вам о событиях, поскольку мутация имеет строковый тип и обработчик - функцию, в которой мы изменяем фактическое состояние.
  • действия - объекты, которые предоставляют методы для запуска мутаций и выполнения асинхронных операций.

Также стоит упомянуть модули как неотъемлемую часть VueX. Модули могут пригодиться, когда ваше приложение начинает масштабироваться. Рекомендуется организовывать код в модули, чтобы разделить хранилище на отдельные части и, следовательно, упростить его обслуживание. Каждый модуль имеет собственное состояние, мутации, действия и геттеры.

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

На мой взгляд, VueX отлично справляется с управлением общим состоянием. Но если ваше приложение такое же простое, как одностраничное приложение, вам, скорее всего, не понадобится Vuex. Вам следует использовать его, если вы создаете средне- или крупномасштабное одностраничное приложение и сталкиваетесь с проблемой обработки состояния вне ваших компонентов Vue.

Nuxt

Nuxt - еще один прогрессивный фреймворк на основе Vue для создания современных веб-приложений. Под капотом Nuxt используются официальные библиотеки Vue (vue, vue-router и vuex) и инструменты веб-разработки (такие как webpack, PostCSS и Babel).

С помощью Nuxt вы можете создавать все виды приложений Vue - от статических целевых страниц до сложных корпоративных приложений. Он имеет модульную экосистему, которая позволяет легко подключать конечные точки REST и GraphQL.

Другие встроенные функции включают рендеринг на стороне сервера, автоматическое разделение кода, ES2015 + транспиляция, мощная система маршрутизации. с асинхронными данными и многим другим.

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

Чтобы лучше понять, как можно использовать Nuxt.js, погрузитесь в примеры и изучите его API.

Если вы хотите внести свой вклад в его развитие, вы можете сделать это на его GitHub.

Gridsome

Gridsome - это современная платформа для создания быстрых и безопасных веб-сайтов, которую можно развернуть на любом статическом веб-хосте или CDN (Netflify, Amazon S3 и т. Д.). Хотя он относительно новый (выпущен в 2018 году), среди разработчиков Vue уже есть много последователей и последователей. Его создатели были вдохновлены Gatsby.js (генератором сайтов для React). Это вдохновение привело к созданию похожей структуры, но для Vue.js.

Позвольте мне объяснить, как это работает. Gridsome генерирует оптимизированные для SEO файлы HTML на основе источника данных, который вы предоставляете в своем приложении. Источником данных может быть любой - Markdown, CSV, Yaml, JSON, WordPress, Drupal (любая другая CMS), MongoDB, Airtable и т. Д. После загрузки контент превращается в единый уровень данных GraphQL. который служит для централизованного управления данными. Теперь вы можете извлечь эти данные и использовать их для создания и развертывания приложения Vue.

Использование универсального уровня GraphQL для всех источников данных, подключенных к приложению, делает Gridsome таким уникальным. Благодаря этому значительно упрощается управление данными, поскольку уровень GraphQL действует как централизованное хранилище и может использоваться любой страницей или компонентом.

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

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

Кроме того, он не только бесплатный, но и с открытым исходным кодом. Любой вклад в проект более чем приветствуется, поскольку это молодой проект, созданный и поддерживаемый двумя энтузиастами Vue.

💡Подробнее

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

Первоначально опубликовано на https://www.webdatarocks.com.