Vue.js

Aspetto

In questa pagina

Tooling ​

Provalo online ​

Non è necessario installare nulla sul tuo computer per provare i SFC di Vue: ci sono dei playground online che ti permettono di farlo direttamente nel browser:

  • Vue SFC Playground
    • Sempre basato sull'ultimo commit
    • Progettato per ispezionare i risultati della compilazione dei componenti
  • Vue + Vite su StackBlitz
    • Ambiente simile a un IDE che esegue il vero server di sviluppo Vite nel browser
    • Più simile all'ambiente di sviluppo locale

È anche consigliabile utilizzare questi playground online per fornire riproduzioni quando segnali bug.

Creazione di un nuovo progetto ​

Utilizzo di Vite ​

Vite è uno strumento di build leggero e veloce con un supporto di prima classe per gli SFC (Single-File Components) di Vue. Vite è creato da Evan You, l'autore di Vue!

Per iniziare con Vite + Vue, esegui semplicemente:

$ npm create vue@latest

Questo comando installerà ed eseguirà create-vue, lo strumento ufficiale di creazione di progetti Vue.

  • Per saperne di più su Vite, consulta la documentazione di Vite.
  • Per configurare il comportamento specifico di Vue in un progetto Vite, ad esempio passare opzioni al compilatore Vue, consulta la documentazione di @vitejs/plugin-vue.

Entrambi i playground online menzionati sopra supportano anche il download dei file come progetto Vite.

Vue CLI ​

Vue CLI è la catena di strumenti ufficiale basata su webpack per Vue. Attualmente è in modalità di manutenzione e raccomandiamo di iniziare nuovi progetti con Vite, a meno che tu non faccia affidamento su funzionalità specifiche solo di webpack. Vite fornirà un'esperienza di sviluppo superiore nella maggior parte dei casi.

Per informazioni sulla migrazione da Vue CLI a Vite:

Nota sulla compilazione dei template nel browser ​

Quando si utilizza Vue senza una fase di build, i template dei componenti vengono scritti direttamente nell'HTML della pagina o come stringhe JavaScript incorporate. In tali casi, Vue deve fornire il compilatore dei template al browser per eseguire la compilazione on-the-fly. D'altro canto, il compilatore sarebbe inutile se precompiliamo i template con una fase di build. Per ridurre la dimensione del bundle client, Vue fornisce diverse "build" ottimizzate per diversi casi d'uso.

  • I file di build che iniziano con vue.runtime.* sono build solo runtime: non includono il compilatore. Quando si utilizzano queste build, tutti i template devono essere precompilati tramite una fase di build.

  • I file di build che non includono .runtime sono build complete: includono il compilatore e supportano la compilazione dei template direttamente nel browser. Tuttavia, aumenteranno il payload di circa 14 KB.

Le nostre impostazioni di tooling predefinite utilizzano la build solo runtime poiché tutti i template negli SFC (Single-File Components) vengono precompilati. Se, per qualche motivo, hai bisogno della compilazione dei template nel browser anche con una fase di build, puoi farlo configurando lo strumento di build per fare un alias di vue a vue/dist/vue.esm-bundler.js invece.

Se stai cercando un'alternativa più leggera per l'uso senza fase di build, dai un'occhiata a petite-vue.

Supporto IDE ​

  • La configurazione IDE consigliata è VSCode + l'estensione Volar. L'estensione fornisce evidenziazione della sintassi, supporto TypeScript e intellisense per le espressioni dei template e le props dei componenti.

    TIP

    Volar sostituisce Vetur, la nostra precedente estensione ufficiale di VSCode per Vue 2. Se hai Vetur attualmente installato, assicurati di disabilitarlo nei progetti Vue 3.

  • WebStorm fornisce anche un ottimo supporto integrato per i Vue SFC.

  • Altri IDE che supportano il Language Service Protocol (LSP) possono sfruttare le funzionalità principali di Volar tramite LSP:

I Devtools ​

Guarda una video lezione gratuita su Vue School.

L'estensione dei devtools per il browser di Vue ti consente di esplorare l'albero dei componenti di un'app Vue, ispezionare lo stato dei singoli componenti, monitorare gli eventi di gestione dello stato e profilare le prestazioni.

devtools screenshot

TypeScript ​

Articolo principale: Using Vue with TypeScript.

  • Volar fornisce il controllo dei tipi per gli SFC utilizzando blocchi <script lang="ts">, comprese le espressioni dei template e la validazione delle props tra i componenti.

  • Usa vue-tsc per eseguire lo stesso controllo dei tipi da riga di comando, o per generare file d.ts per gli SFC.

Testing ​

Articolo principale: Guida al testing.

  • Cypress è consigliato per i test end-to-end. Può anche essere utilizzato per i test dei componenti per gli SFC di Vue tramite il Cypress Component Test Runner.

  • Vitest è un runner di test creato dai membri del team Vue / Vite che si concentra sulla velocità. È progettato specificamente per le applicazioni basate su Vite per fornire lo stesso ciclo di feedback istantaneo per il testing unitario / dei componenti.

  • Jest può essere utilizzato con Vite tramite vite-jest. Tuttavia, questa opzione è consigliata solo se hai suite di test esistenti basate su Jest che devi migrare a una configurazione basata su Vite, poiché Vitest fornisce funzionalità simili con un'integrazione molto più efficiente.

Linting ​

Il team Vue mantiene eslint-plugin-vue, un plugin ESLint che supporta regole di linting specifiche per gli SFC.

Gli utenti che in passato hanno utilizzato Vue CLI potrebbero essere abituati a configurare i linters tramite i loader di webpack. Tuttavia, quando si utilizza una configurazione di build basata su Vite, la nostra raccomandazione generale è la seguente:

  1. npm install -D eslint eslint-plugin-vue, poi segui la guida alla configurazione di eslint-plugin-vue.

  2. Configura le estensioni IDE di ESLint, ad esempio ESLint per VSCode, in modo da ottenere feedback dal linter direttamente nel tuo editor durante lo sviluppo. Questo evita anche un costo di linting non necessario durante l'avvio del server di sviluppo.

  3. Esegui ESLint come parte del comando di build di produzione, in modo da ottenere un feedback completo dal linter prima della distribuzione in produzione.

  4. (Opzionale) Configura strumenti come lint-staged per eseguire automaticamente il linting dei file modificati al momento del commit su git.

Formattazione ​

  • L'estensione Volar per VSCode fornisce la formattazione per gli SFC di Vue direttamente.

  • In alternativa, Prettier fornisce il supporto integrato per la formattazione degli SFC di Vue.

Integrazioni con blocchi personalizzati nei SFC ​

I blocchi personalizzati vengono compilati in importazioni nello stesso file Vue con diversi query di richiesta. Spetta al tool di build sottostante gestire queste richieste di importazione.

  • Se si utilizza Vite, dovrebbe essere utilizzato un plugin Vite personalizzato per trasformare i blocchi personalizzati corrispondenti in JavaScript eseguibile. Esempio

  • Se si utilizza Vue CLI o webpack "puro", dovrebbe essere configurato un loader webpack per trasformare i blocchi corrispondenti. Esempio

Pacchetti a basso livello ​

@vue/compiler-sfc ​

Questo pacchetto fa parte del monorepo del core di Vue ed è sempre pubblicato con la stessa versione del pacchetto principale vue. È incluso come dipendenza del pacchetto principale vue e reso disponibile tramite un proxy come vue/compiler-sfc, quindi non è necessario installarlo singolarmente.

Il pacchetto stesso fornisce utility a livello inferiore per elaborare gli SFC di Vue ed è destinato solo agli autori di strumenti che devono supportare gli SFC di Vue in strumenti personalizzati.

TIP

Si preferisce sempre utilizzare questo pacchetto tramite l'importazione profonda vue/compiler-sfc, poiché ciò garantisce che la sua versione sia sincronizzata con il runtime di Vue.

@vitejs/plugin-vue ​

Plugin ufficiale che fornisce il supporto per gli SFC di Vue in Vite.

vue-loader ​

Il loader ufficiale che fornisce il supporto per gli SFC di Vue in webpack. Se stai utilizzando Vue CLI, consulta anche la documentazione sulla modifica delle opzioni di vue-loader in Vue CLI.

Altri playground online ​

Modifica questa pagina su GitHub