Come creare un aplicazione Vue.js in 5 minuti

by Silvia Mazzetta Date: 23-05-2020 vuejs javascript API

Vue.js sta acquisendo sempre più popolarità, diventando un importante concorrente di framework come Angular o React.js. Come framework per i principianti, conquista i cuori dei giovani sviluppatori front-end e delle persone che hanno appena iniziato ad imparare la programmazione.

In questo articolo, vi mostrerò come costruire una semplice applicazione Vue.js con Bootstrap e REST API in 5 minuti.
Per creare questa applicazione, sarebbe utile essere in possesso di una conoscenza di base di HTML, CSS e Javascript.
Importante: è necessario avere Node.js e Yarn installati sul proprio computer.

Cominciamo!

1. Istallare @vue/cli

Inizieremo con l'installazione di Vue CLI, uno strumento che renderà il nostro lavoro molto più facile. Utilizzando Vue CLI, possiamo creare un'applicazione Vue.js pronta all'uso, con tutte le dipendenze necessarie. Per installare Vue CLI,, useremo il seguente comando

yarn global add @vue/cli

Se preferite usare npm potete usare questo comando:

npm instalar -g @vue/cli

Funzionerà in entrambi i casi. Una volta completata l'installazione, dovrebbe apparire la seguente schermata:

app vuejs in 5 minuti

2. Creare un progetto

A questo punto, è molto semplice creare il progetto utilizzando lo strumento Vue CLI. Scorrete sulla riga di comando fino alla cartella in cui desiderate creare l'applicazione ed eseguire il comando successivo:

vue create vueapp

vueapp è il nome del nostro progetto. È possibile scegliere qualsiasi altro nome per l'applicazione, a seconda delle preferenze dell'utente. Dopo che il comando è stato eseguito, apparirà un'istruzione per scegliere un preset e due opzioni come nella schermata sottostante:

Per facilitarci il lavoro e non complicarlo troppo, selezioniamo la configurazione predefinita e clicchiamo su enter. In questo modo si avvia l'installazione, che potrebbe richiedere alcuni secondi. Una volta terminata, verrà visualizzata una nuova cartella vueapp e sarà possibile eseguire il progetto.

3. Iniziare un progetto

Dopo aver creato un nuovo progetto, vedrete ulteriori istruzioni su cosa fare per avviare l'applicazione. Quindi, sulla base delle stesse, andiamo alla cartella vueapp (o diversa a seconda del nome selezionato), ed eseguiamo:

yarn serve

o

npm run serve

se si usa npm, dopo il caricamento, si dovrebbe vedere la seguente schermata a riga di comando:

app vuejs in 5 minuti

L'applicazione inizia per impostazione predefinita all'indirizzo http://localhost:8080/, ma, se si preferisce, è possibile modificare il numero di porta. Apriamo il browser per controllare cosa c'è all'interno del nostro progetto appena creato tramite il collegamento all'indirizzo localhost nella finestra del browser. Verrà visualizzata la seguente schermata.

app vuejs in 5 minuti

4. Creare un nuovo componente

Apriamo un file di applicazione nel nostro editor preferito e andiamo nella cartella ./src/ components. All'interno della cartella dei componenti, creiamo il file Users.vue. All'interno del un file vuoto, creare un codice come quello dell'esempio :

<template>
<h3>Users:</h3>
</template>
<script>
export default {
name: 'Users',
}
</script>
<style>
h3 {
margin>-bottom:5>%;
}
</style>

Ora, configuriamo questo componente per essere visualizzato nel browser. Per fare questo, accedere al file App.vue e cambiare il componente per rimuovere il componente HelloWorld.vue e mostrare invece il componente Users.vue. Il codice finale in questo file dovrebbe essere come questo:

<template>    
<div id="app">      
<Users />    
</div>  
</template>    
<script>  
import Users from './components/Users.vue' 
export default {    
name: 'app',    
components: {      
Users    
}  
}  
</script>    
<style>  
#app {    
font-family: 'Avenir', Helvetica, Arial, sans-serif;    
-webkit-font-smoothing: antialiased;    
-moz-osx-font-smoothing: grayscale;    
text-align: center;    
color: #2c3e50;    
margin-top: 60px;  
}  
</style>

E' il momento di controllare se le nostre modifiche funzionano e sono visibili nel browser. Ricarichiamo l'applicazione. Si dovrebbe vedere il seguente contenuto

app vuejs in 5 minuti

Ora creiamo una chiamata all'API.

5. Crear una llamada a la API

Ok, ora siamo pronti per creare una chiamata all'API.

Useremo un'API falsa dal sito web di JSONPlaceholder.

Per ottenere i dati, useremo gli axios.

Per prima cosa, è necessario installare gli axios, quindi passiamo alla riga di comando e digitiamo il seguente codice per poter installarli :

yarn add axios

or

npm install axios

se si usa npm.

Una volta che axios è stato installato con successo, lo importiamo nei tag degli script del componente Users:

<script>    
import axios from 'axios';      
export default {      
name: 'Users'    
}  
</script>

Prima di creare una vera e propria chiamata API, diamo un'occhiata ai dati che otterremo come risposta:

[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "[email protected]",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "[email protected]",
"address": {
"street": "Victor Plains",
"suite": "Suite 879",
"city": "Wisokyburgh",
"zipcode": "90566-7771",
"geo": {
"lat": "-43.9509",
"lng": "-34.4618"
}
},
"phone": "010-692-6593 x09125",
"website": "[email protected]",
"company": {
"name": "Deckow-Crist",
"catchPhrase": "Proactive didactic contingency",
"bs": "synergize scalable supply-chains"
}
},
...

Ok, ora aggiungeremo la funzione data() che restituirà agli utenti e lo imposterà a null per ora, poi salveremo la risposta delle API nella variabile, e dopo, creeremo una vera e propria chiamata API usando il metodo: axios get method.

<script>
import axios from 'axios';
export default {
name: 'Users',
data() {
return {
users: null,
};
},
created: function() {
axios
.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
this.users = res.data;
})
}
}
</script>

6. Visualizzare i dati

E' tempo di usare Bootstrap per creare un modello semplice e accattivante. Andiamo nella cartella ./public per aggiornare il file index.html. Nella sezione head del file, collocheremo il link al css di Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>tutorial</title>
</head>
<body>

Ora, creiamo un template con una tabella nella quale poter inserire i nostri dati. Per ogni elemento useremo una direttiva v-for e una chiave v-bind:key.

<template>
<div class="container">
<h3>Users:</h3>
    <table class="table">
<thead>
<tr>
<th scope="col">Id</th>
          <th scope="col">Name</th>
          <th scope="col">Email</th>
          <th scope="col">City</th>
        </tr>
      </thead>
      <tbody>
<tr v-for="user in users" v-bind:key="user.id"> 
<th scope="row">{{user.id}}</th>
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
          <td>{{user.address.city}}</td>
        </tr>
      </tbody>
    </table> 
</div> 
</template>

E voila'! La nostra app è pronta!

In questo articolo, abbiamo creato una semplice applicazione Vue.js con API per il recupero dei dati. Per creare un'applicazione abbiamo usato Vue CLI, axios per la chiamata API e Bootstrap per lo stile. Come risultato, otteniamo un'applicazione con un elenco di utenti in una tabella.

Spero che abbiato trovato utile questo tutorial e che tu possiate usarlo come base per esercitarvi con Vue.js.

 
by Silvia Mazzetta Date: 23-05-2020 vuejs javascript API visite : 8830  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Articoli correlati

JQuery morirà nel 2019?

Per un po' di tempo, la centralità di JQuery è stata oggetto di dibattito tra gli sviluppatori web. Come programmatori web interessati a Javascript, eravamo curiosi di sapere che opinioni…

30 Manuali di riferimento per JavaScript: jQuery, Node.js, React

Questa lista ha lo scopo di introdurre i nuovi sviluppatori a JavaScript (jQuery, Node.js e React) e agevolare il compito degli sviluppatori più esperti. jQuery jQuery API (Official) Leggi → jQuery Cheatsheet (Devhints) Leggi → jQuery Cheat Sheet (JavaScript Toolbox) Leggi…

Le migliori librerie JavaScript del 2018

Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…

Convertire il testo in voce e viceversa con Javascript: tutorial+codice

In questo tutorial sperimenteremo la Web Speech API: un'interfaccia browser molto potente che consente di registrare la voce umana e convertirla in testo. La useremo anche per fare il contrario: interpretare…

I 5 Migliori Frameworks JavaScript per Applicazioni Desktop

Non molto tempo fa era impossibile costruire un'applicazione desktop con JavaScript. Fortunatamente, questi tempi sono passati, e ora gli sviluppatori JS possono utilizzare le loro conoscenze e competenze di sviluppo…

Introduzione a React: la prima libreria JavaScript costruita per sviluppatori frontend

React è una libreria JavaScript, creata da Facebook e Instagram, che permette di creare delle interfacce utente complesse grazie alla suddivisione in diversi componenti. React supporta la definizione di modelli HTML per ciascun componente attraverso un…

Riconoscimento facciale: rilevare la prossimità di un volto in javascript

No, non è una prerogativa di Facebook...La Face Detection è una tecnologia informatica che determina la posizione e le dimensioni di volti umani rappresentati in immagini digitali. Sicuramente avrete già  visto…

jQuery: consigli e trucchi utili per migliorare le performance di un sito web

Quando si sviluppa in jQuery ci si rende conto che esistono diverse maniere di implementare la stessa cosa. La tendenza è di migliorare e semplificare sempre più scrivendo meno righe di…

Javascript: 12 e-book gratis per utenti avanzati

Se giá possedete una conoscenza solida della programmazione ed in particolar modo del linguaggio JavaScript e state cercando delle guide o dei libri che vi aiutino a migliorare ulteriormente le…

Fondamentali di javascript: non sempre i metodi di base si usano nel modo corretto

Il JavaScript è basicamente un linguaggio semplice che grazie agli sviluppatori continua ad evolvere evolvere mediante l'implementazione di modelli flessibili ed intelligenti. Tali modelli alimentano le odierne applicazioni web. Ma a volte,…

11 librerie JavaScript Open Source per progetti front-end

Senza dubbio, JavaScript è uno dei linguaggi di programmazione più utilizzati al giorno d'oggi. Grazie ad esso, abbiamo accesso a varie funzionalità che vengono offerte sui siti web che visitiamo…

Come creare una dashboard simil Windows8 con CSS3 e jQuery

Come creare un'animazione simil Windows8 con CSS3 e jQuery Markup CSS Javascript IL MARKUP L'intera struttura è abbastanza semplice: La dashboard è costituita da una serie di "box" o riquadri, di due dimensioni, floatanti dentro…

Clicky