smboolean47/vuejs-cli

Guida Vuejs CLI

Installazione

Node.js

Installiamo Node.js seguendo le istruzioni riportate sulla documentazione a questo link verifichiamo la corretta installazione con

node -v

Vue CLI

installiamo Vue CLI a livello globale

npm install -g @vue/cli

verifichiamo la corretta installazione con

vue --version

⚠️ Utenti Windows Chiudere e riaprire il terminale come amministratori e lanciare il seguente comando

Set-ExecutionPolicy remotesigned

Creazione di un nuovo progetto

Creo la cartella di progetto e la apro con VSCode. Dal terminale di VSCode lancio

vue create .

Opzioni da selezionare

• ✅ Manually select features
• ✅ Aggiungo CSS Pre-processors
• ✅ Versione 2.x
• ✅ Sass/SCSS (with dart-sass)
• ✅ ESLint with error prevention only
• ✅ Config for Babel, ESLint ect. in dedicated config files Per avviare il server di sviluppo:

npm run serve

Clonazione di un progetto

Dopo aver clonato la repo ed aperto il progetto con VSCode. Dal terminale di VSCode lancio:

npm install

per installare tutte le dipendenze del progetto.

Per avviare il server di sviluppo:

npm run serve

Installazione Pacchetti

Fontawesome

Installo la libreria tramite npm

npm install --save-dev @fortawesome/fontawesome-free

Nel file main.js aggiungo gli import della libreria prima della creazione dell'istanza di Vue:

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'

Ora posso utilizzare le icone nei miei componenti.

Link alla Fonte

Bootstrap 5

Installo la libreria tramite npm

npm i bootstrap

Nel nostro file global.scss o direttamente nel componente App.vue possiamo scegliere di importare tutta la libreria

@import '~bootstrap/scss/bootstrap.scss';

o solo la griglia

@import '~bootstrap/scss/bootstrap-grid.scss';

Axios

Installo la libreria tramite npm

npm i axios

In ogni componente dove ho bisogno di fare chiamare Ajax importo la libreria

import axios from 'axios';

Nel Hook created() eseguo la chiamata.

created() {
    axios.get('URL_ENDPOINT_API')
    .then((response) => {
        // handle success
        console.log(response);
    })
    .catch(function (error) {
        // handle error
        console.log(error);
    });
}

Sviluppo Locale

Per avviare il server di sviluppo locale

npm run serve

Building per la produzione

Per buildare il progetto

npm run build

Percorsi relativi

Aggiungere un file vue.config.js nella root del progetto con la seguente istruzione

module.exports = {
	publicPath: './'
};

Troubleshooting

Visualizzare immagine con percorso locale salvato nei data del component

Potrebbe capitarci di voler utilizzare il valore di una variabile come src di un tag immagine.

❌ Esempio non funzionante:

<template>
    <div>
        <img :src="localImage">
    </div>
</template>

<script>
export default {
    name: 'ComponentName',
    data() {
        return {
            localImage: '../assets/image.png'
        }
    }
}
</script>

In questo caso l'immagine non verrebbe visualizzata in quanto Webpack, il module bundler che compila il nostro sorgente in codice comprensibile dal browser, non trasforma correttamente il percorso dell'immagine in /img/image.png. Per forzare questo comportamento possiamo utilizzare la funzione require() passandogli come argomento il percorso all'immagine.

✅ Esempio funzionante:

<template>
    <div>
        <img :src="localImage">
    </div>
</template>

<script>
export default {
    name: 'ComponentName',
    data() {
        return {
            localImage: require('../assets/image.png')
        }
    }
}
</script>

Link alla fonte