Пример использования Rx-Vue при ассинхронной работе с API на примере Github API

🇷🇺 by Mikhail Shpakov

Пример простого SPA и PWA приложения, которое демонстрирует использование RxJS во Vue для работы с API на примере Github.

🎉 Демо

🔨 Используемые технологии и инструменты

🔧 Локальный запуск проекта

🚀 Деплой на Github Pages

Используемые технологии и инструменты

• Vue
• RxJS + Rx-Vue
• Vuetify
• Pug
• Vue-cli (Webpack, Babel, Postcss)
• Eslint (standard style)
• Графика Undraw
• Github Pages
• Travis CI

Локальный запуск проекта

1. Загрузка проекта на локальную машину

   git clone https://github.com/mikhail-shpakov/fetch-github-profiles-with-vue-rx.git
   

2. Установка зависимостей

   npm ci
   

   Использование npm ci вместо npm i позволит гарантировать корректные версии устанавливаемых npm пакетов, так как они будут взяты из package-lock.json.

3. Запуск сервера для разработки

   В качестве сервера для разработки используется Webpack Dev Server.

   Для его запуска выполните из корневой директории проекта:

   npm run serve
   

   После этого приложение будет доступно по адресу localhost:8080.

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

   Также доступны следующие команды:

   npm run build // сборка приложения Vue для развёртывания на production
   npm run lint // ручной запуск линтера
   

Деплой на Github Pages

Для публикации приложения на Github Pages с помощью Travis CI, требуется:

1. Зарегистрировать аккаунт на Travis CI.
2. Получить персональный токен доступ на Github (инструкция).
3. Создать в корне проекта файл с описанием опций публикации с названием .travis.yml. Описание опций можно найти здесь.

После этого, при каждом коммите в отслеживаемую ветку (указывается в .travis.yml) при условии успешного прохождения CI (эта стадия может отсутствовать, как, например, в этом проекте) проект будет автоматически опубликован на Github Pages и по умолчанию будет доступен по адресу http(s)://<user>.github.io/<repository>.