Что это такое?
Клон Douyin (TikTok) на Vue3 + Pinia, созданный для демонстрации лучших практик использования Vue на мобильных устройствах с плавной лентой коротких видео, как в нативном приложении.
Клон Douyin (TikTok) на Vue3 + Pinia, созданный для демонстрации лучших практик использования Vue на мобильных устройствах с плавной лентой коротких видео, как в нативном приложении.Это настоящее приложение, которое обращается к серверам Douyin, или просто демо фронтенда?Это чисто фронтенд-демо: все данные хранятся локально в JSON, а axios-mock-adapter перехватывает запросы к API и имитирует ответ настоящего бэкенда.
Это чисто фронтенд-демо: все данные хранятся локально в JSON, а axios-mock-adapter перехватывает запросы к API и имитирует ответ настоящего бэкенда.Как запустить это локально?Клонируйте репозиторий с помощью git (не ZIP-архив), затем запустите сервер разработки Vite; также его можно развернуть на Vercel или собрать и запустить через прилагаемый Docker-образ.
Клонируйте репозиторий с помощью git (не ZIP-архив), затем запустите сервер разработки Vite; также его можно развернуть на Vercel или собрать и запустить через прилагаемый Docker-образ.Нужен ли мне ключ API Douyin или какие-либо учётные данные бэкенда?Нет — реальной интеграции с API Douyin нет; все данные о видео и пользователях заранее подготовлены в локальных JSON-моках и отдаются через axios-mock-adapter.
Нет — реальной интеграции с API Douyin нет; все данные о видео и пользователях заранее подготовлены в локальных JSON-моках и отдаются через axios-mock-adapter.Есть ли подводные камни при просмотре в браузере?Чтобы всё отображалось правильно, браузер нужно переключить в режим эмуляции мобильного устройства (F12, затем Ctrl+Shift+M): проект сделан как раскладка только для мобильных устройств. Кроме того, он явно предназначен для обучения и исследований, а не для коммерческого использования.
Чтобы всё отображалось правильно, браузер нужно переключить в режим эмуляции мобильного устройства (F12, затем Ctrl+Shift+M): проект сделан как раскладка только для мобильных устройств. Кроме того, он явно предназначен для обучения и исследований, а не для коммерческого использования.Работает ли это только на мобильных устройствах?Работает в любом браузере, но задумано как мобильная веб-раскладка, поэтому смотреть её можно либо на реальном телефоне, либо на компьютере с включённой эмуляцией мобильного устройства.
Работает в любом браузере, но задумано как мобильная веб-раскладка, поэтому смотреть её можно либо на реальном телефоне, либо на компьютере с включённой эмуляцией мобильного устройства.Почему лента прокрутки работает так плавно по сравнению с обычным веб-списком видео?В проекте реализована бесконечная лента видео с вертикальным свайпом и собственный компонент карусели в стиле Swiper, написанный с нуля и настроенный специально под производительность сенсорного ввода на мобильных устройствах, а не на готовых тяжёлых библиотеках.
В проекте реализована бесконечная лента видео с вертикальным свайпом и собственный компонент карусели в стиле Swiper, написанный с нуля и настроенный специально под производительность сенсорного ввода на мобильных устройствах, а не на готовых тяжёлых библиотеках.Есть ли у него анимации переходов между страницами, как в нативном приложении?Да, в проекте добавлены анимации переходов между маршрутами и условное кеширование маршрутов, чтобы навигация между страницами ощущалась как в приложении — похоже на то, как традиционные новостные сайты кешируют списки.
Да, в проекте добавлены анимации переходов между маршрутами и условное кеширование маршрутов, чтобы навигация между страницами ощущалась как в приложении — похоже на то, как традиционные новостные сайты кешируют списки.Есть ли опубликованное описание того, как это было сделано?Автор опубликовал сопутствующую серию статей в блоге, посвящённую компоненту карусели, бесконечной прокрутке, переходам между маршрутами, кешированию маршрутов, адаптивным размерам для мобильных устройств в rem/vh и пайплайну CI/CD для развёртывания.
Автор опубликовал сопутствующую серию статей в блоге, посвящённую компоненту карусели, бесконечной прокрутке, переходам между маршрутами, кешированию маршрутов, адаптивным размерам для мобильных устройств в rem/vh и пайплайну CI/CD для развёртывания.Как проект развёртывается и как поддерживается в актуальном состоянии?Рабочие процессы GitHub Actions автоматически развёртывают проект на GitHub Pages, синхронизируют его с Gitee Pages, переводят README и собирают Docker-образ при изменениях.
Рабочие процессы GitHub Actions автоматически развёртывают проект на GitHub Pages, синхронизируют его с Gitee Pages, переводят README и собирают Docker-образ при изменениях.What are similar projects?TikTokDownloader, soybean-admin, vue2-elm, vue-pure-admin, vue-manage-system, it-tools, downvid, newbee-mall
TikTokDownloader, soybean-admin, vue2-elm, vue-pure-admin, vue-manage-system, it-tools, downvid, newbee-mallWhich topics is it in?pinia, short-video, mock, mobile-web, single-page-app, douyin, tiktok, js, vue3, gpl, github-actions, vite
pinia, short-video, mock, mobile-web, single-page-app, douyin, tiktok, js, vue3, gpl, github-actions, vite