Сегодня Vue.js входит в число самых популярных фреймворков с момента его запуска в 2014 году. Это самый новый и самый молодой член среди двух других самых популярных фреймворков Angular и React. Некоторые из популярных веб-сайтов, созданных с использованием Vue.js: Gitlab, Behance, Nientendo, Laravel, Font Awesome и т. Д.
Первый шаг:
Прежде чем мы создадим наше приложение, убедитесь, что на вашем компьютере установлены node, Vue.js и Vue CLI.
Создание нашего приложения:
После того, как вы установили вышеуказанные требования, мы можем создать наше погодное приложение, введя следующую команду на нашем терминале.
vue create weather-app
После этого он предоставит вам возможность выбрать другую версию Vue.js с предустановкой по умолчанию, или вы также можете вручную выбрать несколько функций. Здесь мы выберем Vue 2 с пресетом по умолчанию с помощью babel и eslint.
После установки пакетов мы можем перейти к месту расположения нашего файла, введя следующую команду.
cd weather-app
Запускаем наш сервер разработки:
Мы просто запустим наш сервер разработки с помощью следующей команды в терминале. По умолчанию наш сервер работает на http: // localhost: 8080 /. Но если у вас уже есть сервер, работающий на 8080, он будет работать на 8081 и так далее.
npm run serve
Теперь, если мы откроем наш браузер и перейдем на адрес нашего сервера разработки, мы увидим домашнюю страницу Vue по умолчанию, подобную этой.
Файловая структура:
Сейчас наша файловая структура будет выглядеть так, но мы должны внести изменения в компоненты HelloWorld.vue и App.vue.
> node_modules
> public
> src
> assets
logo.png
> components
HelloWorld.vue
App.vue
main.js
.gitignore
babel.config.js
package-lock.json
package.json
README.md
Изменения в компоненте HelloWorld.vue:
Давайте перейдем к нашему компоненту HelloWorld.vue и удалим все, что находится внутри тегов шаблонов, скриптов и стилей. Также измените имя компонента на weather-app.vue.
Наш компонент должен выглядеть так.
<template> </template> <script> </script> <style> <style>
Изменения в компоненте App.vue:
Теперь давайте внесем некоторые изменения в наш основной компонент - App.vue. Теперь внутри тега нашего шаблона удалите теги ‹img› и ‹Helloworld› по умолчанию.
Внутри нашего тега скрипта мы по умолчанию импортировали HelloWorld.vue из папки наших компонентов. Давайте быстро удалим этот компонент и импортируем наш weather-app.vue, поскольку мы уже изменили имя нашего компонента с HelloWorld.vue.
Мы также должны изменить имя компонента на weather-app.vue внутри синтаксиса экспорта по умолчанию. Экспорт по умолчанию - это синтаксис модулей ES, который дает нам возможность экспортировать компоненты из соответствующих модулей и использовать их в других файлах. Затем включите компонент в тег шаблона. Давайте удалим CSS и из нашего тега стиля.
Наш App.vue должен выглядеть так.
<template>
<div id="app">
<weatherApp/>
</div>
</template>
<script>
import weatherApp from './components/weather-app.vue'
export default {
name: 'App',
components: {
weatherApp
}
}
</script>
<style>
</style>
Наш компонент weather-app.vue:
Внутри нашего компонента weather-app.vue давайте сначала напишем html-код внутри нашего тега шаблона.
<template>
<div class="weather-container">
<div class="weather-wrap">
<div class="search-box">
<input type="text" placeholder="Search..." class="search-bar"
v-model="query" v-on:keypress="fetchWeather" />
</div>
<div class="weather-info" v-if="typeof weather.main!=undefined'">
<div class="location-box">
<div class="location">{{weather.name}},{{weather.sys.country }}
</div>
<div class="date">{{ todaysDate() }}</div>
</div>
<div class="weather-box">
<div class="temp">{{ Math.round(weather.main.temp) }}°c</div>
<div class="weather">{{ weather.weather[0].main }}</div>
<div class="icon">
<img:src="`${weather_icon}${weather.weather[0].icon}${'@2x.png'}`"/>
</div>
</div>
</div>
</div>
</div>
</template>
Вот как должен выглядеть наш html-код. А теперь давайте сделаем магию css и сделаем приложение потрясающим. В качестве шрифта мы импортируем Montserrat из google fonts.
<style>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat";
}
.weather-container{
background-image: url("../assets/default.jpg");
background-size: cover;
background-position: center;
transition: 0.4s;
width: 375px;
margin: 0 auto;
border-radius: 25px;
margin-top: 50px;
box-shadow: 0px 0px 30px #00000065;
}
.weather-wrap {
height: 600px;
padding: 25px;
border-radius: 25px;
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.15),
rgba(0, 0, 0, 0.4)
);
}
.search-box .search-bar {
display: block;
width: 100%;
padding: 15px;
color: #313131;
font-size: 20px;
appearance: none;
border: none;
outline: none;
background: none;
background-color: rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
border-radius: 10px;
transition: 0.4s;
}
.search-box .search-bar:focus {
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.25);
background-color: rgba(255, 255, 255, 0.75);
}
.location-box .location {
color: #fff;
font-size: 32px;
font-weight: 500;
font-style: italic;
text-align: center;
margin-top: 30px;
}
.location-box .date {
color: #fff;
font-size: 20px;
font-weight: 300;
text-align: center;
}
.weather-box {
text-align: center;
}
.weather-box .temp {
display: inline-block;
padding: 10px 25px;
color: #fff;
font-size: 102px;
font-weight: 900;
text-shadow: 3px 6px rgba(0, 0, 0, 0.25);
background-color: rgba(255, 255, 255, 0.25);
border-radius: 16px;
margin: 30px 0px;
box-shadow: 3px 6px rgba(0, 0, 0, 0.25);
font-style: italic;
}
.weather-box .weather {
color: #fff;
font-size: 48px;
font-weight: 700;
font-style: italic;
text-shadow: 3px 6px rgba(0, 0, 0, 0.25);
}
</style>
Теперь внутри нашего тега скрипта мы будем использовать axios для извлечения данных из api. Также существует встроенный метод JavaScript под названием Fetch (). Есть некоторые различия между axios и fetch (). Я постараюсь объяснить разницу между двумя из них в своем следующем блоге.
Чтобы использовать axios, нам сначала нужно его установить. Для установки введите следующую команду внутри терминала.
npm i axios
Следующим шагом будет импорт аксиомов и возврат некоторых параметров в наш метод данных внутри синтаксиса экспорта по умолчанию. Для получения ключа api вам необходимо зарегистрироваться в открытом приложении погоды.
import axios from "axios";
export default {
data() {
return {
api_key: "27bcc252742830381afd6856832da01a",
url_base: "https://api.openweathermap.org/data/2.5/",
weather_icon: "http://openweathermap.org/img/wn/",
query: "",
weather: {},
};
},
};
Теперь у нас есть api, нам нужно запустить функцию, когда мы ищем внутри нашего поля ввода. Мы будем использовать директиву v-model внутри нашего поля ввода, которая создает двусторонние привязки данных. Он создает двустороннюю привязку данных между пользовательским вводом и компонентом vue.js, что означает, что всякий раз, когда модель изменяется, он обновляет шаблон. Теперь мы передадим свойство запроса внутри v-модели, которая на данный момент пуста.
<input type="text" placeholder="Search..." class="search-bar" v-model="query" v-on:keypress="fetchWeather" />
После этого мы будем выполнять функцию под названием fetchWeather всякий раз, когда нажимается клавиша внутри формы ввода. Для этого мы будем использовать директиву v-on: для прослушивания событий DOM всякий раз, когда они запускаются. В этом случае всякий раз, когда нажимается клавиша, будет запускаться функция fetchWeather. Но мы не хотим, чтобы это произошло, потому что мы хотим, чтобы функция запускалась только тогда, когда мы нажимаем клавишу ввода. Поэтому мы будем использовать для этого условие if.
async fetchWeather(e) {
if (e.key == "Enter") {
let response = await axios.get(`${this.url_base}weather? q=${this.query}&units=metric&APPID=${this.api_key}`);
this.setResults(response.data);
}
},
setResults(returnedResponse) {
this.weather = returnedResponse;
},
Здесь, когда наша функция запускается, объект события передается как параметр, который представляет событие, которое вызвало запуск функции. Поэтому, когда ключевым событием является «Enter», только оно выполняет функцию.
Затем мы получаем данные из api и помещаем их в переменную ответа. И каждый раз, когда выполняется поиск, нам нужно вызывать другую функцию с именем setResults (), которая будет устанавливать данные, которые мы получаем из API. Мы передадим данные ответа в качестве аргумента.
Для даты мы будем использовать функцию под названием todaysDate (), которая вернет нам месяц, дату, день и год соответственно. Весь наш код выглядит так.
import axios from "axios";
export default {
data() {
return {
api_key: "27bcc252742830381afd6856832da01a",
url_base: "https://api.openweathermap.org/data/2.5/",
weather_icon: "http://openweathermap.org/img/wn/",
query: "",
weather: {},
};
},
methods: {
async fetchWeather(e) {
if (e.key == "Enter") {
let response = await axios.get(
`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`
);
this.setResults(response.data);
}
},
setResults(returnedResponse) {
this.weather = returnedResponse;
},
todaysDate() {
const months = [
"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov",
"Dec",];
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
let d = new Date();
let month = months[d.getMonth()];
let day = days[d.getDay()];
let date = d.getDate();
let year = d.getFullYear();
return `${month} ${date} ${day} ${year}`;
},
},
};
</script>
Заключение:
В этой статье мы впервые узнали, как создать приложение vue и постепенно тщательно построить все приложение. Теперь, когда мы ищем в другом месте в поле ввода, он предоставит нам данные через api и отобразит данные внутри их соответствующего div. Следовательно, скорость, легкость и простота обучения делают vue.js одной из растущих сенсаций в Интернете. сообщество разработчиков.
Если у вас возникнут вопросы, вы можете связаться со мной через LinkedIn.
