Crearea de aplicații desktop cu Electron și Vue

JavaScript era cunoscut ca limbaj pentru construirea de site-uri web și aplicații web, în ​​special cu unele dintre cadrele sale, cum ar fi React, Vue și Angular, dar în timp (încă din 2009), a devenit posibil ca JavaScript să ruleze în afara browserului cu apariția lui Node.js, un mediu de rulare JavaScript open-source, multiplatformă, care execută cod JavaScript în afara unui browser web. Acest lucru a condus la capacitatea de a utiliza JavaScript pentru mult mai mult decât doar aplicații web, iar una dintre acestea este construirea de aplicații desktop folosind Electron.js.

Electron vă permite să creați aplicații desktop cu JavaScript pur, oferind un timp de rulare cu API-uri native (sistem de operare) bogate. Îl puteți vedea ca o variantă a runtime-ului Node.js care se concentrează pe aplicații desktop în loc de servere web.

În acest tutorial, vom învăța cum să construim aplicații desktop folosind Electron, de asemenea, vom învăța cum să folosim Vuejs pentru a crea aplicații Electron.

Notă : Cunoștințele de bază despre Vue.js și Vue CLI sunt necesare pentru a urma acest tutorial. Tot codul folosit în acest tutorial poate fi găsit pe GitHub-ul meu. Simțiți-vă liber să clonați și să jucați cu el!

Ce sunt aplicațiile desktop?

Aplicațiile desktop sunt aplicații care rulează autonom pe computere desktop sau laptop. Sunt aplicații care îndeplinesc sarcini specifice și sunt instalate exclusiv în acest scop.

Un exemplu de aplicație desktop este Microsoft Word, care este folosit pentru crearea și tastarea documentelor. Alte exemple de aplicații desktop comune sunt browserele web, Visual Studio Code și Adobe Photoshop. Aplicațiile desktop sunt diferite de aplicațiile web deoarece trebuie să instalați aplicația desktop pentru a o accesa și a o utiliza, iar uneori nu au nevoie de acces la internet pentru a funcționa. Aplicațiile web, pe de altă parte, pot fi accesate pur și simplu vizitând adresa URL pe care este găzduită o astfel de aplicație și au întotdeauna nevoie de acces la internet înainte de a le putea accesa.

Exemple de cadre utilizate în construirea de aplicații desktop includ:

1. Java
   Java este un limbaj de programare de uz general care este bazat pe clasă, orientat pe obiecte și conceput pentru a avea cât mai puține dependențe de implementare. Este destinat să permită dezvoltatorilor de aplicații să scrie o dată, să ruleze oriunde (WORA), ceea ce înseamnă că codul Java compilat poate rula pe toate platformele care acceptă Java fără a fi nevoie de recompilare.
2. Java FX
   Conform documentației lor oficiale, este o platformă de aplicații client open-source de ultimă generație pentru desktop, mobile și sisteme încorporate construite pe Java.
3. C#
   C# este un limbaj de programare cu scop general, cu mai multe paradigme, care cuprinde discipline de programare de tipare puternică, lexical, imperative, declarative, funcționale, generice, orientate pe obiecte și orientate pe componente.
4. .NET
   .NET este o platformă gratuită, multiplatformă, open-source pentru dezvoltatori, pentru construirea multor tipuri diferite de aplicații. Cu .NET, puteți utiliza mai multe limbi, editori și biblioteci pentru a crea pentru web, mobil, desktop, jocuri și IoT.
   

Ce este electronul?

Electron este un cadru open-source pentru construirea de aplicații desktop. A fost cunoscut anterior ca „Atom shell” și este dezvoltat și întreținut de GitHub. Vă permite să scrieți aplicații desktop multiplatforme folosind HTML, CSS și JavaScript. Aceasta înseamnă că puteți crea aplicații desktop pentru Windows, MacOS și alte platforme folosind o singură bază de cod. Se bazează pe Node.js și Chromium. Exemple de aplicații create cu Electron includ popularul editior Atom, Visual Studio Code, Wordpress pentru desktop și Slack.

Instalare

Puteți instala Electron în proiectul dvs. folosind NPM:

 npm install electron --save-dev

De asemenea, îl puteți instala la nivel global dacă veți lucra mult cu aplicații electron folosind această comandă:

 npm install electron -g

Crearea de aplicații Vuejs pentru desktop cu Electron

Dacă sunteți familiarizat cu crearea de aplicații web folosind Vuejs, este posibil să construiți aplicații desktop folosind Vuejs. Tot ce aveți nevoie pentru aceasta este Vue CLI Plugin Electron Builder.

Pluginul Vue CLI Electron Builder

Acest instrument vă permite să construiți aplicații Vue pentru desktop cu Electron, ceea ce înseamnă că face ca aplicația dvs. Vue să funcționeze ca o aplicație electronică. Aceasta înseamnă că aplicația dumneavoastră Vue, care este posibil să fie o aplicație web, poate fi extinsă pentru a funcționa în medii desktop fără a fi nevoie să construiți o aplicație desktop separată într-un alt cadru. Acest lucru oferă dezvoltatorilor Vue opțiunea și puterea de a merge dincolo de web. În continuare, puteți lucra la ideea pe care o aveți și le puteți oferi utilizatorilor o opțiune de aplicație desktop - una care poate rula pe Windows, macOS și Linux.

Pentru a vedea acest lucru în acțiune, vom construi o aplicație Știri folosind API-ul Știri. Aplicația va oferi titluri de știri de ultimă oră și vă va permite să căutați articole din surse de știri și bloguri de pe tot web cu ajutorul API-ului lor. Tot ce aveți nevoie pentru a începe cu ele este cheia dvs. personală API, care poate fi obținută de aici.

Vom construi o aplicație simplă care oferă următoarele:

1. O pagină care afișează titlurile de top și cele mai recente dintr-o țară selectată, cu opțiunea de a alege o țară folosind punctul final /top-headlines . News API oferă știri dintr-o listă de țări pe care le acceptă, găsiți lista aici.
2. Știri dintr-o categorie selectată folosind o combinație a punctului final /everything și un parametru de interogare q cu care vom specifica categoria noastră.

După ce vă obținem cheia API, putem crea aplicația noastră folosind Vue CLI. Asigurați-vă că aveți Vue CLI instalat pe sistemul dvs., dacă nu aveți, instalați-l folosind această comandă:

 npm install -g @vue/cli # OR yarn global add @vue/cli

După ce ați făcut acest lucru, creați aplicația Știri folosind CLI:

 vue create news-app

Vom prelua datele din API-ul News utilizând Axios pentru acest tutorial, dar puteți folosi orice alternativă cu care vă simțiți mai confortabil. Puteți instala Axios utilizând oricare dintre următoarele comenzi:

 //NPM npm install axios // YARN yarn add axios

Următorul pas ar fi configurarea unei instanțe Axios pentru configurația globală în aplicația noastră. Vom crea un folder de pluginuri în folderul src unde vom crea acest fișier axios.js . După crearea fișierului, adăugați următoarele linii de cod:

 import axios from "axios"; let baseURL = `https://newsapi.org/v2`; let apiKey = process.env.VUE_APP_APIKEY; const instance = axios.create({ baseURL: baseURL, timeout: 30000, headers: { "X-Api-Key": apiKey, }, }); export default instance;

Aici, definim URL- apiKey baseURL care le-am primit de la API-ul News și le transmitem unei noi instanțe Axios. Această instanță acceptă baseURL și apiKey împreună cu o proprietate timeout . News API vă solicită să adăugați cheia dvs. API atunci când faceți o solicitare la API-ul lor și oferă 3 moduri de a o atașa solicitării dvs., dar aici, o adăugăm la proprietatea antet X-Api-Key , după care exportăm instance . Odată ce s-a făcut acest lucru, acum putem folosi această configurație pentru toate solicitările noastre Axios din aplicația noastră.

Când se face acest lucru, puteți adăuga constructorul Plugin Electron cu CLI folosind această comandă:

 vue add electron-builder

Vi se va solicita să selectați versiunea Electron preferată, am selectat versiunea 9.0.0 deoarece este cea mai recentă versiune de Electron (la momentul scrierii).

Când se face acest lucru, acum vă puteți servi aplicația folosind această comandă:

 Using Yarn(strongly recommended) yarn electron:serve OR NPM npm run electron:serve

Va dura ceva timp pentru a compila și a difuza aplicația dvs. Când se termină, aplicația ta se va deschide pe sistemul tău, aceasta ar trebui să arate astfel:

Dacă închideți instrumentele de dezvoltare ale aplicației dvs., ar trebui să arate astfel:

Acest plugin electron este foarte util și ușor de utilizat, deoarece fiecare parte a dezvoltării acestei aplicații funcționează la fel ca o aplicație Vue. Aceasta înseamnă că puteți avea o bază de cod atât pentru aplicația dvs. web, cât și pentru aplicația desktop. Aplicația noastră va avea trei părți:

1. O pagină de destinație care redă știri de top dintr-o țară aleasă la întâmplare.
2. O pagină pentru redarea știrilor de top din țara dorită de utilizator.
3. O pagină care redă știri de top dintr-o categorie selectată de utilizator.

Pentru aceasta, vom avea nevoie de o componentă antet pentru toate linkurile noastre de navigare. Deci, haideți să creăm un fișier în folderul componente și să-l numim header.vue și apoi să adăugăm următoarele linii de cod la acesta:

 <template> <header class="header"> <div class="logo"> <div class="logo__container"> <img src="../assets/logo.png" alt="News app logo" class="logo__image" /> </div> <h1>News App</h1> </div> <nav class="nav"> <h4 class="nav__link"> <router-link to="/home">Home</router-link> </h4> <h4 class="nav__link"> <router-link to="/top-news">Top News</router-link> </h4> <h4 class="nav__link"> <router-link to="/categories">News By Category</router-link> </h4> </nav> </header> </template> <script> export default { name: "app-header", }; </script> <style> .header { display: flex; flex-wrap: wrap; justify-content: space-between; } .logo { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 50px; } .logo__container { width: 50px; height: 50px; } .logo__image { max-width: 100%; max-height: 100%; } .nav { display: flex; flex-wrap: wrap; width: 350px; justify-content: space-between; } </style>

Aici, creăm o componentă antet care are numele și logo-ul aplicației noastre (imaginea poate fi găsită pe GitHub-ul meu) împreună cu o secțiune de navigare care conține link-uri către celelalte părți ale aplicației noastre. Următorul lucru ar fi să importam această pagină pe pagina noastră de aspect - App.vue , astfel încât să putem vedea antetul nostru pe fiecare pagină.

 <template> <div> <app-header /> <router-view /> </div> </template> <script> import appHeader from "@/components/Header.vue"; export default { name: "layout", components: { appHeader, }, }; </script> <style> @import url("https://fonts.googleapis.com/css2?family=Abel&family=Staatliches&display=swap"); html, #app { min-height: 100vh; } #app { font-family: "Abel", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; background-color: #fff; } #app h1 { font-family: "Staatliches", cursive; } a { font-weight: bold; color: #2c3e50; text-decoration: none; } a:hover { text-decoration: underline; } a.router-link-exact-active { color: #42b983; } </style>

Aici, înlocuim conținutul implicit din secțiunea șablon cu componenta antet nou creată după ce l-am importat și declarat în secțiunea de script. În cele din urmă, adăugăm ceva stil pentru întreaga aplicație în secțiunea de stil.

Acum, dacă încercăm să vedem aplicația noastră, ar trebui să arate astfel:

Următorul pas ar fi să adăugați conținut în fișierul nostru Home.vue . Această pagină ar găzdui prima secțiune a aplicației noastre; Știri de top dintr-o țară selectată la întâmplare. Actualizați fișierul Home.vue cu următoarele linii de cod:

 <template> <section class="home"> <h1>Welcome to News App</h1> <h4>Displaying Top News from {{ countryInfo.name }}</h4> <div class="articles__div" v-if="articles"> <news-card v-for="(article, index) in articles" :key="index" :article="article" ></news-card> </div> </section> </template> <script> import { mapActions, mapState } from "vuex"; import NewsCard from "../components/NewsCard"; export default { data() { return { articles: "", countryInfo: "", }; }, components: { NewsCard, }, mounted() { this.fetchTopNews(); }, computed: { ...mapState(["countries"]), }, methods: { ...mapActions(["getTopNews"]), async fetchTopNews() { let countriesLength = this.countries.length; let countryIndex = Math.floor( Math.random() * (countriesLength - 1) + 1 ); this.countryInfo = this.countries[countryIndex]; let { data } = await this.getTopNews( this.countries[countryIndex].value ); this.articles = data.articles; }, }, }; </script> <style> .articles__div { display: flex; flex-wrap: wrap; justify-content: center; } </style>

În secțiunea de script a acestui fișier, importăm mapState și mapActions din Vuex, pe care le vom folosi mai târziu în acest fișier. Importăm și o componentă NewsCard (o vom crea în continuare) care ar afișa toate titlurile de știri de pe această pagină. Apoi folosim metoda fetchTopNews pentru a prelua cele mai recente știri dintr-o țară selectată la întâmplare din gama de countries din magazinul nostru. Această țară este transmisă acțiunii noastre getTopNews , aceasta ar fi atașată la baseURL -ul de bază ca o interogare pentru o țară ca așa baseURL/top-news?country=${randomCountry} . Odată ce s-a făcut acest lucru, parcurgem aceste date și le trecem la suportul article din componenta Newscard din secțiunea șabloane. Avem și un paragraf care indică din ce țară provine știrile de top.

Următorul lucru ar fi să configurați componenta NewsCard care va afișa această știre. Creați un fișier nou în folderul de componente , denumiți-l NewsCard.vue și adăugați următoarele linii de cod la acesta:

 <template> <section class="news"> <div class="news__section"> <h1 class="news__title"> <a class="article__link" :href="article.url" target="_blank"> {{ article.title }} </a> </h1> <h3 class="news__author" v-if="article.author">{{ article.author }}</h3> <!-- <p class="article__paragraph">{{ article.description }}</p> --> <h5 class="article__published">{{ new Date(article.publishedAt) }}</h5> </div> <div class="image__container"> <img class="news__img" src="../assets/logo.png" :data-src="article.urlToImage" :alt="article.title" /> </div> </section> </template> <script> export default { name: "news-card", props: { article: Object, }, mounted() { this.lazyLoadImages(); }, methods: { lazyLoadImages() { const images = document.querySelectorAll(".news__img"); const options = { // If the image gets within 50px in the Y axis, start the download. root: null, // Page as root rootMargin: "0px", threshold: 0.1, }; const fetchImage = (url) => { return new Promise((resolve, reject) => { const image = new Image(); image.src = url; image.onload = resolve; image.onerror = reject; }); }; const loadImage = (image) => { const src = image.dataset.src; fetchImage(src).then(() => { image.src = src; }); }; const handleIntersection = (entries) => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { loadImage(entry.target); } }); }; // The observer for the images on the page const observer = new IntersectionObserver(handleIntersection, options); images.forEach((img) => { observer.observe(img); }); }, }, }; </script> <style> .news { width: 100%; display: flex; flex-direction: row; align-items: flex-start; max-width: 550px; box-shadow: 2px 1px 7px 1px #eee; padding: 20px 5px; box-sizing: border-box; margin: 15px 5px; border-radius: 4px; } .news__section { width: 100%; max-width: 350px; margin-right: 5px; } .news__title { font-size: 15px; text-align: left; margin-top: 0; } .news__author { font-size: 14px; text-align: left; font-weight: normal; } .article__published { text-align: left; } .image__container { width: 100%; max-width: 180px; max-height: 180px; } .news__img { transition: max-width 300ms cubic-bezier(0.4, 0, 1, 1), max-height 300ms cubic-bezier(0.4, 0, 1, 1); max-width: 150px; max-height: 150px; } .news__img:hover { max-width: 180px; max-height: 180px; } .article__link { text-decoration: none; color: inherit; } </style>

Aici, afișăm datele transmise în această componentă utilizând prop obiectul article . Avem și o metodă care încarcă leneș imaginile atașate fiecărui articol. Această metodă parcurge numărul de imagini de articole pe care le avem și lazy le încarcă atunci când devin vizibile. În cele din urmă, avem stiluri care vizează această componentă în secțiunea de stil.

Următorul lucru va fi să ne înființăm magazinul astfel încât să putem începe să primim cele mai recente știri. Adăugați următoarele linii de cod în fișierul dvs. index.js :

 import Vue from "vue"; import Vuex from "vuex"; import axios from "../plugins/axios"; Vue.use(Vuex); const store = new Vuex.Store({ state: { countries: [{ name: "United States of America", value: "us", }, { name: "Nigeria", value: "ng", }, { name: "Argentina", value: "ar", }, { name: "Canada", value: "ca", }, { name: "South Africa", value: "za", }, ], categories: [ "entertainment", "general", "health", "science", "business", "sports", "technology", ], }, mutations: {}, actions: { async getTopNews(context, country) { let res = await axios({ url: `/top-headlines?country=${country}`, method: "GET", }); return res; }, }, }); export default store;

Adăugăm două proprietăți în magazinul nostru, una dintre aceste proprietăți este countries . Această proprietate conține o serie de obiecte ale țărilor. Avem și categories proprietate; acesta conține o serie de categorii disponibile în API-ul Știri. Cititorului îi va plăcea libertatea de a vizualiza știrile de top din anumite țări și categorii; acest lucru va fi necesar și în mai mult de o parte a aplicației și de aceea folosim magazinul. În secțiunea de acțiuni a magazinului nostru, avem o metodă getTopNews care preia știri de top dintr-o țară (această țară a fost trecută de la componenta care a numit această acțiune).

În acest moment, dacă deschidem aplicația noastră, ar trebui să vedem pagina noastră de destinație care arată astfel:

Fișierul background.js

Acest fișier este punctul de intrare pentru Electron în aplicația dvs. Controlează toate setările asemănătoare aplicației Desktop pentru această aplicație. Starea implicită a acestui fișier poate fi găsită pe GitHub-ul meu.

În acest fișier, avem câteva configurații predefinite setate pentru aplicație, cum ar fi height și width implicite pentru aplicația dvs. Să aruncăm o privire la câteva dintre lucrurile pe care le puteți face în acest fișier.

Activarea instrumentelor de dezvoltare Vuejs

În mod implicit, aveți acces la instrumentele de dezvoltare în Electron, dar nu este activat după instalare. Acest lucru este rezultatul unei erori existente pe Windows 10, așa că dacă deschideți fișierul background.js , veți găsi un cod comentat cu comentarii care afirmă de ce sunt comentate:

 // Install Vue Devtools // Devtools extensions are broken in Electron 6.0.0 and greater // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode // If you are not using Windows 10 dark mode, you may uncomment these lines // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines // try { // await installVueDevtools() // } catch (e) { // console.error('Vue Devtools failed to install:', e.toString()) // }

Deci, dacă nu sunteți afectat de această eroare, puteți decomenta blocul try/catch și, de asemenea, puteți căuta installVueDevtools în același fișier (linia 5) și, de asemenea, îl puteți decomenta. Odată ce ați făcut acest lucru, aplicația dvs. se va reporni automat și, când vă verificați instrumentele de dezvoltare, ar trebui să vedeți Vuejs Devtools.

Selectarea unei pictograme personalizată pentru aplicația dvs

În mod implicit, pictograma Electron este setată ca pictogramă implicită pentru aplicația dvs. și, de cele mai multe ori, probabil că doriți să setați propria pictogramă personalizată. Pentru a face acest lucru, mutați pictograma în dosarul public și redenumiți-o în icon.png . Următorul lucru de făcut ar fi să adăugați dependența necesară, electron-icon-builder .

Îl puteți instala folosind oricare dintre următoarele comenzi:

 // With Yarn: yarn add --dev electron-icon-builder // or with NPM: npm install --save-dev electron-icon-builder

Odată ce ați făcut acest lucru, puteți rula următoarea comandă. Acesta va converti pictograma în format Electron și va imprima următoarele în consolă când se va face acest lucru.

Următorul lucru ar fi să setați opțiunea pictogramei în fișierul background.js . Această opțiune intră în opțiunea BrowserWindow care este importată din Electron . Pentru a face acest lucru, actualizați BrowserWindow pentru a arăta astfel:

 // Add this to the top of your file /* global __static */ // import path import path from 'path' // Replace win = new BrowserWindow({ width: 800, height: 600 }) // With win = new BrowserWindow({ width: 800, height: 600, icon: path.join(__static, 'icon.png') })

Acum, dacă rulăm yarn run electron:build și vizualizam aplicația noastră, ar trebui să vedem pictograma actualizată fiind folosită ca pictogramă a aplicației, dar nu se schimbă în dezvoltare. Această problemă ajută la soluționarea manuală a acesteia pe macOS.

Setarea titlului pentru aplicația dvs

Veți observa că titlul aplicației dvs. este setat la numele aplicației (aplicația de știri în acest caz) și va trebui să-l schimbăm. Pentru a face asta, trebuie să adăugăm o proprietate de title la metoda BrowserWindow în fișierul nostru background.js , astfel:

 win = new BrowserWindow({ width: 600, height: 500, title: "News App", icon: path.join(__static, "icon.png"), webPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, }, });

Aici, setăm titlul aplicației noastre la „Aplicația de știri”. Dar dacă fișierul dvs. index.html are un titlu selectat sau titlul dvs. nu se schimbă în acesta, încercați să adăugați acest cod în fișier:

 win.on("page-title-updated", (event) => event.preventDefault());

Ascultăm un eveniment care este declanșat atunci când title nostru este actualizat din BrowserWindow . Când acest eveniment este declanșat, îi spunem lui Electron să nu actualizeze titlul cu cel găsit în fișierul index.html .

Un alt lucru care ar putea merita schimbat este productName , acesta controlează ce nume apare atunci când treci cu mouse-ul pe pictograma aplicației sau cum recunoaște computerul aplicația. În acest moment, numele aplicației noastre este Electron . Pentru a schimba acest nume în producție, creați un fișier vue.config.js și adăugați-i următoarele linii de cod:

 module.exports = { pluginOptions: { electronBuilder: { builderOptions: { productName: "News App", }, }, }, };

Aici definim productName ca fiind „Aplicație de știri”, astfel încât, atunci când rulăm comanda de compilare pentru aplicația noastră, numele se schimbă din „Electron” în „Aplicație de știri”.

Construire cu mai multe platforme

În mod implicit, atunci când rulați comanda build, aplicația care este creată depinde de platforma pe care este rulată. Aceasta înseamnă că dacă rulați comanda de compilare pe Linux, aplicația care este creată ar fi o aplicație desktop Linux. Același lucru este valabil și pentru alte platforme (macOS și Windows). Dar Electron vine cu opțiunea de a specifica o platformă (sau două platforme) pe care doriți să le generați. Opțiunile disponibile sunt:

1. mac
2. win
3. linux

Deci, pentru a construi versiunea Windows a aplicației dvs., rulați următoarea comandă:

 // NPM npm electron:build -- --win nsis // YARN yarn electron:build --win nsis

Concluzie

Aplicația completată poate fi găsită pe GitHub-ul meu. Documentația oficială Electron oferă informații și un ghid care vă ajută să vă personalizați aplicația desktop în orice mod doriți. Unele dintre lucrurile pe care le-am încercat, dar nu sunt incluse în acest tutorial sunt:

1. Personalizarea dock-ului pe macOS — https://www.electronjs.org/docs/tutorial/macos-dock.
2. Setarea redimensionabile, maximizabile și multe altele - https://github.com/electron/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions.

Deci, dacă doriți să faceți mult mai mult cu aplicația dvs. Electron, documentele lor oficiale sunt un loc bun pentru a începe.

Resurse conexe

1. Node.jshttps://en.wikipedia.org/wiki/Node.js
2. Java (limbaj de programare)https://en.wikipedia.org/wiki/Java_(limbaj_de_programare)
3. Electron (cadru software)
4. JavaFX 14
5. electronii
6. Documentația electronică
7. Vue CLI Plugin Electron Builder
8. Încărcare leneșă a imaginilor pentru performanță folosind Intersection Observer de Chris Nwamba
9. axios
10. Noțiuni introductive cu Axios în Nuxthttps://www.smashingmagazine.com/2020/05/getting-started-axios-nuxt/) de Timi Omoyeni