Come creare componenti in vue cli
Prerequisiti
Prima di iniziare con questo, ci sono alcuni prerequisiti che devi avere:
- Conoscenza di base di HTML, CSS e JavaScript.
- Nodo.JS installato sul tuo sistema operativo.
Verifica l'installazione di Vue CLI
Prima di tutto, assicurati di avere l'ultima CLI VUE installata sul tuo sistema. È possibile verificare che Vue CLI sia installato o meno sul nostro sistema digitando il comando indicato di seguito:
$ vue -version
Se è installato, avrai l'ultima versione di Vue CLI stampata nel terminale. Altrimenti, se non è installato, è possibile utilizzare il gestore pacchetti npm o il gestore pacchetti di filati per installare VUE CLI. Per installarlo utilizzando il gestore dei pacchetti NPM, è necessario digitare il comando indicato di seguito nel terminale:
$ npm install -g @vue/cli
Nel comando sopra, il -G Il flag viene utilizzato per l'installazione di Vue CLI a livello globale sul sistema.
Una volta installata la CLI VUE, è possibile 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 imposterà 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é la CLI VUE 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 crea il nome di progetto
Assicurati di sostituire il file Nome del progetto con il nome del progetto desiderato e colpisci accedere.
Dopo un paio di secondi, richiederà la selezione del preimpostazione predefinita o la selezione manualmente di alcune funzionalità.
Se vuoi avere alcune funzionalità personalizzate, seleziona "Seleziona manualmente le funzionalità", Premi Invio e ti verrà richiesto alcune opzioni come la selezione della versione VUE, l'aggiunta di Vuex o il router. Seleziona l'opzione desiderata e premi accedere.
Rispondi ad alcune domande di configurazione necessarie e salva il preimpostazione per i progetti futuri.
Il progetto VUE verrà creato tra un po 'di tempo utilizzando la CLI VUE e puoi iniziare lo sviluppo in VUE.js.
Avvio dell'applicazione VUE
Una volta creato il progetto VUE, è possibile avviare il progetto navigando prima nella directory del progetto utilizzando il comando CD nel terminale:
$ CD Project-Name
Nella directory del progetto, avviare l'applicazione VUE digitando il comando indicato di seguito nel terminale:
$ npm run serve
Dopo l'accensione dell'applicazione Vue, visitare http: // localhost: 8080 nella barra degli indirizzi del tuo browser preferito:
Avrai la schermata di benvenuto del Vue.Progetto JS.
Creazione di un componente in vue
Per creare un componente nel progetto VUE, creare un .Vue file in componenti cartella e fornirgli il nome di tua scelta.
Ora, in questo recentemente creato .Vue file, puoi scrivere rispettivamente HTML, JavaScript e CSS in, e tag.
Apri il .Vue file e scrivi il codice che vuoi scrivere. Per esempio:
Un nuovo componente
Questo è un testo all'interno del nuovo componente.
Una volta che hai finito con la parte HTML, dai a questo componente un nome nel tag come mostrato nello snippet di codice di seguito:
Dopo aver creato correttamente il componente, vediamo come importarlo e usarlo su qualche altra pagina o componente.
Importazione di un componente in Vue
La sintassi di importazione per l'importazione di un componente in qualsiasi altro componente di Vue è piuttosto semplice e facile; Devi solo importare il componente all'interno del tag script usando la sintassi ES6 come mostrato nello snippet di codice di seguito:
Dopo aver importato correttamente il componente, tutto ciò che devi fare è creare un oggetto con il nome di componenti e fornire il nome in componenti oggetto come mostrato di seguito:
Ora puoi usarlo ovunque all'interno del tag del componente. Ad esempio, se vogliamo importarlo nel App.Vue, La sintassi sarebbe così:
Dopo aver completato tutta questa configurazione, salva ogni file che hai cambiato e torna al browser
Puoi testimoniare nello screenshot allegato che il componente viene importato correttamente e perfettamente bene sulla pagina web.
Conclusione
Creazione, importazione e utilizzo di un componente all'interno di qualsiasi altro componente di Vue.JS è facile come dirlo. In questo post, attraversiamo l'intero processo di creazione, aggiunta e utilizzo di un componente in Vue.js.