🚀 Привет!
Меня зовут Алексей Яковенко, и я запускаю новый канал для тех, кто хочет прокачаться в современной веб-разработке.
Почему JavaScript?
- Единственный язык программирования в вебе
- Огромное количество возможностей
- Постоянно развивающаяся экосистема
О чем будем говорить:
- Vue 3
- Nuxt
- Tailwind CSS
- Современные frontend-технологии
- Практические кейсы и решения
Формат контента:
✅ Короткие обучающие посты и большие статьи
✅ Разбор сложных концепций
✅ Реальные проекты
✅ Полезные tips & tricks
Подписывайтесь, будет интересно! 💡🔥
P.S. Для тех кто хочет прокачаться в мире бэкенд-разработки приглашаю в канал "Легкий путь в Python". Там уже более 2000 единомышленников.
Меня зовут Алексей Яковенко, и я запускаю новый канал для тех, кто хочет прокачаться в современной веб-разработке.
Почему JavaScript?
- Единственный язык программирования в вебе
- Огромное количество возможностей
- Постоянно развивающаяся экосистема
О чем будем говорить:
- Vue 3
- Nuxt
- Tailwind CSS
- Современные frontend-технологии
- Практические кейсы и решения
Формат контента:
✅ Короткие обучающие посты и большие статьи
✅ Разбор сложных концепций
✅ Реальные проекты
✅ Полезные tips & tricks
Подписывайтесь, будет интересно! 💡🔥
P.S. Для тех кто хочет прокачаться в мире бэкенд-разработки приглашаю в канал "Легкий путь в Python". Там уже более 2000 единомышленников.
Я подготовил для вас мощный стартовый шаблон для разработки современных веб-приложений с использованием:
🚀 Vue 3
⚡️ Vite
🔷 TypeScript
🛣 Vue Router
🎨 Tailwind CSS
🛠 VueUse
Этот шаблон предоставляет оптимизированную структуру и передовые настройки для быстрого старта высокопроизводительных приложений.
Особенности шаблона:
- Composition API и <script setup lang="ts"> синтаксис
- Молниеносная сборка с Vite
- Надежная типизация с TypeScript
- Эффективная навигация с Vue Router
- Гибкая стилизация с Tailwind CSS
- Более 200 полезных утилит с VueUse
Шаблон доступен на GitHub: [ссылка на репозиторий]
В проекте реализовал подробный README, так что вопросов по запуску быть не должно. Там, буквально, достаточно будет ввести 4 команды в терминале и проект будет запущен.
Не забудьте поставить звездочку проекту, если он вам понравился! Ваша поддержка мотивирует меня создавать больше полезных инструментов для разработчиков.
Буду рад вашим отзывам и предложениям по улучшению шаблона. Давайте вместе сделаем разработку на Vue ещё удобнее и эффективнее! 💪
🚀 Vue 3
⚡️ Vite
🔷 TypeScript
🛣 Vue Router
🎨 Tailwind CSS
🛠 VueUse
Этот шаблон предоставляет оптимизированную структуру и передовые настройки для быстрого старта высокопроизводительных приложений.
Особенности шаблона:
- Composition API и <script setup lang="ts"> синтаксис
- Молниеносная сборка с Vite
- Надежная типизация с TypeScript
- Эффективная навигация с Vue Router
- Гибкая стилизация с Tailwind CSS
- Более 200 полезных утилит с VueUse
Шаблон доступен на GitHub: [ссылка на репозиторий]
В проекте реализовал подробный README, так что вопросов по запуску быть не должно. Там, буквально, достаточно будет ввести 4 команды в терминале и проект будет запущен.
Не забудьте поставить звездочку проекту, если он вам понравился! Ваша поддержка мотивирует меня создавать больше полезных инструментов для разработчиков.
Буду рад вашим отзывам и предложениям по улучшению шаблона. Давайте вместе сделаем разработку на Vue ещё удобнее и эффективнее! 💪
GitHub
GitHub - Yakvenalex/vue-typescript-tailwind-starter: Vue 3 + Vite + TypeScript + Vue Router + Tailwind CSS Starter Template.
Vue 3 + Vite + TypeScript + Vue Router + Tailwind CSS Starter Template. - Yakvenalex/vue-typescript-tailwind-starter
У меня спрашивали "Почему именно VUE3"? Сейчас покажу на одном примере:
При помощи этих строк мы:
1. Отправляем POST-запрос на указанный эндпоинт
2. Преобразуем его в json
Интересно то, что работает это реактивно.
<script setup lang="ts">
import { useFetch } from '@vueuse/core';
// Используем useFetch для запроса данных
const { data: doctors, isFetching, error } = useFetch('http://127.0.0.1:8000/specialists')
.post() // Метод POST
.json(); // Автоматическое преобразование в JSON
</script>
При помощи этих строк мы:
1. Отправляем POST-запрос на указанный эндпоинт
2. Преобразуем его в json
Интересно то, что работает это реактивно.
Подготовил для вас новую статью на своём сайте — подробную инструкцию по работе с JavaScript-фреймворком VueJS 3. Это пошаговый гайд по настройке современного веб-приложения с использованием Vue 3, Vite и Tailwind CSS. В статье подробно разобраны:
💎 установка необходимых зависимостей,
💎 настройка проекта,
💎 интеграция с Vue Router.
✨ Ссылка на статью: ЧИТАТЬ
Читаем, делимся мнением, и, конечно, не забываем о ваших вопросах — буду рад обсудить! 🙌
💎 установка необходимых зависимостей,
💎 настройка проекта,
💎 интеграция с Vue Router.
✨ Ссылка на статью: ЧИТАТЬ
Читаем, делимся мнением, и, конечно, не забываем о ваших вопросах — буду рад обсудить! 🙌
База знаний Алексея Яковенко
Создание Vue 3 проекта с Vite и Tailwind CSS
Пошаговая инструкция по настройке современного веб-приложения с использованием Vue 3, Vite и Tailwind CSS, включая установку необходимых зависимостей, конфигурацию проекта и интеграцию с Vue Router.
Подготовил новый гайд по Vue.js 3.
В этот раз я подробно разобрал тему отслеживания событий и реакции на них. Тема достаточно сложная. Поэтому решил, что тем кто интересуется этим фреймворком будет интересно и полезно.
В этом гайде вы узнаете, как дочерний компонент инициирует событие, а родительский реагирует на него, выполняя необходимые действия.
В своем примере, я показываю, как можно удалить компонент со страницы при клике на кнопку "Удалить".
Если вам это интересно, переходите по ссылке на гайд: [ССЫЛКА].
В этот раз я подробно разобрал тему отслеживания событий и реакции на них. Тема достаточно сложная. Поэтому решил, что тем кто интересуется этим фреймворком будет интересно и полезно.
В этом гайде вы узнаете, как дочерний компонент инициирует событие, а родительский реагирует на него, выполняя необходимые действия.
В своем примере, я показываю, как можно удалить компонент со страницы при клике на кнопку "Удалить".
Если вам это интересно, переходите по ссылке на гайд: [ССЫЛКА].
База знаний Алексея Яковенко
Инструкция по отслеживанию событий в Vue 3
Короткая и достпупная инструкция по отслеживанию событий в Vue 3 (EMIT).
🌟ПОДДЕРЖАТЬ ПРОЕКТ🌟
Дорогие подписчики!
Каждый ваш рубль - это не просто финансовая поддержка, это инвестиция в качественный технологический контент. Чем больше поддержки от сообщества, тем больше времени и ресурсов я смогу направить на создание полезного и глубокого материала по современным JavaScript-технологиям.
Почему важна ваша поддержка:
- 🚀 Ускорение выхода новых материалов
- 💡 Расширение тематики исследований
- 🔍 Углубленная проработка контента
- 🌐 Развитие образовательных проектов
Ваша заинтересованность - мой главный мотиватор! Вместе мы делаем технологическое образование доступнее и интереснее.
Спасибо, что вы здесь! 🙏
Дорогие подписчики!
Каждый ваш рубль - это не просто финансовая поддержка, это инвестиция в качественный технологический контент. Чем больше поддержки от сообщества, тем больше времени и ресурсов я смогу направить на создание полезного и глубокого материала по современным JavaScript-технологиям.
Почему важна ваша поддержка:
- 🚀 Ускорение выхода новых материалов
- 💡 Расширение тематики исследований
- 🔍 Углубленная проработка контента
- 🌐 Развитие образовательных проектов
Ваша заинтересованность - мой главный мотиватор! Вместе мы делаем технологическое образование доступнее и интереснее.
Спасибо, что вы здесь! 🙏
Есть не только канал, но и группа, в которой можно задать свои вопросы, пообщаться с единомышленниками или просто узнать что-то новое. Присоединяйтесь👇
Друзья, я решил рассказать о способе, который позволит вам создавать мощные современные веб-приложения, объединяя Vue.js 3 и FastAPI. Суть в том, что на этапе разработки мы будем писать 2 независимых приложения: фронтенд на Vue.js 3 (JavaScript-фреймворк) и бэкенд на FastAPI (Python-фреймворк).
В статье я показываю, как построить полноценное веб-приложение, где Vue.js будет отвечать за пользовательский интерфейс, а FastAPI возьмет на себя серверную логику. На примере простого секундомера мы пройдем весь путь от настройки окружения до связывания компонентов в единое приложение.
Вы узнаете:
- как правильно настроить сборку проекта
- как организовать структуру файлов
- как эффективно связать фронтенд с бэкендом
Статья доступна по ссылке: https://yakvenalex.ru/ru/all_technology/zapuskaem-vue-js-3-c-fastapi-v-odnom-prilozhenii
В статье я показываю, как построить полноценное веб-приложение, где Vue.js будет отвечать за пользовательский интерфейс, а FastAPI возьмет на себя серверную логику. На примере простого секундомера мы пройдем весь путь от настройки окружения до связывания компонентов в единое приложение.
Вы узнаете:
- как правильно настроить сборку проекта
- как организовать структуру файлов
- как эффективно связать фронтенд с бэкендом
Статья доступна по ссылке: https://yakvenalex.ru/ru/all_technology/zapuskaem-vue-js-3-c-fastapi-v-odnom-prilozhenii
База знаний Алексея Яковенко
Запускаем Vue.js 3 c FastAPI в одном приложении
Статья о том, как объединить фронтенд на Vue.js 3 с бэкендом на FastAPI в одном приложении. Мы разберем процесс настройки окружения, создания простого секундомера на Vue.js и его интеграции с Python-бэкендом через шаблонизатор Jinja2.
🌟 Друзья, добрый вечер! 🌟
Сегодня хочу поделиться с вами самым простым способом запуска Vue.JS 3 приложений на локальном компьютере после сборки, используя технологию Docker. 🚀
Шаги для запуска:
1. Соберите ваше приложение:
Выполните команду:
2. Создайте файл `Dockerfile` в корне вашего Vue.JS 3 приложения со следующим содержимым:
3. Создайте образ на основе этого файла:
Выполните команду:
4. Запустите контейнер:
Используйте команду:
Теперь ваше приложение будет доступно по адресу http://localhost:85/ (порт можно указать любой). 🎉
Попробуйте запустить свое приложение с помощью Docker и наслаждайтесь простотой и удобством! Если возникнут вопросы, не стесняйтесь задавать их в комментариях.💬
Сегодня хочу поделиться с вами самым простым способом запуска Vue.JS 3 приложений на локальном компьютере после сборки, используя технологию Docker. 🚀
Шаги для запуска:
1. Соберите ваше приложение:
Выполните команду:
npm run build
2. Создайте файл `Dockerfile` в корне вашего Vue.JS 3 приложения со следующим содержимым:
# Используем официальный образ NGINX в качестве базового
FROM nginx:alpine
# Удаляем дефолтный файл конфигурации NGINX
RUN rm /usr/share/nginx/html/index.html
# Копируем все файлы из папки dist в папку с HTML файлами NGINX
COPY dist/ /usr/share/nginx/html/
# Экспонируем порт 80
EXPOSE 80
# Запускаем NGINX
CMD ["nginx", "-g", "daemon off;"]
3. Создайте образ на основе этого файла:
Выполните команду:
docker build -t my-vue-app .
4. Запустите контейнер:
Используйте команду:
docker run -d -p 85:80 my-vue-app
Теперь ваше приложение будет доступно по адресу http://localhost:85/ (порт можно указать любой). 🎉
Попробуйте запустить свое приложение с помощью Docker и наслаждайтесь простотой и удобством! Если возникнут вопросы, не стесняйтесь задавать их в комментариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, привет!
Рад поделиться с вами второй частью из мини-серии статей по созданию телеграм-бота с Mini App для вымышленной клиники «Здоровье плюс».
Новая статья уже опубликована на Хабре и получила название:
«FastAPI и Vue.js 3: телеграм-бот с Mini App для записи и автоматических уведомлений. Пишем фронтенд».
На этот раз я сосредоточился исключительно на разработке фронтенда — без кода на Python.
В статье детально разобрал процесс создания полноценного Single Page Application с использованием современного фреймворка Vue.js 3. Для стилизации проекта применял Tailwind CSS.
Я постарался сделать материал доступным даже для тех, кто только начинает знакомство с фронтендом или Vue.js 3. Вы найдете пошаговые инструкции, которые помогут создать Mini App для нашего бота.
🔗 Cсылки👇
Рад поделиться с вами второй частью из мини-серии статей по созданию телеграм-бота с Mini App для вымышленной клиники «Здоровье плюс».
Новая статья уже опубликована на Хабре и получила название:
«FastAPI и Vue.js 3: телеграм-бот с Mini App для записи и автоматических уведомлений. Пишем фронтенд».
На этот раз я сосредоточился исключительно на разработке фронтенда — без кода на Python.
В статье детально разобрал процесс создания полноценного Single Page Application с использованием современного фреймворка Vue.js 3. Для стилизации проекта применял Tailwind CSS.
Я постарался сделать материал доступным даже для тех, кто только начинает знакомство с фронтендом или Vue.js 3. Вы найдете пошаговые инструкции, которые помогут создать Mini App для нашего бота.
🔗 Cсылки👇
Хабр
FastAPI и Vue.js 3: телеграм-бот с MiniApp для записи и автоматических уведомлений. Пишем фронтенд
Друзья, приветствую! Наконец-то дошли руки до описания второй части нашего большого проекта по работе с выдуманной клиникой «Здоровье Плюс». Я напоминаю, что в рамках этой небольшой серии мы создаем...
Легкий путь в JavaScript
Друзья, привет! Рад поделиться с вами второй частью из мини-серии статей по созданию телеграм-бота с Mini App для вымышленной клиники «Здоровье плюс». Новая статья уже опубликована на Хабре и получила название: «FastAPI и Vue.js 3: телеграм-бот с Mini…
Вопросы, предложения и комментарии 👇
Всем участникам канала привет! К сожалению, пока руки не доходят до активной работы с каналом, но планы на его развитие остаются в силе. Сейчас я разбираюсь с текущими завалами, чтобы вскоре вернуться к вам с эксклюзивным и полезным контентом.
А пока в ближайших планах — статья про фронтенд, который будет написан на Vue.js 3 с использованием Centrifugo и Vue-tg. Оставайтесь на связи, скоро будет интересно! 😊
А пока в ближайших планах — статья про фронтенд, который будет написан на Vue.js 3 с использованием Centrifugo и Vue-tg. Оставайтесь на связи, скоро будет интересно! 😊
This media is not supported in your browser
VIEW IN TELEGRAM
✨ Друзья, доброе утро! ✨
Встречайте вторую часть серии статей про создание Telegram-бота с MiniApp интерфейсом для реального анонимного чата «Тет А Тет»! 🎉
Статья получила название: «Создание анонимного чата в Telegram: Бот с MiniApp интерфейсом. Часть 2 — VueJS3 + Centrifugo с монетизацией» и уже доступна на Хабре к прочтению.
📌 В этой части мы разберём:
✅ Разработку стильного, анимированного UI на VueJS 3 с real-time чатом.
✅ Мгновенный обмен сообщениями через Centrifugo без лишней нагрузки на сервер.
✅ Монетизацию Telegram MiniApp с помощью умной рекламы от RichAds.
✅ Финальные шаги перед продакшеном и деплой проекта.
🛠 Что мы реализуем?
🔹 Экран загрузки приложения
🔹 Поиск и подбор собеседников
🔹 Экран ожидания
🔹 Сам real-time чат
📌 Основные технологии:
🚀 VueJS 3 — современный JavaScript-фреймворк
📡 Centrifugo — real-time коммуникации
📲 VUE-TG — удобная работа с Telegram MiniApp API
🛤 Vue-Router — маршрутизация
💡 Если вы хотите создать быстрый, удобный и прибыльный анонимный чат в Telegram, эта статья для вас!
🔗 Читать на Хабре:
📌 Часть 1 (Бэкенд): Статья | GitHub
📌 Часть 2 (Фронтенд + Монетизация): Статья | GitHub
🤖 Попробовать бота в Telegram: @tet_a_tetMiniAppBot
Буду рад вашим отзывам! 🚀🔥
Встречайте вторую часть серии статей про создание Telegram-бота с MiniApp интерфейсом для реального анонимного чата «Тет А Тет»! 🎉
Статья получила название: «Создание анонимного чата в Telegram: Бот с MiniApp интерфейсом. Часть 2 — VueJS3 + Centrifugo с монетизацией» и уже доступна на Хабре к прочтению.
📌 В этой части мы разберём:
✅ Разработку стильного, анимированного UI на VueJS 3 с real-time чатом.
✅ Мгновенный обмен сообщениями через Centrifugo без лишней нагрузки на сервер.
✅ Монетизацию Telegram MiniApp с помощью умной рекламы от RichAds.
✅ Финальные шаги перед продакшеном и деплой проекта.
🛠 Что мы реализуем?
🔹 Экран загрузки приложения
🔹 Поиск и подбор собеседников
🔹 Экран ожидания
🔹 Сам real-time чат
📌 Основные технологии:
🚀 VueJS 3 — современный JavaScript-фреймворк
📡 Centrifugo — real-time коммуникации
📲 VUE-TG — удобная работа с Telegram MiniApp API
🛤 Vue-Router — маршрутизация
💡 Если вы хотите создать быстрый, удобный и прибыльный анонимный чат в Telegram, эта статья для вас!
🔗 Читать на Хабре:
📌 Часть 1 (Бэкенд): Статья | GitHub
📌 Часть 2 (Фронтенд + Монетизация): Статья | GitHub
🤖 Попробовать бота в Telegram: @tet_a_tetMiniAppBot
Буду рад вашим отзывам! 🚀🔥
🔥 Упрощаем импорт переменных в VueJS 3 🔥
Друзья, делюсь полезным лайфхаком для тех, кто пишет на Vue 3! Если у вас есть повторяющиеся переменные, например, ссылка на бэкенд, и вы устали копировать её в каждом компоненте — пора навести порядок.
🔹 Как правильно хранить переменные?
1️⃣ В папке
2️⃣ Внутри создаём файл
3️⃣ Добавляем туда нужную переменную:
4️⃣ Теперь, в любом компоненте, где нужно использовать эту переменную, просто импортируем:
📌 Плюсы такого подхода:
✅ Легко менять URL в одном месте, а не по всему проекту.
✅ Улучшает читаемость кода.
✅ Упрощает рефакторинг и поддержку проекта.
⚡️ Дополнительный совет:
Можно хранить не только
Друзья, делюсь полезным лайфхаком для тех, кто пишет на Vue 3! Если у вас есть повторяющиеся переменные, например, ссылка на бэкенд, и вы устали копировать её в каждом компоненте — пора навести порядок.
🔹 Как правильно хранить переменные?
1️⃣ В папке
/src создаём директорию config. 2️⃣ Внутри создаём файл
api.ts. 3️⃣ Добавляем туда нужную переменную:
export const API_BASE_URL = 'https://your-site.com';
4️⃣ Теперь, в любом компоненте, где нужно использовать эту переменную, просто импортируем:
import { API_BASE_URL } from '../config/api';
const response = await fetch(`${API_BASE_URL}/user_info/${userId}`);📌 Плюсы такого подхода:
✅ Легко менять URL в одном месте, а не по всему проекту.
✅ Улучшает читаемость кода.
✅ Упрощает рефакторинг и поддержку проекта.
⚡️ Дополнительный совет:
Можно хранить не только
API_BASE_URL, но и другие глобальные настройки, токены и ключи в этом же файле, но помните, что в JavaScript все на веду. Поэтому, критически важные переменные сохраняйте на стороне бэкенда.