Un tutorial di Vue.js per sviluppatori principianti: apprendi le basi e usa questa struttura di partenza

Tutorial Vue.js per sviluppatori principianti


Ogni volta che inizi a utilizzare le nuove tecnologie nel tuo flusso di sviluppo, potresti sentirti almeno un po ‘intimidito. Soprattutto quando ci sono una miriade di pacchetti npm in circolazione. Mescolare e abbinare le cose a volte può richiedere molto tempo e fatica, e di solito è frustrante. È qui che entra in gioco il seguente tutorial di Vue.js per sviluppatori principianti.

Che cos’è Vue.js? Perché dovresti preoccuparti?

Vue.js o Vue in breve è un framework JavaScript per la creazione di interfacce utente. Rispetto ad altri framework, come Angular o React, Vue è più accessibile e non ha una curva di apprendimento così ripida.

Vue è anche modulare e ti permetterà di dividere il codice in componenti riutilizzabili. Ognuno di essi ha il proprio markup HTML, CSS e codice JavaScript.

Qual è lo scopo di questo tutorial di Vue.js?

Lo scopo di questo breve tutorial su Vue.js è di fornirti alcune impalcature su cui puoi costruire e sperimentare Vue. Daremo un’occhiata a una configurazione di base di un’app Vue nella dashboard di WordPress.

(Nota; non ti insegneremo Vue in sé in questa guida, ma puoi andare avanti e saperne di più sul framework dal guida ufficiale dopo aver impostato il progetto qui, sul quale puoi continuare a sperimentare dopo che abbiamo terminato. Inoltre, consigliamo alcune delle più interessanti librerie di componenti dell’interfaccia utente Vue che rendono più efficiente il processo di sviluppo.)

Quello che faremo è usare un modello predefinito per i plugin di WordPress usando Vue. Puoi trovarlo nel seguente repository GitHub se vuoi dare un’occhiata più in profondità: https://github.com/abaicus/vue-wp-bootstrap.

Esercitazione Vue.js: prerequisiti

Ci sono alcune cose che dovresti già aver impostato sul tuo computer per continuare a seguire questa guida:

In primo luogo, avrai bisogno di uno stack LAMP: puoi utilizzare XAMPP su Windows o Mac o Local by Flywheel su Mac, quindi impostare una nuova installazione locale di WordPress.

Assicurati di avere il Gestore di pacchetti NodeJS (npm) installato sul tuo computer. Sarà inoltre necessario installare altri due pacchetti tramite il terminale: l’interfaccia della riga di comando di Vue e lo strumento di inizializzazione del modello di Vue. Così:

$ npm installa -g @ vue / cli
$ npm installa -g @ vue / cli-init

Dopo aver installato queste due dipendenze, è necessario modificare la directory attiva nella directory wp-content / plugins dell’istanza di WordPress locale e quindi eseguire il comando seguente:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

Successivamente, ti verrà chiesto di rispondere ad alcune domande relative alla configurazione del tuo progetto.

Per il prompt Build, basta andare avanti e scegliere la prima opzione per ora "Runtime + Compiler: consigliato per la maggior parte degli utenti".

Se lo desideri, puoi abilitare la linter ESLint. Rileverà eventuali errori di lanugine nel tuo progetto, ma non devi necessariamente preoccuparti di questo in questo momento.

Gli hook di Commit Lint e Pre-Commit hanno lo scopo di controllare i messaggi di commit e il codice prima di inviare un commit a GitHub – per mantenere tutto in ordine e ben formattato.

Finirai con un terminale che assomiglia più o meno a questo dopo aver finito:

Puoi andare avanti e seguire le istruzioni sullo schermo. Cambia la directory nella directory del plugin appena generata ed esegui i comandi mostrati nel prompt del terminale. Questo metterà in funzione la tua applicazione, in attesa di modifiche all’interno del tuo codice e trasferirà il codice Vue in JavaScript.

Che cosa fa?

Non tanto. Questa è solo un’applicazione di base che visualizza alcuni dati del backend. Non molto Vue sotto il cofano. Puoi andare alla pagina Dashboard dei plugin e attivarla. Aggiungerà una nuova pagina nel menu di amministrazione. Dopo averlo visitato, troverai una pagina del dashboard con due stringhe:

La struttura del ponteggio del plugin

Diamo un’occhiata alla struttura dei file per il plugin appena generato. Ignoreremo la maggior parte dei file di configurazione in questo tutorial di Vue.js in modo che possiamo concentrarci sulla struttura dell’applicazione:

Innanzitutto, abbiamo il file plugin.php, che è il punto di ingresso per il plugin reale. Qui abbiamo il principale Collegare classe. È qui che vengono inclusi ed eseguiti i componenti principali dell’applicazione.

Successivamente, c’è il file package.json in cui sono definite tutte le dipendenze e un sacco di altre informazioni sul progetto. La parte in cui potresti essere interessato vive sotto il "script" campo. Lì, hai tutti i comandi che puoi eseguire con il prefisso run npm. Quelli importanti, per ora, dovrebbero essere npm run dev (che costruisce l’applicazione per lo sviluppo) e npm run build (che dovresti eseguire una volta che sei pronto a distribuire la tua app per la produzione). Gli altri comandi sono adiacenti a questi due o fanno altre cose di cui non dovresti preoccuparti in questo momento.

All’interno della directory include, ci sono tre file:

  • La classe rest.php al momento non fa nulla, ma hai già una struttura per aggiungere i tuoi percorsi RestAPI
  • La classe assets.php gestisce lo stile e l’accodamento degli script. Qui, il file JavaScript è localizzato per passare i dati di partenza da PHP alla nostra app Vue. Al momento, ci sono solo due messaggi inviati, ma puoi includere tutto ciò che desideri.
  • Il file admin.php è quello che si occupa dell’aggiunta di una nuova pagina nella dashboard e del rendering della pagina del plugin effettiva. Noterai che l’app stessa viene visualizzata come due tag vuoti all’interno della funzione plugin_page (). Questo perché JavaScript gestirà il rendering effettivo dell’applicazione dopo il caricamento.

All’interno della directory delle risorse, troverai altre quattro directory:

  • La directory src: i file sorgente per la nostra app Vue, di cui parleremo più avanti.
  • La directory scss – i file di stile SCSS da cui generiamo il foglio di stile CSS.
  • La directory js – il codice traspilato che viene generato dai nostri file nella directory src.
  • La directory css – lo stile compilato dai file SCSS.

La directory src e i file modello Vue

All’interno di questa directory, ci sono due file: main.js e App.vue. Il file main.js è il punto di ingresso per l’applicazione. Collega il componente dell’app Vue all’elemento DOM con l’id corrispondente.

/ * jshint esversion: 6 * /
importa Vue da ‘vue’
importa l’app da ‘./App.vue’

window.addEventListener (‘load’, function () {
new Vue ({// eslint-disable-line no-new
el: ‘# mvdp-app’,
componenti: {App},
render: (h) => h (App)
})
})

L’effettivo markup dell’applicazione è all’interno del modello App.vue:

/ * jshint esversion: 6 * /

{{}} This.strings.title

{{}} This.strings.description

/ * MVDP globale * /
esportazione predefinita {
data () {
ritorno {
stringhe: MVDP.strings
}
},
nome: ‘App.vue’
}

Nel frammento sopra puoi vedere che stiamo usando le stringhe che abbiamo localizzato nella classe Asset. Una delle grandi caratteristiche di Vue è che il codice del componente è organizzato in modo ordinato in template, script e stile, rendendo semplice la comprensione della struttura.

Ecco fatto, ora hai un solido punto di partenza per qualsiasi cosa tu voglia sviluppare ulteriormente con Vue.js! Spero che questo tutorial di Vue.js sia stato utile.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout, presentazione e modifica di Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map