VueJS: Il 1° progetto di studio… incompleto

Dopo aver creato la prima applicazione tramite la playlist di Youtube in VueJs, ora vediamo come funziona l’uso del’interfaccia da linea di comando.

Soldi in tasca!

Il focus di questo articolo e dei successivi è quello di creare una semplice applicazione Vue per poi includerla in una Desktop App e renderla disponibile su diverse piattaforme. Successivamente renderemo quest’app una PWA per utilizzarla sui nostri smartphone.

L’applicazione che voglio creare è un semplice portafoglio:

La spiegazione del progetto in Vuejs

Avendo la necessità di sapere quanto ho in tasca in questo momento e quali sono state le uscite e le entrate, andrò a realizzare un app che tenga in memoria i movimenti effettuati con le relative descrizioni e mi mostri il saldo.

Quindi abbiamo gia installato Vue tramite CLI ed dobbiamo inizializzare il progetto.
Per farlo da terminale andiamo a digitare semplicemente:
vue create soldi-tasca
In fase di creazione, scegliamo di impostare le preferenze personalizzate e selezioniamo solamente Babel, EsLinter,Router . Le altre opzioni possiamo eventualmente installarle successivamente.

Il passo successivo alla creazione del progetto è quella di aggiungere Vuetify, che è un framework grafico per semplificare la realizzazione della GUI.
Lo installiamo semplicemente ponendoci all’interno della cartella ed aggiungendo il plugin:
cd soldi-tasca
vue add vuetify

Una volta terminato tutta l’installazione ci troveremo una cartella con questa struttura:

soldi-tasca/
├── babel.config.js
├── node_modules
│   ├── accepts  
│   ├── acorn
│   └── ...
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── logo.png
│   │   └── logo.svg
│   ├── components
│   │   └──  HelloWorld.vue
│   ├── routers
│   │   └──  index.js
│   ├── main.js
│   ├── plugins
│   │   └── vuetify.js
│   └── views
│       ├── home.vue
│       └── about.vue
└── vue.config.js

Per avviare il server e controllare all’indirizzo localhost:8080 che tutto funzioni dobbiamo dare il comando npm run serve all’interno della cartella.

Sostituiamo la barra superiore

Come prima cosa andiamo ad inserire la barra principale nella quale successivamente inseriremo le funzioni aggiuntive ed il menu laterale.
Per farlo dobbiamo modificare il file ./src/App.vue andando ad inserire il componente AppBar, andando a rimuovere l’originale HelloWorld.

<template>
  <div id="app">
    <AppBar>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld';
import AppBar from './components/AppBar';
export default {
  name: 'App',

  components: {
    HelloWorld,
	AppBar
  },

  data: () => ({
    //
  }),
};
</script>

Quindi andiamo a creare il componente che abbiamo importato, nella cartella /components/ e lo chiamiamo AppBar.vue.

<template>
    <v-app-bar color="deep-purple accent-4"dense dark >
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-toolbar-title>Soldi in Tasca</v-toolbar-title>
      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
    </v-app-bar>
</template>

<script>
export default {
    name: 'AppBar'
};
</script>

<style scoped>
</style>

Questo codice è stato preso pari pari dalla guida di Vuetify cambiando solo il titolo della toolbar.

Creiamo le due colonne

Torniamo quindi all’interno di App.vue ed andiamo ad inserire una griglia a due colonne.
All’interno di ogni colonna richiameremo poi i componenti dedicati al form di immissione ed alla lista dei movimenti.

<template>
  <v-app>
    <AppBar/>
    <v-container class="grey lighten-5">
    <v-row no-gutters>
        <v-col><AppForm /></v-col>
        <v-col><AppList /></v-col>
    </v-row>
  </v-container>
  </v-app>
</template>
<script>
import AppBar from './components/AppBar';
import AppForm from './components/AppForm';
import AppList from './components/AppList';
export default {
  name: 'App',

  components: {
    AppBar,
    AppForm,
    AppList
  },

  data: () => ({
    //
  }),
};
</script>