Как стать автором
Обновить
12.49

VueJS *

Прогрессивный JavaScript-фреймворк

Сначала показывать
Порог рейтинга
Уровень сложности

Простой путь к публикации Vue3 модуля на NPM с помощью Vite

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров966

Для веб-разработчика (особенно начинающего) создание собственных модулей и публикация их в open source может казаться сложным процессом. В этой статье я покажу один из самых простых и быстрых способов публикации своего модуля на NPM при помощи бандлера Vite.

Этот метод не только облегчит процесс публикации вашего модуля, но также упростит рабочий процесс в целом. Когда-то это решение мне порекомендовал мой наставник, и с тех пор я регулярно использую его в проектах. Передаю знание дальше – надеюсь, мой пост поможет начинающим разработчикам освоить процесс без лишних сложностей.

Читать далее
Всего голосов 8: ↑8 и ↓0+10
Комментарии2

Новости

Как стать Frontend разработчиком: подробное руководство по началу карьеры

Уровень сложностиПростой
Время на прочтение14 мин
Количество просмотров6.3K

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

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

Приготовьтесь к увлекательному путешествию, полному интеллектуальных открытий, мелких (и не очень) фрустраций и, конечно же, триумфальных моментов, когда ваш код наконец заработает с первого раза. Шутка, такого не бывает. Так что возьмите побольше кофе и запаситесь терпением – этот путь будет и захватывающим, и немного утомительным, но поверьте, он того стоит.

Читать далее
Всего голосов 13: ↑7 и ↓6+3
Комментарии17

Пакетируем легко и просто с помощью Lerna

Уровень сложностиСложный
Время на прочтение7 мин
Количество просмотров3.1K

Всем привет! Меня зовут Иван Кузнецов, я Head of Frontend в Uzum Market. Расскажу о сложностях, с которыми мы столкнулись на пути к реализации микрофронтендовой архитектуры, и поделюсь результатами, которые мы получили в процессе пакетирования наших решений с помощью Lerna. Надеюсь, тебе, дорогой читатель, будет очень интересно :)

Читать далее
Всего голосов 19: ↑19 и ↓0+21
Комментарии5

Орбита: self-hosted блог с подписками

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.5K

Привет, Хабр!

Хочу поделиться своим личным проектом (pet-project) для публикации контента с возможностью монетизации. Да-да, что-то вроде личного Boosty, Patreon или даже OnlyFans.

Главное отличие от всех подобных сервисов - он работает у вас на сервере, он Open Source и вы можете менять его по своему желанию.

Читать далее
Всего голосов 31: ↑30 и ↓1+52
Комментарии13

Не будьте героем

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров8.1K

Привет, Хабр! Я Женя Кучерявый, директор по фронтенду в Rentu. В этой статье расскажу как мы переезжали с Vue2 на Vue3, какие шишки набили и чему научились. Статья не хардовая.

Читать далее
Всего голосов 28: ↑27 и ↓1+32
Комментарии38

Контекст в Vue/Nuxt: осознать, не терять и беречь

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров3.7K

В процессе нашей миграции на Nuxt CAPI, а потом и Nuxt 3, я очень много переосмыслял работу с контекстом как в Vue, так и в Nuxt. Как он сохраняется, на что влияет, и как можем повлиять мы.

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

Что? Какой контекст? В setup нет this. Как его можно потерять? На что это влияет? Давайте про это поговорим.

Читать далее
Всего голосов 13: ↑12 и ↓1+13
Комментарии1

Обновлённый ЕМИСС: веб-приложение от непрограммиста

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров934

Меня зовут Александр, я активно исследую экономические данные, строю регрессии, ML-модели. Данные использую разные: перекрёстные, панельные, временные.
По специфике своей работы часто пользуюсь ЕМИСС. ЕМИСС — это кладезь социально-экономических данных, но и одновременно платформа, которая может довести до головных болей и дергающегося глаза, а то и двух сразу.

Поставим себе, например, задачу выяснить, как влияет Х на У. Возьмём в качестве объектов наблюдения — регионы РФ. И тут нас будут ждать сюрпризы. Как быстро, не вырывая волосы из головы, получить две колонки данных за последний год по субъектам? Мы, конечно, можем использовать VLOOKUP/XLOOKUP в экселе и всё такое. Но нам встретятся обязательно двойняшки (тройняшки): «г. Москва» и «Город Москва столица Российской Федерации город федерального значения»; «Кемеровская область - Кузбасс» и «Кемеровская область — Кузбасс». Да, мелочи, но неприятно бороться с этими исключениями вручную.

Читать далее
Всего голосов 7: ↑6 и ↓1+8
Комментарии4

Реализация многооконного приложения на Vue 3

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров5K

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

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

Меня зовут Дмитрий Дербин – frontend-разработчик компании «Криптонит». В данном материале я поделюсь некоторой теоретической базой по теме и краткими наработками для реализации на Vue 3 на примере простого сайта с погодой.

Читать далее
Всего голосов 8: ↑8 и ↓0+9
Комментарии2

Cобытия жизненного цикла компонента

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.4K

Друзья, привет!

Практическое понимание событий жизненного цикла компонентов даёт возможность быстро анализировать и разрабатывать бизнес-задачи. Мы разберём 7 событий жизненного цикла компонентов на примере Composition API в Vue3 фреймворке.

Читать далее
Всего голосов 13: ↑11 и ↓2+15
Комментарии7

Поверхностный анализ работы DOM на библиотеках JavaScript

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.7K

Приветствую Вас, дорогие читатели Хабр! В данной статье мы рассмотрим работы DOM на таких библиотеках JavaScript, как Vue, React, Angular. Материал поможет понять принцип работы, конечно, самый лучший способ разобраться в той или иной теме — это практика. В этой статье будут приведены несколько примеров для лучшего понимания материала.

Читать далее
Всего голосов 5: ↑3 и ↓2+2
Комментарии4

То, что вы пишете, это точно composables?

Время на прочтение2 мин
Количество просмотров5.8K

В этой статье c помощью простого чек листа за пару шагов выясним, являются ли функции, которые вы пишете в своем vue коде, настоящими composables

Читать далее
Всего голосов 11: ↑10 и ↓1+15
Комментарии2

SFC Vue3 Компоненты в Bitrix, с использованием Composition API, без сборщиков, без CDN и NPM пакетов

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров2.1K

В данной статье будет показана нестандартная реализация компонентов Vue + Bitrix, которую вряд ли кто то видел и использовал.

Без NPM, без сборщиков и без костылей. Все "нативными" средствами

Читать далее
Всего голосов 11: ↑11 и ↓0+11
Комментарии6

ref vs shallowRef

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров4.1K

Рассмотрим отличие ref от shallowRef, и попробуем ответить на вопрос - когда же нужно использовать первое, а когда второе? За разъяснением обратимся к исходному коду vue3

Читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии2

Ближайшие события

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

Наш путь в создании информационной системы проверок контрагентов || Laravel having no problems

Время на прочтение9 мин
Количество просмотров1.5K

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

Мы создали систему, которая позволила оптимизировать работу по проверке контрагентов из открытых источников. Рассказываем, как она устроена.

Читать далее
Всего голосов 3: ↑3 и ↓0+3
Комментарии1

SSR: ключевой элемент сайта, который требует особого внимания

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров4.9K

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

Что такое SSR?

SSR — это Server Side Rendering, то есть, генерация страницы на стороне сервере, а не в браузере, когда сервер отдает уже сгенерированный HTML.

Любая страница сайта или простейшая веб‑версия приложения — это HTML‑код, который отображается в браузере в виде набора визуальных элементов — текстовых блоков, изображений, ссылок и кнопок. Рендеринг — сборка html кода для браузера пользователя, из блоков кода исходного vue‑файла. Это происходит тогда, когда мы заходим на сайт — то есть, отправляем запрос на сервер, а с него получаем js‑код vue приложения, html c пустыми местами, в которые будет рендериться контент уже на стороне пользователя. И, конечно, мы хотели бы, чтобы это происходило моментально.

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

Для этого и существует SSR. При этом методе весь HTML‑код страницы генерируется на сервере и передается пользователю в браузер.

Читать далее
Всего голосов 8: ↑3 и ↓50
Комментарии42

Авторизация и управление доступом на основе ролей для фронтенда

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров5.3K

В этом модуле проекта мы погрузимся в волнующий мир авторизации и управления доступом во фронтенд-разработке. Сегодня я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript. Однако, стоит отметить, что основные принципы, которые мы рассмотрим здесь, применимы к любым современным технологиям фронтенда. Таким образом, даже если вы предпочитаете другой стек технологий, вы все равно найдете этот материал полезным.

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

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

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии3

Микрофронтенд с использованием Module Federation. Соединяем компоненты между системами на разных фреймворках

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров4.2K

Всем привет! Мы — Иван и Даниил, ведущие разработчики компании ITFB Group. У компании два собственных продукта — ЕСМ/CSP/BPM-платформа СИМФОНИЯ (документооборот, хранение контента, архив, портал) и система распознавания/обработки документов ITFB EasyDoc. Пару месяцев назад к нам прилетела задача интегрировать ряд функций распознавания из продукта ITFB EasyDoc и оформить их в отдельный модуль платформы СИМФОНИЯ, дабы пользователь всё делал в одном месте и не дрейфовал по разным системам. Однако возникла загвоздка: СИМФОНИЯ — на React, а ITFB EasyDoc — на Vue. Для решения вопроса посерчили различные источники информации и плавно ушли в собственное творчество, поскольку не обнаружили стоящих вариантов с вменяемой технической детализацией. В какой-то момент возникло острое желание поделиться нашими итоговыми наработками на Хабре и заполнить пробелы базы знаний в интернете по этому вопросу. Всем, кому интересно увидеть наше решение, добро пожаловать под кат :-)

Читать далее
Всего голосов 8: ↑7 и ↓1+7
Комментарии2

Гудбай Pusher, привет Laravel Websockets

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров4.7K

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

Проект делается на Laravel 10 на стартере Breeze Inertia + Vue.js.

Историю как я придумывал саму логику уведомлений я оставлю как-нибудь на потом, а вот о том как я распрощался с Pusher я расскажу сейчас. Вообще Pusher, конечно, сервис хороший, но если брать бесплатные лимиты, то там всё достаточно грустно, поэтому я решил использовать что‑то другое в качестве альтернативы. Выбор пал на Laravel Websockets.

Для справки, Laravel Websockets — это такая надстройка над Laravel, которая на бэке использует Ratchet, но никаких особых настроек делать не нужно, всё работает практически «из коробки». Правда есть несколько подводных камней, о которых я тоже расскажу.

Читать далее
Всего голосов 9: ↑9 и ↓0+9
Комментарии6

Создание Web components на Vue 3

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров4.8K

Можно написать на Vue 3 какой-нибудь полезный компонент и захотеть дать возможность использовать его не только в Vue проектах, но и на любых других фронтендах. Сделать это несложно через регистрацию его как web component, или подключение "микро-фронтендом". Оба варианта будут рассмотрены ниже.

Читать далее
Всего голосов 1: ↑1 и ↓0+1
Комментарии0

Release Timeline — визуализация GitHub релизов в вашей документации

Время на прочтение1 мин
Количество просмотров1.6K

Данное приложение было создано для красивого и удобного показа изменений во Vue 3 проекте в его документации на VitePress. После оно было сделано универсальным, и может быть подключено в любой HTML странице как Web component или микрофронтенд.

Попробовать - https://vuesence.github.io/release-timeline/. Слева вверху можно указать любой публичный репозиторий.

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии6
1
23 ...