Если у вас есть проект, который не несет большой нагрузки, и вы не хотите платить комиссию за системы, не использующие бесплатный хостинг (в случае, если вы только начали разработку с Vue.js), и у вас нет домена что вы купили, чего еще вы ждете, этот метод для вас.
При желании вы можете добавить собственное доменное имя позже.
У меня есть небольшой проект, которым я планирую заняться в ближайшее время. Я не собираюсь платить за этот проект определенный гонорар. Отсюда я пошел в расследование. Есть много сайтов, которые предоставляют бесплатные хосты. Но, как известно, все они содержат свои бренды. Я решил обратиться к Firebase вместо них.
Firebase позволяет разработчикам до определенного момента. Это бесплатно, и я считаю, что это очень полезно с точки зрения реального времени. Одним из важнейших факторов при выборе Firebase было то, что я не построил слишком сложную структуру базы данных. Поскольку это личный сайт, передачи-приема данных будет не много. Работает быстро. Домен снова в своей структуре. Мы можем добавить наш собственный домен, если захотим.
Если у вас небольшой проект и вы хотите улучшить себя, я рекомендую использовать Firebase.
Технологии, которые я буду использовать в проекте
- Vue.js 3
- Firebase
IDE, которую я использовал в проекте
Я создал репозиторий исходных кодов проекта на GitHub. Я поделюсь с вами вашей ссылкой как с источником.
Я бы сказал, что Vue.js 3 - самый красивый фреймворк, который я использовал за последнее время.
Мы создаем проект на Vue.js.
vue create app-name
Устанавливаем проект вручную, а не по умолчанию. В этой части мы выберем Vue 3.
Затем давайте изменим настройки Firebase. Мы создаем новый проект в Firebase Console.
В этой части мы создаем наш веб-проект. Мы можем добавить его в этот раздел, потому что мы будем использовать хостинг. Его можно будет добавить позже.
На следующем этапе
npm install firebase
npm install -g firebase-tools
Если он выдает ошибку, не принимающую последнюю строку, вы можете попробовать с sudo. (Для пользователей Mac)
После создания проекта заходим в настройки проекта. Те, кто использует Firebase на мобильных устройствах, знают, что мы загрузили файл JSON. Я воспользуюсь Config для Интернета. Выбираем Config в настройках SDK.
После этой части мы подключим наше приложение к Firebase. Давайте откроем VS Code.
давайте создадим папку firebase в папке src и создадим файл Config.js. Вставим скопированный объект конфигурации firebaseConfig.
const firebaseConfig = {
apiKey: “AIzaSyC8kyNQ_nnpfEmSk5Ua9MUQzkItQPjP1FE”,
authDomain: “fir-vue-3-app.firebaseapp.com”,
projectId: “fir-vue-3-app”,
storageBucket: “fir-vue-3-app.appspot.com”,
messagingSenderId: “1062406189911”,
appId: “1:1062406189911:web:7f9841efd9e0a656ebc412”,
measurementId: “G-1GXFME5VEK”
};
В этой статье я покажу только часть интеграции и развертывания Firebase, оставив проект по умолчанию.
Пришло время получить сборку для нашего приложения Vue. После получения b uild будет сформирована папка dist. Мы будем использовать эту папку для развертывания.
npm run build
Давайте перейдем из консоли Firebase на вкладку «Хостинг» и начнем.
В качестве первого шага необходимо установить, мы это уже сделали.
Затем он хочет, чтобы мы вошли в Firebase. Давайте войдем с нашим именем пользователя и паролем.
firebase login
firebase init
Во-первых, он спрашивает, что мы хотим использовать. Пока мы будем использовать только хостинг.
Назовем вопросы, следующие за буквой «н».
Мы уже обновили наш индексный файл при покупке билда. Если мы переопределим инициализацию Firebase, индекс, который мы создали для пользовательского интерфейса, изменится, и когда мы развернем проект;
Мы встретимся с таким экраном. Во-первых, давайте будем осторожны, чтобы этого не сделать.
С помощью этих шагов мы загрузили наши файлы в Firebase. Пришло время развернуться.
firebase deploy
Мы выполняем этот процесс очень просто.
Я делюсь с вами развернутой версией этого проекта еще на один шаг вперед. Вы можете изучить это оттуда.
Больше контента на plainenglish.io
