Installazione repo Vue

Creiamo la Repo

Comando per la creazione della repo:

npm create vite@latest nomerepo -- --template vue

Entriamo nella Repo

code nomerepo

Comandi preliminari

npm i
npm run dev

Una volta eseguiti i comandi provare ad entrare nella pagina.

---

Cancellazione file

• Cancellare file style.css
• Cancellare riga 2 del file main.js (riga contenente l’import del file css)
• Cancellare file HelloWord.vue
• Svuotare file App.vue
• Aggiungere boilerplate di Vue dentro App.vue
• Rimuovere logo Vite nel file index.html
• Cambiare il title nel file index.html

---

Installiamo SASS

npm i sass -D

• Dentro assets creiamo la cartella scss
• Dentro scss creiamo il file style.scss
• All’interno del file App.vue nello style mettere lang="scss"
• All’interno del tag style importare lo style.scss di scss:

@use './assets/scss/style.scss';

---

Aggiunta dell’alias per il path (@)

• Importare il path nel file vite.config.js:

import path from 'path'

• All’interno della funzione defineConfig aggiungiamo l’oggetto resolve:

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src')
    }
}

---

Creare un file vars.scss per le variabili in SCSS

• Creiamo il file vars.scss
• Importiamo il file vars.scss nei file in cui verranno usate le variabili:

@use 'vars' as *;

---

Importiamo Bootstrap

npm i bootstrap

Importiamo Bootstrap nel file main.js:

import 'bootstrap/dist/css/bootstrap.min.css'

---

FontAwesome

1. Installiamo FontAwesome:

   npm i --save @fortawesome/fontawesome-svg-core

2. Installiamo i tre pacchetti di icone:

   npm i --save @fortawesome/free-solid-svg-icons
   npm i --save @fortawesome/free-regular-svg-icons
   npm i --save @fortawesome/free-brands-svg-icons

3. Installiamo la libreria:

   npm i --save @fortawesome/vue-fontawesome@latest-3

4. Importiamo la libreria generica di FontAwesome:

   import { library } from '@fortawesome/fontawesome-svg-core'

5. Importo il componente di FontAwesome:

   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

6. Importo le icone che voglio:

   import { nomeicone } from '@fortawesome/free-solid-svg-icons'
   import { nomeicone } from '@fortawesome/free-regular-svg-icons'
   import { nomeicone } from '@fortawesome/free-brands-svg-icons'

7. Inserisco globalmente le icone:

   library.add(nomeicone)

   Aggiungere un library.add(nomeicone) per ogni pacchetto di icone (solid, regular, brands).
8. Rendo le icone disponibili:

   const app = createApp(App);
   app.component('FontAwesomeIcon', FontAwesomeIcon);
   app.mount('#app');

---

Fontsource

npm i @fontsource/nomedelfontdausare

Installare Fontsource nel file main.js:

import '@fontsource/nomedelfontdausare'

• Creare una variabile SCSS con il font installato
• Usare la variabile nel font-family

---

Axios

npm i axios