Un tutorial de Vue.js per a desenvolupadors principiants: apreneu els fonaments bàsics i utilitzeu aquesta estructura de visualització inicial

Un tutorial de Vue.js per a desenvolupadors principiants: apreneu els fonaments bàsics i utilitzeu aquesta estructura de visualització inicial

Un tutorial de Vue.js per a desenvolupadors principiants: apreneu els fonaments bàsics i utilitzeu aquesta estructura de visualització inicial
СОДЕРЖАНИЕ
02 июня 2020

Tutorial de Vue.js per a desenvolupadors principiants


Sempre que comenceu a utilitzar noves tecnologies en el vostre flux de desenvolupament, potser us sentireu almenys una mica intimidats. Sobretot quan hi ha una gran quantitat de paquets de migdia a la ciutat. La barreja i la combinació de coses a vegades poden requerir molt de temps i esforç, i sol ser frustrant. Aquí és quan entra en joc el següent tutorial de Vue.js per a desenvolupadors principiants.

Què és Vue.js? Per què t’ha de preocupar??

Vue.js o Vue per a short és un marc de JavaScript per crear interfícies d’usuari. En comparació amb altres frameworks, com Angular o React, Vue és més accessible i no té una empenta tan corrent..

Vue també és modular i us permetrà dividir el codi en components reutilitzables. Cadascun d’ells amb el seu propi codi HTML, CSS i codi JavaScript.

Quin és l’abast d’aquest tutorial Vue.js?

L’objectiu d’aquest breu tutorial de Vue.js és proporcionar-vos alguns bastides sobre les quals podeu crear i experimentar amb Vue. Mirem una configuració bàsica d’una aplicació Vue a la taula de comandaments de WordPress.

(Nota; no us ensenyarem Vue per se en aquesta guia, però podeu avançar i obtenir més informació sobre el marc de la guia oficial després d’haver configurat el projecte aquí, amb el que podreu continuar experimentant un cop acabats. A més, recomanem algunes de les biblioteques de components de Vue UI més interessants que facin més eficient el procés de desenvolupament.)

El que farem és utilitzar una plantilla predefinida per als complements de WordPress mitjançant Vue. Podeu trobar-lo al següent dipòsit de GitHub si voleu aprofundir: https://github.com/abaicus/vue-wp-bootstrap.

Tutorial de Vue.js: requisits previs

Hi ha algunes coses que ja hauríeu d’haver configurades a l’ordinador per continuar seguint aquesta guia:

En primer lloc, necessitareu una pila LAMP: podeu utilitzar XAMPP a Windows o Mac o a Local by Flywheel a Mac i, a continuació, configureu-vos una nova instal·lació local de WordPress..

Assegureu-vos que teniu el Gestor de paquets NodeJS (Npm) instal·lat al vostre equip. També haureu d’instal·lar dos paquets més a través del terminal: el Vue CLI i l’eina d’inicialització de la plantilla Vue. Així:

$ npm instal·lar -g @ vue / cli
$ npm install -g @ vue / cli-init

Després d’haver instal·lat aquestes dues dependències, haureu de canviar el directori actiu al directori wp-content / plugins de la instància de WordPress local i executar allà la següent comanda:

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

A continuació, se us demanarà que respongueu algunes preguntes sobre la configuració del vostre projecte.

Per al símbol de creació, només cal que endavant i escolliu la primera opció "Runtime + Compiler: recomanable per a la majoria dels usuaris".

Si voleu, podeu activar la lintería ESLint. Es detectarà qualsevol error de pel·lícula en el vostre projecte, però no haureu de preocupar-vos per això ara mateix.

Els enganxaments de Commit Lint i Pre-Commit tenen la finalitat de comprovar els vostres missatges de compromís i el codi abans d’enviar un compromís a GitHub: per mantenir-ho tot ordenat i ben formatat..

Acabaràs amb un terminal que sembli més o menys així un cop acabat:

Podeu avançar i seguir les instruccions que apareixen a la pantalla. Canvieu el directori al directori de complements recent generat i executeu les ordres que es mostren a la finestra del terminal. D’aquesta manera, la vostra aplicació es posarà en funcionament, a l’espera que es produeixin canvis al codi i que es transferirà el codi Vue a JavaScript.

Què fa?

No gaire. Es tracta només d’una aplicació bàsica que mostra algunes dades del backend. No hi ha molt de Vue sota el capó. Podeu dirigir-vos a la pàgina del Tauler de control de plugins i activar-la. Afegirà una pàgina nova al vostre menú d’administració. En navegar-hi, trobareu una pàgina de tauler amb dues cadenes:

L’estructura de bastides del complement

Vegem l’estructura de fitxers del connector recent generat. Ignorarem la majoria dels fitxers de configuració d’aquest tutorial de Vue.js per tal de poder centrar-nos en l’estructura de l’aplicació:

Primer, tenim el fitxer plugin.php, que és el punt d’entrada del connector real. Aquí, tenim el principal Connectar classe. Aquí és on s’inclouen i s’executen els components principals de l’aplicació.

A continuació, hi ha el fitxer package.json on es defineixen totes les dependències i un munt d’altres dades del projecte. La part per la qual pot estar interessat viu sota la "scripts" camp. Allà, teniu totes les ordres que podeu executar amb el prefix npm run. Els importants, de moment, haurien de ser npm run dev (que crea l’aplicació per al desenvolupament) i npm run build (que hauríeu d’executar un cop estigueu preparats per desplegar la vostra aplicació per a la producció). La resta de comandaments són adjacents a aquestes dues opcions o fer altres coses que en aquest moment no hauríeu de preocupar.

Dins del directori inclòs, hi ha tres fitxers:

  • La classe rest.php no fa res de moment, però ja teniu una estructura per afegir les vostres rutes RestAPI
  • La classe asset.php gestiona l’estil i el guió que requereixen. Aquí, el fitxer JavaScript es localitza per passar les dades d’inici de PHP a la nostra aplicació Vue. De moment, només hi ha dos textos enviats, però podeu incloure tot el que vulgueu.
  • El fitxer admin.php és el que s’encarrega d’afegir una pàgina nova al tauler i de fer la pàgina de complements real. Notareu que l’aplicació en sí es mostra com dues etiquetes buides dins de la funció plugin_page (). Això es deu al fet que el JavaScript gestionarà la representació real de l’aplicació després de la càrrega.

Dins el directori d’actius, hi trobareu quatre directoris més:

  • El directori src: els fitxers font de la nostra aplicació Vue, de la qual parlarem més endavant.
  • El directori scss: fitxers d’estil SCSS a partir dels quals generem el full d’estils CSS.
  • El directori js: el codi transpil·lat que es genera a partir dels nostres fitxers del directori src.
  • El directori css: l’estil compilat dels fitxers SCSS.

El directori src i els fitxers de plantilla de Vue

Dins aquest directori, hi ha dos fitxers: main.js i App.vue. El fitxer main.js és el punt d’entrada de l’aplicació. Adjunta el component d’aplicació Vue a l’element DOM amb l’ID corresponent.

/ * esversió jshint: 6 * /
importar Vue de “vue”
importa l’aplicació des de “./App.vue”

window.addEventListener (‘càrrega’, funció () {
new Vue ({// eslint-disable-line-no-new)
el: ‘# mvdp-app’,
components: {App},
renderitzar: (h) => h (aplicació)
})
})

El marc real de l’aplicació es troba a la plantilla App.vue:

/ * esversió jshint: 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * MVDP global * /
exportació predeterminada {
data () {
tornar {
cadenes: MVDP.strings
}
},
nom: “App.vue”
}

Podeu veure dins del fragment anterior que estem fent servir les cadenes que vam localitzar a la classe dels recursos. Una de les grans característiques de Vue és que el codi del component està ordenat perfectament en plantilla, script i estil que facilita la comprensió de l’estructura.

Això sí, ara teniu un punt de partida sòlid per a tot el que vulgueu desenvolupar amb Vue.js. Espero que aquest tutorial de Vue.js us sigui d’utilitat.

No oblideu unir-se al nostre curs d’accidents per agilitzar el vostre lloc de WordPress. Amb algunes solucions senzilles, podeu reduir fins i tot un 50-80% del temps de càrrega:

Maquetació, presentació i edició de Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector