Публикации по теме 'vue-3'
Как использовать GraphQL в Vue3 с клиентом Apollo
Интегрируйте GrapghQL с Vue3 с помощью библиотеки Vue-apollo (Composition API).
План: 1. Что такое клиент GraphQL или Apollo? 2. Практическая часть. 2.1. Настроить Apollo-клиент (composition API). 2.2. Ознакомьтесь с бесплатным API GraphQL. 2.3. Как получить данные с сервера GraphQL (запросы). 2.4. Как отправлять данные на сервер GraphQL (мутации). 2.5. Политика выборки. 2.6. Как открыть канал между клиентом и сервером (подписки). 3. Полезные ссылки и пример на GitHub.
1. Что..
3 особенности Vue 3
По состоянию на март 2023 года всем разработчикам программного обеспечения, использующим Vue 2 в качестве интерфейсной среды, в ближайшем будущем может потребоваться перейти на Vue 3 *возможно* по следующим причинам:
1. Поддержка Vue 2 закончится 31 декабря 2023 г.
2. Vue 3 уже стабилен. Последним стабильным выпуском является версия 3.2.45, выпущенная 11 ноября 2022 года.
3. Vue 3 имеет некоторые новые примечательные функции, которых не было у vue 2.
И вот 3 из новых функций Vue 3,..
Как получить все маршруты (и текущий маршрут) в Vue Router с помощью Vue 3 Composition API.
Мне понравился метод this.$router для доступа к маршрутам и параметрам маршрутов из Vue Router с помощью API параметров. Это было здорово для циклического просмотра всех ваших маршрутов и их рендеринга в простом компоненте навигации или нижнего колонтитула. Но введите Vue 3 и Composition API: все полетело к чертям.
Возврат всех маршрутов
При обращении к маршрутизатору в API параметров мы можем использовать переменную экземпляра this.$router и возвращать все маршруты с помощью..
Nuxt 3: ручная маршрутизация и иерархическая структура
Nuxt 3: ручная маршрутизация и иерархическая структура
Nuxt 3 теперь доступен для бета-тестирования, и мне не терпится познакомиться с его новыми функциями. Интересно, как там обстоят дела с одной очень важной вещью — иерархической структурой проекта.
Конечно, стандартная структура проекта хорошо подходит для простых проектов, но когда ваш проект растет и ваша команда растет, становится сложно управлять структурой стандартным способом. Папка ваших страниц становится большой, папка..
Реализуйте многоразовое диалоговое окно выбора файлов с помощью Vue 3 Composables
Vue 3 предоставил нам новый мощный способ извлечения и повторного использования логики с отслеживанием состояния в различных компонентах: Composables. Вы можете думать о них как о простых функциях, реализующих Composition API.
В этом руководстве мы собираемся создать компонуемый объект, который позволит нам выбирать файлы из нашего локального хранилища устройства, используя диалоговое окно системы по умолчанию. Этот компонуемый объект создаст скрытый ввод HTML `type=”file”` и..
Повторное использование кода и инкапсуляция логики в Vue 3
В веб-разработке повторное использование кода и инкапсуляция логики имеют решающее значение для создания эффективных, масштабируемых и удобных в сопровождении приложений. В этой статье мы подробно рассмотрим подходы, используемые Vue 3 для реализации этих концепций, и рассмотрим преимущества и недостатки каждого из них.
API композиции и Vuex
Vue 3 представляет Composition API, который позволяет разработчикам определять и повторно использовать логику гибким и интуитивно понятным..
Создайте свои собственные пользовательские хуки Vue: useElementSize
В этой статье я покажу вам процесс создания пользовательского составного хука Vue, который можно использовать в любом приложении или компоненте.
Я продемонстрирую это, создав хук с именем useElementSize , который предоставляет реактивные width и height элементов, которые будут обновляться при изменении размеров элемента.
Используя этот подход, вы можете создавать собственные компонуемые объекты Vue. Прежде чем перейти к составному API, просмотрите приведенный ниже код, чтобы..
