​Делаем пет-проект для поиска погоды на Vue 3 + OpenWeatherMap API

У нас на сайте появилось пошаговое руководство, которое позволит вам буквально за выходные создать просто приложение для поиска погоды с помощью Vue 3 и OpenWeatherMap API. В ходе проекта вы познакомитесь с возможностями фреймворка Vue, научитесь создавать функцию search() для обработки ответов от API и узнаете ещё много нового и полезного.

Переходите по ссылке и приступайте к созданию нового проекта:

https://tproger.ru/articles/prilozhenie-dlya-poiska-pogody-s-vue-3-openweathermap-api

#vue #api #петпроект

​Полный курс по Vue.js

Vue.js — это JavaScript-фреймворк, который создал разработчик Эван Ю. В 2012 году Эван работал в Google, где успел попробовать Backbone.js и Angular. Именно после этого он решил создать собственный фреймворк — сначала просто как пет-проект.

Популярность обрушилась на Vue.js в 2015 году. И сейчас Vue.js очень любим разработчиками. Долгое время фреймворк удерживал первое место по количеству звёзд на GitHub. Сейчас другие проекты сумели побить его достижения, но среди фреймворков он всё так же остаётся лидером.

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

#vue #веб

Овладейте всем потенциалом анимирования с Vue

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

В данной статье вы изучите возможности Composition API для создания анимаций в Vue с помощью CSS и библиотеки GSAP:

https://habr.com/ru/companies/ruvds/articles/728746/

#vue

Разработка одностраничного приложения с помощью Flask и Vue.js

Ловите пошаговое руководство по настройке базового CRUD-приложения с помощью Vue и Flask. Здесь вы начнёте с создания каркасов нового приложения Vue, а затем перейдёте к выполнению основных операций CRUD с помощью внутреннего RESTful API, работающего на Python и Flask.

К концу работы над проектом вы научитесь работать с Flask, Vue, RESTful API, подключать фронтенд к бэкенду, использовать маршрутизацию и многое другое. Начинаем здесь:

https://testdriven.io/blog/developing-a-single-page-app-with-flask-and-vuejs/

#flask #vue #spa

​Как сделать кастомный Semi Donut Chart с помощью SVG

Semi Donut Chart — одна из форм представления отчётов в виде полукруглой диаграммы. Используется в том случае, когда важна не математическая точность, а наглядность.

Если вы хотите сделать интересный Semi Donut Chart без использования библиотек по типу Chart.js, то этот туториал для вас.

#vue #html #charts

​Изучение Vue.js в 2023 году: дорожная карта разработчика

Vue.js — это популярный JavaScript-фреймворк для создания пользовательских интерфейсов.

Для того, чтобы освоить его нужно изучить не только технологии, которые касаются непосредственно Vue.js, но и уметь работать с инструментами сборки вроде менеджеров пакетов и Vite, владеть CSS на уровне архитектуры и препроцессоров, управлять состоянием и многое другое.

Дорожная карта с подробными объяснениями каждого пункта ждёт вас по ссылке:

https://tproger.ru/articles/izuchenie-vue-js-v-2021-godu-dorozhnaja-karta-razrabotchika/

#vue #roadmap

Анимация появления и исчезновения элемента на Vue.js

Привет, на связи админ! Не так давно у нас на канале выходил пост на тему анимации элементов на React.

В комментариях наш подписчик @tkenz попросил выпустить материал по этой теме, только уже на Vue.js.
И вот, что мне удалось найти.

Здесь автор затронул и анимацию первоначальной отрисовки, и javaScript-хуки, и режимы переходов и многое другое. Так что обязательно прочитайте её, пригодится:

https://tprg.ru/RHC9

#vue

​Как создать и развернуть библиотеку компонентов Vue в NPM

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

В этой статье автор подробно разобрал, как использовать этот лайфхак на практике:

https://habr.com/ru/articles/678274/

#vue

​Создание приложения погоды на Vue.js

Отличный урок как раз к выходным. Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, Open Weather Map API и restful api для получения данных о погоде.

Подробнее:

https://youtu.be/JLc-hWsPTUY

#видео #vue

​ SSR и SEO в SPA

Представьте себе ситуацию: у вас есть SPA с рендерингом на клиенте, и вы хотите, чтобы содержимое тега <head> менялось в зависимости от URL.

Эта статья расскажет, как добавить server side Open Graph и другие SEO-теги в ваше приложение без необходимости мигрировать на SSR фреймворк.

#spa #seo #vue

​Как типизировать Vuex Store

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

В статье автор объясняет, зачем нужна типизация state и почему предпочтительнее использовать Pinia. Он демонстрирует, как задать типы для mutations, actions и getters.

В результате вы получите 100% типобезопасный Vuex, избегая при этом путаницы в сложных объявлениях типов.

#vue #pinia #typescript

​​Разработчики фреймворка Vue напомнили, что цикл поддержки Vue 2 завершается в конце 2023 года

В блоге Vue рассказали, что 31 декабря 2023 года заканчивается цикл поддержки Vue 2. Разработчикам следует перейти на актуальную версию.

После 31 декабря 2023 года Vue 2 перестанет получать новые функции, исправления ошибок и обновления. Устаревшую версию фреймворка не будут удалять из официальных каналов распространения.

Кроме того, следующие npm-пакеты будут отмечены как устаревшие:
— все основные и второстепенные версии ядра Vue 2;
— версии vue-router, поддерживающие работу только с Vue 2;
— версии vuex, поддерживающие только Vue 2.

Для тех, кто не может в ближайшее время совершить миграцию на Vue 3, разработчики рекомендуют:
— обновиться до версии 2.7.16, которая выйдет в конце этого месяца и будет содержать в себе несколько важных исправлений;
— если в проекте строгие требования к безопасности, то можно перейти на версию Vue 2 NES (Never-Ending Support) от HeroDevs.

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

#vue

​​Old but gold: ​Сквозь тернии к core-у, или процесс компиляции Vue

Сегодня Vue пользуется огромной популярностью, успешно конкурируя с React. У него есть и удобные шаблоны, и однофайловые компоненты, и хранилище состояний и многое другое прямо «из коробки».

Но как это всё работает и компилируется? В этой статье вы найдёте ответ: https://habr.com/ru/companies/nordclan/articles/690522/

#фронтенд #vue

RUINSWORD: Многопользовательский шутер с открытым миром для браузера на JS/TS, Three и Vue

Вот по-настоящему амбициозный проект, который на 100% раскрывает возможности современных браузеров. Несмотря на то, что сейчас доступна только бета-версия, мы с вами можем оценить объём проделанной работы и даже поиграть.

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

#gamedev #vue #threejs

В какую сторону развивается Vue и есть ли ему современные альтернативы

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

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

#vue

Динамические layout с Vue jsx: руководство по созданию гибких и удобных в обслуживании пользовательских интерфейсов

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

Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.

#vue #фронтенд

Делаем приложение погоды на Vue.js

Если думали над пет-проектом, то вот интересный вариант: приложение погоды на Vue JS, с использованием Open Weather Map API и restful api для получения данных о погоде.

#видео #vue

Немного полезной информации о слотах в Vue.js

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

Подробнее о возможностях и пользе слотов: https://habr.com/ru/companies/otus/articles/850204/

#vue #фронтенд

Vue.js с нуля: бесплатный курс из 34 уроков

Обучающий курс по Vue 3, который охватывает всё необходимое для уверенного старта. Вы начнёте с базовой установки и синтаксиса, разберётесь с компонентами и директивами, освоите двунаправленное связывание данных (v-model) и другие ключевые возможности Vue. Пошаговый формат позволит плавно пройти путь от новичка до создания собственного приложения на Vue.js.

#vue@tproger_web #фронтенд@tproger_web

Пятнашки на Vue

Полезный codepen-проект для тех, кто изучает Vue. Сможете не только изучить алгоритм игры, но и посмотреть, как это реализовано на фреймворке.

https://codepen.io/leemartin/pen/VwmdyNQ

#codepen #vue