Creazione componenti con Vue js

VUE JS
Creazione e Utilizzo dei componenti

Gianfranco Castro
SEO Manager @ Condé Nast
Android Developer
Full Stack Web Developer
Da sempre appassionato di Web Development,
Mobile Development, Technical SEO e Digital
Marketing, docente di numerosi corsi in ambito
sviluppo Web e Mobile.
Background da sviluppatore, dai lontani tempi
del Commodore 64, mentre studia ragioneria
capisce che la sua passione è l’informatica e il
web, passioni che lo portano ad affrontare il
percorso universitario in ingegneria informatica;
qui si rafforza la passione per lo sviluppo
software, i database e IT Project Management.

Installare Vue
Installazione stand-alone
Per installare Vue.js puoi semplicemente scaricare e includere la libreria con uno script tag. Vue sarà registrata come
variabile globale.
Due sono le versioni scaricabili di Vue.js da CDN:
- Development version da http://vuejs.org/js/vue.js
- Production Version da http://vuejs.org/js/vue.min.js
Installazione da npm
NPM è il metodo di installazione raccomandato quando si lavora ad applicazioni di larga scala. Si abbina di solito ai
moduli CommonJS come Webpack o Browserify.
# latest stable
$ npm install vue
# dev build (directly from GitHub):
$ npm install vuejs/vue#dev
VueJS Milano
Creazione e utilizzo di componenti

Installare Vue
CLI Installer
E’ possibile utilizzare lo strumento di scaffolding di vue per creare e gestire le applicazioni come qui illustrato
https://cli.vuejs.org/
Creazione ambiente di lavoro
Ovviamente sono basilari nodejs e npm (https://nodejs.org/en/download/ ), indipendentemente dal sistema
operativo utilizzato; nel caso di Windows, vi consiglio di installare cmder (http://cmder.net/ ) come Terminale, in
quanto nell’installer è già presente git ed è abbastanza semplice da configurare per esporre PATH; in alternativa
consiglio https://conemu.github.io/ oppure qui degli approfondimenti:
https://www.slant.co/topics/1552/versus/~conemu_vs_cmder_vs_mobaxterm
https://aarontgrogg.com/blog/2015/07/31/a-better-windows-command-line-experience-comparing-powercmd-vs
-console2-vs-consolez-vs-conemu-vs-cmder/
Inoltre vi consiglio di installer http-server (https://www.npmjs.com/package/http-server )
e json-server (https://www.npmjs.com/package/json-server) che utilizzeremo durante il corso.
VueJS Milano

IDE
Come editor vi consiglio di utilizzare Visual Studio Code (https://code.visualstudio.com/ ) e il plugin Vetur (
https://vuejs.github.io/vetur/ )
Per uno sviluppo professionale, vi consiglio Jetbrains Web Storm (https://www.jetbrains.com/webstorm/ ) in quanto
contiene già nativamente il supporto a Vue.
Prima applicazione
Adesso andiamo a creare una prima applicazione seguendo questi step
- creazione file HTML
- inclusione script di Vue
- creazione istanza applicativo
- prime modifiche al DOM
VueJS Milano

Prima applicazione
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue app 1</ title>

<script src="https://vuejs.org/js/vue.js"></script>
</head>
<body>
<div id="app"> {{ message }} </ div>

<script src="app.js"></script>
</body>
</html>
VueJS Milano

Prima applicazione
File app.js
var app = new Vue({
// === Punto di mount dell'applicativo
el: '#app',
// === metodo che definisce i dati dell'applicativo
data() {
return {
message: 'Prima applicazione'
}
}
});
Per far funzionare l’applicativo dopo aver installato http-server, lanciamo da riga di comando
$ http-server -i -d -c-1 --cors
che fa partire il web server
Starting up http-server, serving ./
Available on:
http://127.0.0.1:8080
http://127.94.0.2:8080
VueJS Milano

Prima applicazione
Useremo il two-way data binding per cambiare dinamicamente il valore del messaggio quando l’utente utilizzerà
l’input: tutto è sincronizzato di default per ogni evento che parte dall’input.
Modificando il codice HTML precedente in
<div id="app">
<h1>{{ message }}</ h1>
<input type="text" v-model="message" >
</div>
la direttiva “v-model” implementa il meccanismo di two-way data binding tra il DOM e i dati dell’applicazione.
VueJS Milano

Vue-cli
Vue-cli è un semplice strumento di scaffolding di progetti Vue; questo ottimo tool è il modo più veloce per una
configurazione base.
Offre una serie di template veloci da caricare, unit testing, e altro. Ha all’interno anche template per Webpack e
Browserify
I principali template
Quello che fa CLI è prelevare template dal repository ufficiale dei template di Vue.js dove ci sono 5 template
disponibili. Credo che questo numero sia destinato a crescere nel tempo. E’ possibile dare un’occhiata
sull’evoluzione attraverso il repository GitHub https://github.com/vuejs-templates
Tutti i template contengono il file package.json che gestisce anche le dipendenze dei progetti; se usiamo i template
dei progetti Vue, avremo a disposizione una serie di feature.
Per esempio, la descrizione "webpack" dei template dice che è un “setup completo di Webpack + vue-loader con
linting, testing e estrazione CSS”.
VueJS Milano

Vue-cli
L’installazione https://cli.vuejs.org/guide/installation.html è alquanto semplice:
$ npm install -g @vue/cli
Per usare CLI occorre avviare il comando
$ vue create <project-name>
dove <project-name> è il nome della directory/progetto che andremo a creare; qui ci verranno poste alcune
domande per andare a configurare il progetto
VueJS Milano

Vue cli 3
Andiamo a creare il nostro progetto Webpack:
$ vue create spa-gestionale
VueJS Milano

Vue Cli 3
Quando si procede con l’inizializzazione, il terminale ci chiederà alcuni dettagli sul progetto da
costruire come il nome, la versione, ecc.
In un determinato punto ci chiederà Pick an ESlint preset; le opzioni disponibili sono feross/standard e
airbnb/javascript.
Su quale scegliere io vi consiglio la airbnb, ma se volete una comparazione più approfondita, rimando a questi link:
- https://npmcompare.com/compare/eslint-config-airbnb,standard
- https://standardjs.com/readme-iteu.html
- https://github.com/airbnb/javascript
VueJS Milano

Vue Cli 3
Possiamo lanciare la versione development del nostro progetto con:
$ npm run serve
VueJS Milano

Vue Cli 3
Il progretto appena creato ha la seguente struttura:
.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.vue
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── main.js
├── router.js
└── views
├── About.vue
└── Home.vue
VueJS Milano
Configurazione dei package di prod e dev
Configurazione dei package di prod e dev

Vue-cli
La struttura di un progetto webpack è la seguente: https://vuejs-templates.github.io/webpack/structure.html e le
parti di nostro interesse, al momento sono:
- index.html
- package.json
- la cartella “src”
- la cartella “config”
- la cartella “build”
Quando avremo finito di sviluppare la nostra applicazione, possiamo fare la build lanciando il comando:
$ npm run build
Vedi il video su https://asciinema.org/a/TJho9OCEcVKjp16ZDLyUZFmZJ
VueJS Milano

Vue-cli
Il risultato della build sarà la creazione della cartella “dist” con la seguente struttura
.
├── index.html
└── static
├── css
│ ├── app.032ab04a0a9486c313d9884150bee592.css
│ └── app.032ab04a0a9486c313d9884150bee592.css.map
└── js
├── app.cda9eea43bd2acedfa05.js
├── app.cda9eea43bd2acedfa05.js.map
├── manifest.e87e976a438667c2f639.js
├── manifest.e87e976a438667c2f639.js.map
├── vendor.5973cf24864eecc78c48.js
└── vendor.5973cf24864eecc78c48.js.map
VueJS Milano

Vue-cli
I comandi “dev” e “build” sono definiti nel file package.json
{
"name": "app-sfc",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Gianfranco Castro <gianfranco.castro@gmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
....
Vedi anche https://vuejs-templates.github.io/webpack/commands.html
VueJS Milano

Gestione di un progetto SFC
Inizialmente il file index.html si presenta cosi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>app-sfc</title>
</head>
<body>
<div id="app"></div>

</body>
</html>
e in fase di build, prima della chiusura del tag body, verranno inseriti gli script app, manifest e vendor.
VueJS Milano

La struttura della cartella “src” invece si presenta in questo modo:
.
├── App.vue -> Primo componente che rappesenta l’applicazione
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue -> Componente che verrà richiamato da App.vue
├── main.js -> entry point di build; Webpack inizierà da qui
└── router
└── index.js -> Elenco di ruote della nostra applicazione
VueJS Milano

Osservando il contenuto del file main.js abbiamo:
import Vue from 'vue';
import App from './App';
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
Sulla logica di JS modulare, rimando a questi approfondimenti:
- https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#Using_named_exports
- https://nodejs.org/api/modules.html#modules_exports
- https://webpack.js.org/api/module-methods/#es6-recommended-
VueJS Milano
Importa Vue come modulo da node modules e il
componente App dalla directory src. (da notare il ./)
La nostra istanza Vue e nei componenti c’è un App.
Ogni volta che si ha necessità di importare uno script o
un componente globalmente, è possibile inserirlo
all’interno di main.js.

Sul file App.vue, abbiamo quindi il bootstrapping del nostro progetto, il cui codice, come ogni componente Vue, è
cosi strutturato:
- sezione “template” : rappresenta l’HTML generato dal componente; DEVE SEMPRE avere un tag root di
partenza (tipicamente basta un div)
- sezione “script” dove c’è il nostro codice Vue
- sezione “style” con il CSS per decorare l’HTML del template
VueJS Milano

Creazione del progetto “Mega Sommatoria”
Adesso andiamo a creare un progetto sulla quale andiamo a toccare con mano i seguenti concetti:
- creazione di un componente
- passaggio di parametri ad un componente
- eventi base e computed property
- comunicazione tra componenti
Il codice è disponibile su questo repository pubblico su GitHub https://github.com/casgin/vue-mega-sommatoria
Adesso vediamo step-by-step cosa abbiamo implementato; ricordatevi, quando scaricate il codice di lanciare il
comando
$ npm install
che andrà a creare la cartella “node_modules” con tutti i package necessari
VueJS Milano

Adesso andiamo a osservare la crazione del compontente “Sommatoria”: all’interno della catella “components”
abbiamo il file “sommatoria.vue” che ha il seguente template (vedi codice nel gist
https://gist.github.com/casgin/ff09dd625653cd61b93fa2a493dab63d ) che produce il seguente HTML:
seguente
VueJS Milano
come sempre vi consiglio di partire dalle user action, cioè dalle azioni che può compiere l’utente sulla pagina; su
questo vi consiglio software come Balsamiq che è molto semplice da utilizzare; qui abbiamo due azioni che può
compiere l’utente:
- pressione del tasto enter quando scrive il numero
- click sul tasto “Add”

questi si traducono nel seguente codice del componente

<input type="number"
v-model="numeroInserito"
@keypress.enter="sommaNumero">

<button v-on:click="sommaNumero()">Add</button>
VueJS Milano

Il metodo “sommaNumero” aggiunge ad un array il numero inserito; c’è una computed property “sommatoria()” che
viene invocata automaticamente ogni volta viene inseriro un elemento nell’array: si occupa di fare la sommatoria e
resisutirla: questo consente di inserirla nel template del componente, avendo sempre il risultato aggiornato:

<div>{{sommatoria}}</div>
e qui il codice della computer property ( https://vuejs.org/v2/guide/computed.html#Basic-Example ) in questo gist:
https://gist.github.com/casgin/86e5f7dd6994deabc8307d20d24313ae ; sul repo
https://github.com/casgin/vue-mega-sommatoria trovate tutto il codice.
VueJS Milano

Adesso andiamo a vedere come possiamo montare il nostro compontente: prendiamo “HelloWorld.vue” e andiamo
a montarlo in questo modo:
<Sommatoria titolo="Somma di quanti isse ho chiuso du Jire"
sottotitolo="QUate issue e problematiche ho chiuso oggi si JIra"
numero-iniziale="0"></Sommatoria>
<script>
import Sommatoria from "./sommatoria";
export default {
name: 'HelloWorld',
// --- Dichiaro il componente importato
// --- vuol dire che lo posso utilizzare nel template
components: {Sommatoria},
...
VueJS Milano

Possiamo anche legare le informazioni del componete “montante” con il componente “montato”, ad esempio:

<Sommatoria titolo="Esempio passaggio informazioni al compoenete"
sottotitolo="Vediamo come recuperare i dati"
numero-iniziale="55"
:arElencoIniziale="elencoInizale"></Sommatoria>
VueJS Milano
<script>
import Sommatoria from "./sommatoria";
export default {
name: 'HelloWorld',
...
data() {
return {
elencoInizale: [34, 65, 89],
}
}
}
</script>

VueJS Milano
Questo è tutto, ci sono altri aspetti legati a questo progetto da osservare, spero, nei prossimi Meetup:
- comunicazione tra componenti:
- comunicazione di dati
- comunicazione di eventi
- passaggio di parametri in un componente e validazione
Vi volevo ricordare i due appuntamenti sulla quale potete trovarmi:
- Workshop “ ” al VueDay 2019 a Verona:
https://2019.vueday.it/training.html
- Training “ ” alla PyCon X:
https://www.pycon.it/conference/talks/creare-una-dashboard-con-flask-e-vuejs
LinkedIn: https://www.linkedin.com/in/gianfrancocastro/
Email: gianfranco.castro@gmail.com

Creazione componenti con Vue js

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Similar to Creazione componenti con Vue js

Similar to Creazione componenti con Vue js (20)

Creazione componenti con Vue js