DevGang
Авторизоваться

Как написать чистые компоненты Vue

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

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

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

Создайте свою собственную библиотеку пользовательского интерфейса Vue с помощью Unstyled PrimeVue Core и Tailwind CSS

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

Идеальный компонент с бесконечной прокруткой для Nuxt

Вам когда-нибудь нужен был плавный, непрерывный скроллинг для ваших проектов Nuxt? Вдохновленный современным подходом Райана Маллигана, я создал для вас идеальный отзывчивый компонент Nuxt. Метод Райана Маллигана служит отличной основой для этой реализации, поэтому не стесняйтесь ознакомиться с ним, чтобы получить более подробное объяснение задействованного CSS.

Как остановить выполнение кода после ответа 401 в Axios

Давайте углубимся в то, как работает перехватчик Axios и как обеспечить остановку выполнения кода после ответа 401.

  • 1. Обзор перехватчика Axios: Перехватчики Axios — это функции, которые Axios позволяет вам определять глобально для всех запросов или ответов. Эти функции можно использовать для изменения запросов или ответов, обработки ошибок или выполнения других задач до или после выполнения HTTP-запроса.
  • 2. Проблема: В вашем случае вы хотите перенаправить пользователя на страницу входа при получении ответа 401 (несанкционировано). Однако вы также хотите убедиться, что после перенаправления дальнейший код не выполняется.
  • 3. Остановка выполнения: В JavaScript промисы используются для обработки асинхронных операций, таких как HTTP-запросы. Когда обещание отклоняется, оно обычно перемещается в ближайший блок catch для обработки ошибки. Однако если вы хотите полностью остановить выполнение, вы можете создать исключение внутри блока catch.
  • 4. Решение с объяснением: В перехватчике Axios, когда вы используете return Promise.reject('Unauthorized');, вы по сути генерируете исключение с сообщением Unauthorized. Это останавливает цепочку обещаний и гарантирует, что все последующие блоки .then() будут пропущены. В вашем случае это важно, поскольку вы не хотите дальнейшего выполнения кода после перенаправления.

Vue 3: API параметры и API композиции

Опциональный API — это основной метод создания компонентов в Vue. С появлением Vue 3 был представлен новый метод создания компонентов, названный API композиции.

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

Создание приложения с помощью Electron и Vue 

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

Как сделать значение модели v-model необязательным в Vue.js

При написании моей библиотеки пользовательского интерфейса Vue.js, Inkline, мне пришлось найти способ заставить некоторые компоненты работать как с указанием значения модели ( v-model), так и без него. Хотя это не распространенный сценарий, вы обязательно столкнетесь с ним, если пишете библиотеку и серьезно относитесь к Developer Experience (DX).

Я называю их необязательно контролируемыми компонентами, потому что они должны работать из коробки без предоставления v-model, но предоставят вам полный контроль над их состоянием, если вы предоставите v-model.

Какой JavaScript-фреймворк станет лучшим в 2021 году?

Любой, кто начинает свою карьеру в качестве разработчика или инженера-программиста, наверняка сталкивался с проблемой выбора языка, фреймворка или инструментов, которые им нужно изучить в первую очередь. Я уверен, что все вы, должно быть, столкнулись с такой же ситуацией. Ответ на этот вопрос немного сложен, поскольку в индустрии разработки программного обеспечения доступно большое количество языков и фреймворков. Я подумал о сравнении трех фреймворков на основе JavaScript, поскольку JavaScript стал основой большинства процессов разработки.

Mock Dependency: секретное оружие для Vue Unit Tests 

Если у ваших однофайловых компонентов Vue есть зависимости, вам нужно как-то обрабатывать зависимости при модульном тестировании компонента.

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

В этой статье я покажу вам, как смоделировать файл модуля в Jest, заменив его на графике зависимостей вашего компонента.

CKEditor5 интеграция в Vue.js

Совсем недавно команда CKSource реализовала нативную интеграцию CKEditor5 с Vue.js. Теперь редактор можно без труда интегрировать в три самых популярных javascript фреймфорка React, Angular 2+ и Vue.js

Присоединяйся в тусовку

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

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу