00
:
00
:
00
:
00
•Corso SEO AI - Usa SEOEMAIL al checkout per il 30% di sconto

Installazione e Setup

Edoardo Midali
Edoardo Midali

Creare un progetto Vue 3

Il modo raccomandato per creare un nuovo progetto Vue 3 e utilizzare create-vue, lo strumento ufficiale di scaffolding basato su Vite.

Requisiti

  • Node.js versione 18 o superiore
  • Un terminale e un editor di codice (VS Code consigliato)
  • L’estensione Vue - Official (ex Volar) per VS Code

Comando di creazione

npm create vue@latest

Il comando interattivo ti chiedera diverse opzioni.

✔ Project name: … mio-progetto
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes
✔ Add Vue DevTools 7 extension for debugging? … Yes

Avviare il progetto

cd mio-progetto
npm install
npm run dev

Il server di sviluppo Vite si avvia su http://localhost:5173 con Hot Module Replacement (HMR) istantaneo.

Comandi disponibili

npm run dev      # Server di sviluppo con HMR
npm run build    # Build di produzione
npm run preview  # Anteprima build di produzione
npm run lint     # Linting con ESLint
npm run test     # Esegui test con Vitest

Perche Vite

Vite e il build tool raccomandato per Vue 3. Creato da Evan You, offre vantaggi significativi rispetto a Webpack.

Vantaggi principali

  • Avvio istantaneo: Usa ES modules nativi del browser, nessun bundling in sviluppo
  • HMR velocissimo: Aggiornamenti in millisecondi indipendentemente dalla dimensione del progetto
  • Build ottimizzato: Usa Rollup per la produzione con tree-shaking e code-splitting
  • Supporto nativo TypeScript: Nessuna configurazione aggiuntiva necessaria
  • Plugin ecosystem: Compatibile con plugin Rollup e plugin Vite dedicati

Configurazione Vite

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    open: true
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
})

Struttura del progetto

Un progetto Vue 3 creato con create-vue ha questa struttura.

mio-progetto/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   │   └── main.css
│   ├── components/
│   │   ├── icons/
│   │   └── HelloWorld.vue
│   ├── composables/         # Composables riutilizzabili
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   ├── views/
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue
│   └── main.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts

Ruolo di ogni cartella

Cartella Descrizione
public/ File statici serviti direttamente (non processati da Vite)
src/assets/ Risorse processate da Vite (CSS, immagini, font)
src/components/ Componenti Vue riutilizzabili
src/composables/ Funzioni composable per logica riutilizzabile
src/router/ Configurazione Vue Router
src/stores/ Store Pinia per state management
src/views/ Componenti pagina (collegati alle route)

File di ingresso

index.html

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mio Progetto Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

// Configurazione globale opzionale
app.config.errorHandler = (err, vm, info) => {
  console.error('Errore Vue:', err, info)
}

// Proprieta globali
app.config.globalProperties.$formato = {
  valuta: (n: number) => `${n.toFixed(2)} EUR`
}

app.mount('#app')

App.vue

<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">Chi siamo</RouterLink>
    </nav>
  </header>

  <main>
    <RouterView />
  </main>
</template>

<style scoped>
nav {
  display: flex;
  gap: 1rem;
  padding: 1rem;
}

nav a.router-link-active {
  color: #42b883;
  font-weight: bold;
}
</style>

Vue DevTools

Vue DevTools e un’estensione browser essenziale per lo sviluppo.

Installazione

Installa l’estensione dal Chrome Web Store o Firefox Add-ons cercando “Vue.js devtools”. La versione 7 supporta Vue 3 con funzionalita avanzate.

Funzionalita principali

  • Component Inspector: Visualizza l’albero dei componenti e il loro stato
  • Timeline: Traccia eventi, mutazioni e performance
  • Pinia: Ispeziona e modifica gli store in tempo reale
  • Router: Visualizza le route e la cronologia di navigazione
  • Performance: Misura i tempi di rendering dei componenti

Plugin nel progetto

Se hai scelto Vue DevTools durante la creazione del progetto, il plugin viene installato automaticamente.

// vite.config.ts con DevTools plugin
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools()
  ]
})

Primo componente SFC

Creiamo il primo Single File Component (SFC) completo.

<!-- src/components/ContatoreSemplice.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'

const contatore = ref(0)
const passo = ref(1)

const doppio = computed(() => contatore.value * 2)

function incrementa() {
  contatore.value += passo.value
}

function decrementa() {
  contatore.value -= passo.value
}

function resetta() {
  contatore.value = 0
}
</script>

<template>
  <div class="contatore">
    <h2>Contatore: {{ contatore }}</h2>
    <p>Doppio: {{ doppio }}</p>

    <label>
      Passo:
      <input v-model.number="passo" type="number" min="1" />
    </label>

    <div class="azioni">
      <button @click="decrementa">- {{ passo }}</button>
      <button @click="resetta">Reset</button>
      <button @click="incrementa">+ {{ passo }}</button>
    </div>
  </div>
</template>

<style scoped>
.contatore {
  text-align: center;
  padding: 2rem;
  border: 2px solid #42b883;
  border-radius: 12px;
  max-width: 400px;
  margin: 0 auto;
}

.azioni {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background: #42b883;
  color: white;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background: #38a376;
}

input {
  width: 60px;
  padding: 0.25rem;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

Utilizzare il componente

<!-- src/views/HomeView.vue -->
<script setup lang="ts">
import ContatoreSemplice from '@/components/ContatoreSemplice.vue'
</script>

<template>
  <div>
    <h1>Benvenuto nel mio progetto Vue!</h1>
    <ContatoreSemplice />
  </div>
</template>

Metodo alternativo: CDN

Per prototipazione rapida o integrazione in pagine esistenti, puoi usare Vue tramite CDN.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>Vue via CDN</title>
</head>
<body>
  <div id="app">
    <h1>{{ titolo }}</h1>
    <input v-model="titolo" placeholder="Modifica il titolo" />
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const titolo = ref('Ciao Vue!')
        return { titolo }
      }
    }).mount('#app')
  </script>
</body>
</html>

Best practice di setup

  • Usa sempre TypeScript: Il supporto in Vue 3 e eccellente e previene errori
  • Configura ESLint e Prettier: Mantieni il codice consistente nel team
  • Organizza per feature: Nelle app grandi, raggruppa componenti, composables e store per funzionalita
  • Alias @: Usa sempre l’alias @/ per import relativi a src/
  • Environment variables: Usa file .env con prefisso VITE_ per le variabili d’ambiente
# .env.development
VITE_API_URL=http://localhost:3001/api
VITE_APP_TITLE=Mio Progetto (Dev)

# .env.production
VITE_API_URL=https://api.miosito.com
VITE_APP_TITLE=Mio Progetto

// Accesso alle variabili d'ambiente
const apiUrl = import.meta.env.VITE_API_URL
PrecedentePanoramicaSuccessivoTemplate Syntax