后端开发教程 - Java、Spring Boot 实战 - msg200.com
如何在几分钟内用 Vue 构建一个桌面应用程序
🛠️ 安装
💻请求 API
🌟 就是这样！
桌面气象
说到桌面应用，Electron 是一个强大的工具。你可以一次性构建跨平台应用程序。
因为我喜欢 vue，所以我尝试用“electron-vue”创建了一个应用程序，它就是这么简单！
让我们使用 OpenWeatherMap API 制作一个天气应用程序
🛠️ 安装
我使用的是 Ubuntu 18.04 和 Webstorm IDE。我也喜欢 Vuetify 组件，所以我安装了 Vuetify/Electron 仓库。
看起来 GitHub repo 不再存在了。
要安装项目，请运行
vue init vuetifyjs/electron my-project
cd my-project
npm install
npm run dev
现在您可以出发了！
然后为了显示天气，我需要：
-最高温度
-最低温度
-湿度
那么，让我们把这个页面改成我们需要的样子吧！我使用了两个 Card 组件，一个用来搜索城市，另一个用来显示天气。
<v-card>
<v-card-text>
<p>Welcome to my météo app.</p>
<p>Search for a city to display the weather</p>
<v-text-field label="City" box v-model="city"></v-text-field>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn primary flat router @click="getWeather">Search</v-btn>
</v-card-actions>
</v-card>
<v-card v-if="show">
<v-card-text>
<v-layout row>
<v-layout xs6>
<v-card-text>
<v-spacer></v-spacer>
<h1>{{temp.toFixed(2)}}°C</h1>
<h1>{{weatherDescription}}</h1>
</v-card-text>
</v-layout>
<v-layout xs6>
<v-card-text>
<p><v-icon>fas fa-snowflake</v-icon>Min : {{ tempMin.toFixed(2) }}°C</p>
<p><v-icon>fas fa-sun</v-icon>Max : {{ tempMax.toFixed(2) }}°C</p>
<p><v-icon>fas fa-tint</v-icon>Humidity : {{ humidity }} %</p>
</v-card-text>
</v-layout>
</v-layout>
</v-card-text>
</v-card>
💻请求 API
我现在需要编写 getWeather 函数
我使用 axios 发出 API 请求，然后将我想要的数据存储到我的应用程序中
API 端点是“/data/2.5/weather”
import SystemInformation from './WelcomeView/SystemInformation'
import axios from 'axios'
axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5'
export default {
name: 'welcome',
components: { SystemInformation },
data () {
return {
city: '',
country: '',
weatherDescription: '',
temp: null,
tempMin: null,
tempMax: null,
humidity: null,
show: false,
key: '863668499362fb4884ebd97229f3b26b',
url: 'http://api.openweathermap.org/data/2.5/weather'
}
},
methods: {
open (link) {
this.$electron.shell.openExternal(link)
},
getWeather () {
axios.get(this.url, {
params: {
q: this.city,
appid: this.key
}
}).then(response => {
this.temp = response.data.main.temp - 274
this.tempMax = response.data.main.temp_max - 274
this.tempMin = response.data.main.temp_min - 274
this.humidity = response.data.main.humidity
this.weatherDescription = response.data.weather[0].description
this.show = true
}).catch(errors => {
console.log(errors)
})
}
}
}
🌟 就是这样！
简单如经典的Vue js应用程序，我只是做了一个简单的跨平台应用程序。
这是我的第一个 Electron 应用，也是我的第一篇博客文章
我真的很喜欢它，因为我能够在 Windows、MacOs 和 Ubuntu 上使用同一个应用程序（我在 Ubuntu 上工作）
请随时告诉我我做错的事情或者我可以做得更好的事情，并分享一些很酷的东西！
文章来源：https://dev.to/thomas_ph35/how-i-built-a-desktop-app-with-vue-in-minutes-1005