Часть I касалась настройки нашей среды, Часть II была посвящена созданию пользовательского интерфейса, а Часть III - создание и настройка серверной службы с использованием 4 технологий Google
Поскольку эта часть является последней, в четвертой части будет обсуждаться, как разместить наше веб-приложение Vue на Firebase.
Зарегистрируйтесь в Firebase и перейдите в Firebase Console, чтобы создать проект.
Отключите Google Analytics, поскольку он бесполезен для нас в этом проекте, а затем создайте проект.
Подождите пару минут, прежде чем вы сможете перейти к панели управления.
Как видите, в моем терминале я уже вошел в систему. Если вы еще не вошли в систему, в вашем браузере откроется новая вкладка, в которой вас попросят войти в учетную запись. ИСПОЛЬЗУЙТЕ тот, с которым вы создали проект Firebase, чтобы не создавать путаницы.
~ Прежде чем продолжить, убедитесь, что вы находитесь в правильном каталоге вашего проекта Vue.
Теперь нам нужно инициализировать наш проект с помощью интерфейса командной строки Firebase Tools, поэтому используйте: firebase init
Вы увидите экран с подробностями, указанными выше на картинке.
Он спросит вас, хотите ли вы продолжить, нажмите y
Используйте стрелки, чтобы перейти к параметрам до Hosting, а чтобы воспользоваться услугой хостинга, нажмите «пробел» и нажмите «Enter» на клавиатуре.
Опять же, используйте клавиши со стрелками и перейдите к Use an exisitng project, поскольку Firebase на самом деле является серверной облачной службой.
После нажатия «Enter» вы увидите следующее:
Выберите название вашего проекта.
Вместо папки public мы будем использовать dist, который будет создан автоматически. Причина в том, что Vue использует папку public для чего-то еще, и когда он создает SPA (одностраничное приложение), что верно в нашем случае, он встраивает его в папку dist.
После этого мы скажем y, чтобы наш SPA перезаписал все URL-адреса в index.html.
Мы внесем небольшие изменения и подготовим наше веб-приложение Vue к работе.
Но сначала давайте посмотрим, что изменилось в нашей структуре Vue.
На левой боковой панели редактора вы не можете не заметить:
- Вновь созданная папка
dist - Вы также увидите два файла
firebase, которые показывают, что в нашем веб-приложении есть Firebase. - Вы также можете увидеть
.gitignore, который принадлежит репозиторию Github. Я объясню, как разместить ваш проект на Github, в статье «Бонус» 😊.
Изменения, которые мы вносим, незначительны, но одно из них - самое важное.
Давайте изменим значок и заголовок, поэтому перейдите к index.html в папке public.
Для значка используйте то, что вам нравится, я использовал this, а затем преобразовал его в расширение .ico с помощью this
После загрузки значка перейдите в свою папку и найдите папку public, в которой вы найдете favicon.ico и index.html
Переименуйте недавно загруженный значок на favicon.ico и удалите старый, вставив новый.
После этих изменений пора разместить его на Firebase. Итак, давайте подготовим проект к производству.
~ Просто заметьте, что вы можете использовать такие шаги для любого проекта Vue, который вы делаете.
Использование npm run build сделает наш проект готовым к производству.
На сборку проекта Vue уйдет пара минут.
Если вы посетили папку dist, вы увидите, что она содержит некоторые новые изменения
Теперь, наконец, мы можем развернуть наш проект в Firebase.
Для этого используйте: firebase deploy
Но после использования firebase deploy
И ТАТА !!!!
Теперь в консоли Firebase на вкладке «Хостинг» вы можете увидеть, что выпуск изменился.
~ Каждый раз, когда вы вносите изменения в свое веб-приложение, вы можете использовать firebase deploy, а затем проверить свою консоль, которая обновит ваш выпуск до текущего и сохранит старую на случай, если вы захотите вернуться к ней.
И это все четыре серии по созданию простой формы Vue WebApp с использованием 7 мощных технологий:
- Vue
- Vuetify
- Хостинг Firebase
- Форма Google
- Гугл драйв
- Таблица Google
- Gmail
С помощью Chrome DevTools, и бонусом будет то, как использовать Github и продвигать этот созданный проект, чтобы сделать его проектом с открытым исходным кодом.
Вы можете найти весь код до 4 частей на моем Github Repo
Если вам понравилось то, что вы читаете, пожалуйста, хлопайте в ладоши, в ладоши, в ладоши и в ладоши и обязательно прочитайте то, что Я написал здесь на Medium
Если вы его пропустили, попробуйте прочитать предыдущие три части:
Для меня тоже:
~ Перво-наперво: http://tiny.cc/artic1
~ Amazon Fires: искусственный интеллект в помощь: http://tiny.cc/artic2
~ Что, черт возьми, Vue JS: http://tiny.cc/artic3
~ Тенденции в области искусственного интеллекта в 2019 году: http://tiny.cc/artic4
~ Если вы думаете, что умеете кодировать, подумайте еще раз : Http://tiny.cc/artic5
~ Почему конференция африканских разработчиков была пустой тратой времени: http://tiny.cc/artic6
~ Подумайте, прежде чем щелкнуть: http://tiny.cc/artic7
