Подборка инструментов для быстрой разработки приложений на Vue.js

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

1. Bit + Vue

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

С помощью Bit можно легко изолировать компоненты из любого проекта (без необходимости рефакторинга или конфигурации), делиться ими со своей командой, использовать или разрабатывать их из любого другого проекта.

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

Вот демонстрационное видео с компонентами Bit для React. Это работает точно таким же образом как с компонентами для Vue, так и с любыми другими компонентами JS. Обратите внимание, несмотря на то что компоненты Vue полностью поддерживаются Bit, визуальный рендеринг все ещё находится в разработке и ожидается в ближайшее время.

2. StoryBook + Vue

До недавнего момента этот инструмент можно было использовать только в React, но с выпуском Storybook 3.2 появилась поддержка Vue.

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

Также можно рассмотреть другие полезные аддоны: addon-actions, addon-links, addon-knobs, addon-notes. Ещё больше дополнений получат поддержку в будущем.

3. Vue dev-tools

Vue-devtools – расширение браузеров Chrome или Firefox для отладки приложений Vue.js. (есть и десктопная версия). Для отладки приложений в реальном времени можно совместно использовать vue-devtools и Vuex.

С выпуском версии 4 появилась возможность изменять данные компонентов непосредственно из панели инспектора. Теперь при использовании vue-loader или Nuxt в проекте можно открыть выбранный компонент в любимом редакторе кода (при условии, что это Single-File Component).

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

4. Vue loader и Vue-CLI

Vue-loader

Vue-loader – это загрузчик для webpack, позволяющий создавать компоненты Vue в формате Single-File Components (SFC). Комбинация webpack и vue-loader позволит ускорить процесс разработки приложений на Vue.js.

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

Вот хороший пример для знакомства с Vue.js и Webpack 4.

Vue-CLI

Да, на очереди уже новая версия Vue-CLI 3, но и в устаревшей версии Vue-CLI есть полезные функции. Например, он предоставляет удобные инструменты для быстрого прототипирования приложений, поддержку @vue/cli-service и графический интерфейс для создания и управления проектами Vue.js.

Проект, состоящий из инструментов командной строки, сервиса CLI (построенного поверх Webpack) и системы плагинов, обеспечивает поддержку Babel, TypeScript, ESLint, PostCSS, PWA, юнит тестов и сквозного тестирования.

5. Шаблоны и макеты Vue

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

Webpack / webpack-simple

Связка Webpack+ vue-loader создана специально для горячей загрузки, тестирования и извлечения CSS. Webpack-simple не предназначен для серьёзной работы, но обеспечивает установку Webpack + vue-loader для быстрого прототипирования.

Browserify / browserify-simple

Полнофункциональная связка Browserify + vueify с горячей загрузкой, линтингом и юнит тестами (см. также: документация по vueify). Упрощённая версия этого проекта – browserify-simple, создана для быстрого прототипирования, но не предназначена для промышленной разработки.

Simple

Simple предназначен для «новичков, которые хотят начать изучение Vue, не отвлекаясь на сложные среды разработки», и это самая простая версия для начала работы с Vue в одном файле HTML.

Обратите также внимание на следующие инструменты: pwa, vue-starter (пример), vue-enterprise-boilerplate, vue-express-mongo-boilerplate, vuexpresso (GraphQL).

Смотрите также: Создание простого веб-приложения с Vue и Firebase