0Pricing
Vue Academy · Lezione

Installazione di Vue CLI

Installi e utilizzi Vue CLI per creare nuovi progetti.

Installazione di Vue CLI è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.

Che cos'è Vue CLI?

Vue CLI è il classico strumento a riga di comando per creare lo scheletro e gestire i progetti Vue.

  • Crea progetti con impostazioni predefinite ragionevoli
  • Gestisce la configurazione della build tramite plugin
  • Si basa su webpack

Per anni è stato lo standard, anche se oggi Vue privilegia Vite.

Installazione globale di Vue CLI

Installi la CLI globalmente, così il comando vue sarà disponibile ovunque.

# Install globally with npm
npm install -g @vue/cli

# Verify the installation
vue --version
# @vue/cli 5.0.8

Creazione di un progetto

Utilizzi vue create per creare lo scheletro di un nuovo progetto. È sufficiente indicare il nome del progetto.

# Create a new project
vue create my-project

# The CLI launches an interactive prompt

Scelta dei preset

La CLI chiede di scegliere un preset:

  • Predefinito fornisce Babel ed ESLint ed è il percorso più rapido
  • Selezione manuale delle funzionalità consente di aggiungere Router, Vuex, TypeScript, strumenti di test e altro

I preset possono essere salvati e riutilizzati per i progetti futuri.

Selezione manuale delle funzionalità

Quando sceglie la selezione manuale, attivi o disattivi le funzionalità desiderate.

# Example feature checklist
? Check the features needed for your project:
  (*) Babel
  ( ) TypeScript
  (*) Router
  (*) Vuex
  (*) CSS Pre-processors
  (*) Linter / Formatter

Esecuzione del progetto

Dopo la creazione, la CLI stampa i comandi per avviare l'applicazione.

# Move into the project
cd my-project

# Start the dev server
npm run serve

# App runs at http://localhost:8080

Ecco Vite

Vite è lo strumento di build moderno creato dal team di Vue.

  • Utilizza moduli ES nativi per un avvio immediato
  • Hot Module Replacement estremamente veloce
  • È molto più veloce di Vue CLI, basato su webpack

Oggi Vite è lo strumento consigliato per i nuovi progetti Vue.

Vite a confronto con Vue CLI

Ecco come si confrontano i due strumenti:

  • Vue CLI utilizza webpack, ha un avvio a freddo più lento, ma è maturo e configurabile
  • Vite utilizza esbuild e ESM nativi, offre un avvio quasi immediato ed è la scelta predefinita per il futuro

Vue CLI è ora in modalità di manutenzione. Preferisca Vite, a meno che non debba gestire un progetto legacy.

npm create vue@latest

Il modo ufficiale per avviare un nuovo progetto Vue basato su Vite consiste nell'utilizzare lo strumento create-vue.

# Scaffold a Vite + Vue project
npm create vue@latest

# Prompts for name and features:
#   TypeScript, JSX, Vue Router, Pinia,
#   Vitest, ESLint, Prettier

Esecuzione di un progetto create-vue

create-vue utilizza gli script standard di Vite.

# After scaffolding
cd my-vue-app
npm install
npm run dev

# Dev server: http://localhost:5173

Quale scegliere?

Indicazioni per la scelta:

  • Sta iniziando un progetto da zero nel 2024 o negli anni successivi? Utilizzi npm create vue@latest (Vite)
  • Sta gestendo un vecchio progetto creato con Vue CLI? Continui a utilizzarlo
  • Desidera l'esperienza di sviluppo più veloce? Vite è la scelta migliore

Verifica rapida

Verifichi la comprensione delle scelte relative agli strumenti Vue.

Riepilogo: installazione di Vue CLI

Ha imparato a conoscere gli strumenti per creare lo scheletro di un progetto Vue:

  • Vue CLI si installa con npm install -g @vue/cli
  • vue create crea lo scheletro usando i preset
  • Vite è l'alternativa moderna e veloce
  • npm create vue@latest è il metodo moderno consigliato per iniziare

Prossimo argomento: esplorare la struttura del progetto generato.

Domande Frequenti

La lezione «Installazione di Vue CLI» è gratuita?

Sì — il testo completo di «Installazione di Vue CLI» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.

Cosa imparerò in «Installazione di Vue CLI»?

Installi e utilizzi Vue CLI per creare nuovi progetti. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 3.

Quanto tempo richiede la lezione «Installazione di Vue CLI»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Installazione di Vue CLI
  2. Struttura del progetto generato
  3. Configurazione della CLI e dei plugin
← Torna a Vue Academy