Пишем метео-приложение на Vue 3 с нуля! Часть 1. Фронтенд-разработка для начинающих
В этой статье мы рассмотрим, как создать метео-приложение с использованием фреймворка Vue 3. Эта статья предназначена для начинающих разработчиков, которые только начинают свой путь во фронтенд-разработке.
Шаг 1: Установка Vue.js
Первым делом нам понадобится установить Vue.js на наш проект. Для этого мы будем использовать npm, пакетный менеджер для JavaScript. Откройте терминал и выполните следующую команду:
npm install vue@next
Шаг 2: Создание базовой структуры проекта
Теперь, когда у нас установлен Vue.js, мы можем приступить к созданию базовой структуры нашего проекта. Создайте новую папку, где будет храниться весь код проекта, и откройте эту папку в вашем любимом текстовом редакторе.
Шаг 3: Инициализация Vue приложения
Для инициализации нашего Vue приложения нам понадобится создать новый файл с расширением .html и добавить следующий код:
Метео-приложение на Vue 3
{{ message }}
Шаг 4: Запуск приложения
Теперь наше первое Vue приложение готово к запуску. Для этого откройте созданный ранее файл с расширением .html в вашем браузере. Вы должны увидеть текст “Привет, мир!” на странице.
Заключение
В этой первой части мы рассмотрели основные шаги по созданию метео-приложения на Vue 3 с нуля. Мы установили Vue.js, создали базовую структуру проекта, инициализировали Vue приложение и запустили его.
В следующей части мы продолжим работу над нашим метео-приложением, добавив функциональность для отображения погоды.
Хотелось бы урок по vue 3 такого плана: авторизация пользователей, разные шаблоны в зависимости от роли пользователя, различные CRUD операции над пользователями и какими то сущностями, ответ приходит с бекэнда – fastapi
какая красивая улыбка. Вы Гамлет по соционике похоже
Это моё первое знакомство со vue, довольно непривычно, но в целом понятно. Спасибо за видео, интересный проект! Было бы круто увидеть ещё уроков по vue для самых маленьких))
Здравствуйте. Подскажите пожалуйста, у вас есть макет этого приложения в фигме? Я бы хотел сверстать самостоятельно это приложение
Анастасия, спасибо! Все очень доходчиво. Продолжайте)
Офигенно! Очень понятные обьянения. Спасибо!!!
(.env.development -> .gitignore)/.env.production для хранения ключей/паролей
В документации к api есть &q=auto:ip. зачем использовать город с наименованием? и сделать ее async created, а методом получить fetch по кнопке или e.key === "Enter". И почему не через .then(async (response) => {const data = await response.json();
Зачем каждый раз делать импорт стилей, когда можно один раз в main.js Это сделать ?
Спасибо, подписалась) Однако у меня вопрос – вот изначально установила проект не через latest, а через
1) npm i -g @vue/cli
2) vue create название проекта и выбрала ручную установку vue 3
Не знаю, повлияла ли такая установка на то, что без обращения к стандартному data(){return…} и methods у меня не получилось обратиться к серверу. onMounted тоже не использовала, т.к. выходило много ошибок. Обязательно ли было использовать ref, чтобы отправить запрос на сервер? Или можно обойтись без него.
Спасибо за труды))) около 1года работаю на нативном JS, вот пришла пора познакомиться с Vue и буду это делать на твоём канале))
Почему, если первый компонент уже подключён, то вы продолжаете работу в родительском компоненте?
а в index.html как появился div id=app?
Спасибо, интересно)
❤
Привет. Спасибо за урок. Не совсем понимаю зачем два раза импортировать "assets/styles/main". В App.vue понятно, а зачем в main.js? Буду признателен если кто объяснит
Спасибо за материал, очень интересно и познавательно!
Было бы классно увидеть материал по вебсокетам на примере приложения реалтайм
Потому что на просторах ютуба крайне мало полезной информации по этой теме
Заранее спасибо!
а что за сериал Мгла? упустил )
Спасибо за видео! Всегда интересно посмотреть, как работает профессионал!