Vue

Come creare componenti in Vue CLI

Come creare componenti in Vue CLI
Vue.js fornisce il Vue CLI per fornire il comando vue all'interno del terminale per eseguire rapidamente l'impalcatura di un nuovo progetto di Vue.js ed esegui Vue.js utilizzando il vue servire comando. Vue.js fornisce anche l'interfaccia utente grafica per la gestione dei progetti utilizzando il vue ui comando. Vue.js è riconosciuto come la combinazione di due framework spettacolari, Angular e React, utilizzando la sintassi dei modelli di Angular e il metodo props di React. Fornisce il tradizionale modo HTML e CSS per creare un componente e, in questo post, esamineremo il processo di creazione e comprensione dei componenti in Vue CLI.

Prerequisiti

Prima di iniziare con questo, ci sono alcuni prerequisiti che devi avere:

Verifica l'installazione di Vue CLI

Prima di tutto, assicurati di avere l'ultima Vue CLI installata sul tuo sistema. Puoi verificare che Vue CLI sia installato o meno sul nostro sistema digitando il comando indicato di seguito:

$ vue --version

Se è installato, nel terminale verrà stampata l'ultima versione di Vue CLI. Altrimenti, se non è installato, puoi utilizzare il gestore di pacchetti NPM o il gestore di pacchetti Yarn per installare Vue CLI. Per installarlo utilizzando il gestore di pacchetti NPM, è necessario digitare il comando indicato di seguito nel terminale:

$ npm install -g @vue/cli

Nel comando sopra, il -g flag viene utilizzato per installare Vue CLI a livello globale sul tuo sistema.

Una volta che Vue CLI è completamente installata, puoi verificarla digitando il comando indicato di seguito:

$ vue --version

Avrai l'ultima versione di Vue CLI nell'output.

Creazione del progetto

Ora, supponiamo che tu stia per configurare l'intero progetto Vue da solo. In tal caso, non è una buona scelta reinventare la ruota; il progetto Vue può essere creato utilizzando il vue comando nel terminale perché Vue CLI fornisce i modelli già generati per iniziare con il progetto Vue.

Per creare l'applicazione Vue, digita semplicemente il comando indicato di seguito nel terminale:

$ vue create nome-progetto

Assicurati di sostituire il Nome del progetto con il nome del progetto desiderato e premi accedere.

Dopo un paio di secondi, verrà richiesto di selezionare il preset predefinito o di selezionare manualmente alcune funzionalità.

Se vuoi avere alcune funzionalità personalizzate, seleziona "Seleziona manualmente le funzioni", premi Invio e ti verranno richieste alcune opzioni come selezionare la versione Vue, aggiungere Vuex o Router. Seleziona l'opzione desiderata e premi accedere.

Rispondi ad alcune domande di configurazione necessarie e salva il preset per progetti futuri.

Il progetto Vue verrà creato in un attimo utilizzando la CLI Vue e puoi iniziare lo sviluppo in Vue.js.

Avvio dell'applicazione Vue

Una volta creato il progetto Vue, puoi avviare il progetto navigando prima nella directory del progetto utilizzando il comando cd nel terminale:

$ cd nome-progetto

Nella directory del progetto, avvia l'applicazione Vue digitando il comando indicato di seguito nel terminale:

$ npm run serve

Dopo l'accensione dell'applicazione Vue, visita il http://localhost:8080 nella barra degli indirizzi del tuo browser preferito:

Avrai la schermata di benvenuto di Vue.js progetto.

Creazione di un componente in Vue

Per creare un componente nel progetto Vue, creare un .vue file nel componenti cartella e forniscigli il nome che preferisci.

Ora, in questo appena creato .vue file, puoi scrivere HTML, Javascript e CSS nel