Instrumente și practici pentru a accelera procesul de dezvoltare Vue.js

De-a lungul acestui tutorial, vom analiza practicile care ar trebui adoptate, lucrurile care ar trebui evitate și vom arunca o privire mai atentă la câteva instrumente utile pentru a ușura scrierea Vue.js. Mă voi concentra mai ales pe Vue 2, deoarece majoritatea oamenilor și organizațiilor încă folosesc versiunea mai veche. Niciun motiv să vă faceți griji, deoarece majoritatea lucrurilor menționate aici se aplică încă pentru Vue 3, deoarece este doar o versiune supraalimentată și mai rapidă. Totuși, dacă cunoașteți deja Vue 2 și doriți doar să aflați ce este nou în Vue 3, atunci puteți consulta ghidul de migrare pentru a afla mai multe.

Notă: acest articol se adresează atât începătorilor, cât și dezvoltatorilor experimentați care doresc să-și îmbunătățească abilitățile Vue.js. Cunoștințele de bază despre JavaScript și Vue.js vor fi de mare beneficiu pe măsură ce vă deplasați pe parcursul acestui tutorial.

Structurarea proiectului bazată pe module vs. bazată pe fișiere

Să începem prin a ne uita la modul de structurare a fișierelor pe module, la modul în care structurarea bazată pe fișiere ar putea să nu fie o idee bună atunci când vine vorba de construirea de proiecte la scară și la modul de structurare a modulelor pentru a se potrivi cu cerințele afacerii.

Pe măsură ce creăm recent un proiect cu Vue.js CLI, primim structura de fișiere implicită care a fost mapată de echipa Vue.js. Utilizarea structurii de fișiere propuse nu este o modalitate proastă de a vă structura proiectul în sine, dar pe măsură ce proiectul crește, veți avea nevoie de o structură mai bună pe măsură ce codul dvs. devine grupat și mai greu de navigat și de accesat fișierele.

Aici intră în joc metoda bazată pe module de structurare a proiectului .

O modalitate proastă de a vă structura proiectul va implica stocarea diferitelor date care nu sunt legate de același folder, cum ar fi componenta de notificare și componenta de autentificare în folderul componentă rădăcină:

 +-- src/ | +-- assets/ | +-- logo.png | +-- userprofile.png | +-- components | +-- NotificationBar.vue | +-- LoginForm.vue | +-- DashboardInfo.vue | +-- AuthenticationModal.vue | +-- main.js

Deci, ceea ce vrem să facem este să decuplăm proiectul pe baza logicii și preocupărilor de afaceri, astfel încât să avem ceva de genul modul de autentificare, modul de produs, modul de serviciu și așa mai departe. În acest fel, ne putem asigura că orice lucru referitor la această caracteristică particulară este introdus în modul, făcând codul nostru mai ordonat și navigarea nu atât de greu.

 +-- modules/ | +-- AuthModule/ | +-- assets/ | +-- userprofile.png | +-- Components/ | +-- Authentication.vue | +-- login.vue | +-- NotificationModule | +-- assets/ | +-- Alert.png | +-- Components/ | +-- NotificationBar.vue | +-- ProductModule/

Module de organizare

Există două moduri prin care vă puteți organiza modulele:

1. module de bază Vue.js,
2. Module de caracteristici ale aplicației.

Modulele de bază Vue.js sunt aici pentru a vă facilita dezvoltarea Vue.js. Module precum modulul de service care conține toate cererile de rețea necesare companiei sunt păstrate în acest modul de bază și toate cererile de rețea corespunzătoare sunt făcute de aici.

Modularizarea aplicației în funcție de caracteristici este o modalitate excelentă de a crea o structură de fișiere mai bună în aplicația dvs. Acest lucru va permite separarea preocupărilor dvs. și vă va asigura că lucrați numai la caracteristica căreia dvs. sau echipa dvs. sunteți alocați. Un alt avantaj al modularizării în funcție de caracteristică este mentenabilitatea și capacitatea sa de a evita datoria tehnică pe termen lung, acolo unde ar putea fi nevoie de o reluare a aplicației.

Acum, ori de câte ori este nevoie de a adăuga, elimina sau modifica starea unei anumite caracteristici, tot ce trebuie să facem este să navigăm la acea caracteristică și să facem modificări fără a întrerupe aplicația. Această metodă de modularizare permite dezvoltarea eficientă a programului și depanarea și modificarea ușoară în aplicația noastră.

De exemplu, o funcție de plată atribuită dvs. și echipei dvs. este un moment bun pentru a implementa un modul de payout care încapsulează toate funcționalitățile și datele pentru această funcție.

 +-- modules/ | +-- payout/ | +-- index.js | +-- assets/ | +-- Components/ | +-- PayOut.vue | +-- UserInfo.vue | +-- store/ | +-- index.js | +-- actions.js | +-- mutations.js | +-- Test/

Pe baza caracteristicii noastre de plată de mai sus, avem un fișier index.js pentru a importa și utiliza pluginuri asociate numai cu modulul de plată. Dosarul de materiale găzduiește toate activele (imagini și stiluri) pentru modul. Dosarul nostru de componente conține componente legate de caracteristica de plată. Dosarul magazinului conține acțiunile noastre, mutațiile și instrumentele folosite pentru a gestiona starea acestei funcții. Există, de asemenea, un folder de testare pentru a efectua testarea acestei caracteristici.

Utilizarea directivelor personalizate

Directivele din Vue.js sunt o modalitate prin care noi îi spunem lui Vue.js să facă ceva sau să manifeste un anumit comportament pentru noi. Exemple de directive sunt v-if , v-model , v-for , etc. În aplicația noastră Vue.js, când folosim ceva de genul v-model pentru a lega datele la o intrare într-un formular, oferim Vue.js codificați anumite instrucțiuni care sunt specifice Vue.js. Dar dacă vrem o anumită acțiune sau comportament pe care directiva noastră Vue.js nu ne permite să o facem, ce facem atunci? Putem crea ceea ce numim directive personalizate.

Înregistrarea directivelor vamale și a cârligelor de directive

Putem înregistra directive în două moduri:

1. La nivel global
   În fișierul nostru main.js
2. La nivel local
   În componenta noastră.

Cârligele în directive sunt ca metodele care se declanșează atunci când are loc o anumită acțiune în directivele noastre. La fel ca cârligele ciclului de viață ale cârligelor create și montate , ni se oferă cârlige pentru a le folosi în directivele noastre.

Să presupunem că construim o aplicație și într-una dintre paginile noastre dorim ca culoarea de fundal să se schimbe întotdeauna de fiecare dată când navigăm la ea. Vom numi această directivă colorChange . Putem realiza asta cu ajutorul unei directive.

Șablonul nostru arată cam așa:

 <template> <div v-color-change> <HelloWorld msg="Hello Vue in CodeSandbox!"/> </div> </template>

Putem vedea directiva personalizată de mai sus, dar pentru a o face să funcționeze, în fișierul nostru main.js adăugăm:

 // custom directive Vue.directive("color-change", { bind: function (el) { const random = Math.floor(Math.random() * 900000) + 100000; el.style.backgroundColor = `#${random}` } })

Directiva Vue.js de mai sus ia numele directivei ca prim argument, apoi un Object ca al doilea argument care controlează comportamentul directivelor. bind este unul dintre cârligele despre care am vorbit și va fi numit odată ce directiva este legată de element. Acceptă următoarele argumente:

• el
  Acesta este nodul element la care am atașat directiva.
• binding
  Conține proprietăți utile care modifică comportamentul directivei.
• vnode
  Acesta este nodul virtual al Vue.js.

Am creat un set aleatoriu de numere din 6 cifre, astfel încât să-l putem folosi pentru a schimba codul hexadecimal al stilului nostru de culoare de fundal.

Cele mai bune practici la scrierea directivelor personalizate

Am creat o directivă personalizată pentru cele de mai sus, dar trebuie să luăm notă de câteva lucruri. În afară de el , nu modificați niciodată argumentele hook și asigurați-vă că argumentele sunt doar pentru citire, deoarece argumentele hook sunt obiecte cu metode native care pot provoca efecte secundare dacă sunt modificate. Dacă este necesar, utilizați setul de date Vue.js pentru a partaja informații între hook-uri.

Dacă folosim versiunea CLI a Vue.js, directivele personalizate ar trebui să fie în fișierul main.js , astfel încât toate fișierele .vue să poată avea acces la el. Numele directivei dvs. ar trebui să fie ceva care să rezoneze cu ceea ce face directiva respectivă, foarte descriptiv despre funcționalitatea directivei.

Puteți vedea și juca mai mult cu codul în această casetă de coduri pe care am creat-o. De asemenea, puteți citi mai multe despre acest lucru în documentele Vue.

Controlul actualizărilor

Sistemul de reactivitate Vue.js este puternic într-un fel încât detectează lucrurile care au nevoie de actualizare și le actualizează fără ca tu, ca dezvoltator, să faci nimic. De exemplu, redarea unei pagini de fiecare dată când navigăm la ea. Uneori, cazul poate fi diferit, deoarece s-ar putea să ne trezim să scriem cod care ne impune să forțăm o actualizare.

Notă: dacă aveți nevoie să forțați o actualizare, ceea ce este o ocazie rară, atunci poate fi necesar să înțelegeți cu adevărat Reactivitatea Vue și cum să utilizați corect elementele de recuzită în comunicarea datelor dinamice.

Forțarea unei actualizări

În cele mai multe cazuri, atunci când valoarea din obiectul de date vue se modifică, vizualizarea se redă automat din nou, dar nu este întotdeauna așa. Un caz clasic din punctul nostru de vedere, nu re-rendarea este atunci când folosim un v-for în șablonul nostru pentru a trece peste unele date din obiectul de date și nu adăugăm o valoare :key în bucla v-for .

 <div v-for="item in itemsArray" :key="item">

Acest lucru oferă Vue.js o modalitate de a urmări identitatea fiecărui nod și de a reda vizualizarea pentru orice modificare.

O situație rară care ne poate determina să forțăm o actualizare este dacă setăm în mod intenționat sau accidental un element de matrice cu indexul.

 var app = new Vue({ data: { items: ['1', '2'] } }) app.items[1] = '7' //vue does not notice any change

Există diferite moduri de a forța o actualizare sau de a reda. Unele sunt practici foarte proaste, cum ar fi folosirea v-if pentru a reda pagina când este true , iar când este falsă, componenta dispare și nu mai există. Aceasta este o practică proastă, deoarece șablonul nu este niciodată distrus, ci doar ascuns până când poate fi reutilizat.

 <template> <div v-if="show"> <button @click="rerender">re-render</button> </div> </template>

 <script> export default { data() { return { show: true, }; }, methods: { rerender() { this.show= false; this.$nextTick(() => { this.show = true; }); } } }; </script>

În codul de mai sus, starea de show este inițial setată la adevărat, ceea ce înseamnă că componenta noastră este redată inițial. Apoi, când facem clic pe buton, funcția rerender( ) este apelată și starea de show este setată la false , iar componenta nu mai este redată. La următoarea bifă, care este un singur ciclu de actualizare DOM, show este setat la true și componenta noastră este redată din nou. Acesta este un mod foarte hacker de redare.

Aș dori să vorbesc despre două moduri legitime în care se poate face acest lucru:

1. $forceUpdate la Vue.
2. Model de schimbare a cheilor.

$forceUpdate la Vue : în utilizarea $forceUpdate , componentele copil nu sunt randate, ci doar instanța Vue.js, instanța și componentele copil cu sloturi.

La nivel global putem forța actualizarea:

 import Vue from 'vue'; Vue.forceUpdate();

Și la nivel local:

 export default { methods: { methodThatForcesUpdate() { this.$forceUpdate(); } } }

Utilizarea modelului de schimbare a cheilor, care este mult mai bună decât metoda $forceUpdate , este o altă modalitate de a face acest lucru. Motivul din spatele modelului de schimbare a cheii este mai bun este că permite Vue.js să știe ce componentă este legată de o anumită date și, atunci când cheia se schimbă, distruge vechea componentă pentru a crea una nouă, conform matthiasg despre această problemă Github am dat peste. Puteți folosi un atribut :key pentru a informa Vue.js care componentă este atașată unei anumite date. Când cheia se schimbă, Vue.js distruge vechea componentă și este creată una nouă.

 <template> <Child :key="key" /> </template> <script> export default { data() { return { key: 0, }; }, methods: { forceRerender() { this.key += 1; } } } </script>

Biblioteci terță parte și optimizare

Este aproape inevitabil să nu folosim biblioteci terțe în aplicațiile noastre. Bibliotecile de la terți pot începe să fie o problemă dacă închidem ochii, mărind dimensiunea pachetului și încetinind aplicația noastră.

Am folosit recent biblioteca de componente Vuetify într-un proiect și am verificat pentru a vedea că dimensiunea totală a pachetului a fost de 500 kb minimizate. Lucruri de genul acesta pot deveni un blocaj în aplicația noastră. Puteți verifica dimensiunea pachetului aplicației dvs. utilizând webpack-bundle-analyzer . Îl puteți instala rulând:

 npm install --save-dev webpack-bundle-analyzer

și includeți-l în fișierul dvs. de configurare webpack:

 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }

Bune practici pentru a vă optimiza aplicația Vue

• Pachetul nostru principal ar trebui să conțină numai dependențe care sunt esențiale pentru aplicația noastră, cum ar fi vue , vuex . Ar trebui să evităm să punem bibliotecile care sunt utilizate în anumite rute în aplicația noastră în pachetul principal.
• Când utilizați biblioteci de componente, puteți importa componente individuale din biblioteci, în loc să importați totul. De exemplu, vuetify:

 <template> <v-app> <v-navigation-drawer app> <!-- --> </v-navigation-drawer> <v-app-bar app> <!-- --> </v-app-bar> </v-app> </template> <script> import { VApp, VNavigationDrawer, VAppBar } from 'vuetify/lib' export default { components: { VApp, VNavigationDrawer, VAppBar, } } </script>

Făcând cele de mai sus, am redus dimensiunea pachetului și codul redundant, folosind doar componentele pe care dorim să le folosim în acel traseu anume.

Luarea primelor decizii de utilizare a Vuex

Adesea m-am trezit să mă întreb dacă ar trebui să încep un proiect cu Vuex. Uneori vreau doar să încep un mic proiect secundar și îl pornesc fără Vuex pentru a-mi gestiona starea și comunicarea folosind recuzită începe să devină dezordonată.

Deci, când ar trebui să folosim Vuex? Pentru a răspunde la aceasta, trebuie să luăm în considerare:

• Dimensiunea proiectului,
• Simplitatea codului,
• rutare,
• Setul de date implicat,
• Imbricarea componentelor.

Dacă aplicația dvs. începe să crească, este indicat să includeți Vuex pentru a gestiona starea în aplicația dvs. Dacă aveți vreodată îndoieli dacă ar trebui să utilizați un manager de stat atunci când începeți proiectul, atunci utilizați-l. Cu toate acestea, se vorbește despre noul API de compoziție Vue3 ca un înlocuitor pentru Vuex.

Cum ar trebui configurat Vuex pentru aplicații mari

Avem patru componente în magazinul vuex:

• Stare : stocați datele în magazinul nostru.
• Getters : Preluați datele de stare.
• Mutații : Folosit pentru a modifica datele de stare.
• Acțiune : Folosit pentru a comite mutații.

Când folosim cele de mai sus în Vuex, ar trebui să ținem cont de faptul că acțiunile ar trebui să comită întotdeauna mutații, indiferent de situație. Acest lucru permite instrumentelor noastre de dezvoltare să poată urmări modificările și să revină la o anumită perioadă din starea noastră, iar operațiunile asincrone sau logica de afaceri ar trebui efectuate în acțiuni.

Puteți crea un fișier separat pentru fiecare dintre componentele Vuex, care să arate astfel:

 ├── services ├── main.js └── store ├── index.js ├── actions.js ├── mutations.js └── Getters.js ├── components

Modulare în funcție de caracteristică

Dacă proiectul nostru este un proiect foarte mare cu o echipă, putem modula magazinul nostru în funcție de caracteristicile aplicației. Acest lucru se face mai ales atunci când există proiecte complexe și mari cu multe fișiere și foldere și vrem doar un mod organizat de a gestiona structurarea aplicației noastre. Trebuie să fim atenți la felul în care procedăm în acest sens, dacă nu putem face mai mult rău decât bine. Un magazin simplu modularizat în funcție de caracteristică arată astfel:

 store/ ├── index.js └── modules/ ├── cart ├── index.js ├── actions.js ├── mutations.js ├── product.js ├── login.js

Bună practică atunci când utilizați modulele Vuex

Pe măsură ce modulele pe care le-am creat devin mai complicate, devine mai greu de importat și organizat manual. Se recomandă ca modulele dumneavoastră să aibă un fișier index.js la rădăcina modulului, aducând fișierele cu totul.

Asigurați-vă că aveți un model standard de denumire în magazin, deoarece acest lucru va crește capacitatea de întreținere. Puteți folosi camelCase pentru denumirea modulelor, apoi o extensie .store.js . Exemplu: CartData.store.js .

 modules/ ├── cart.js ├── index.js -> auto export module ├── userProduct.store.js ├── userData.store.js

Codul legat de logica de afaceri sau codul asincron nu ar trebui să ruleze în interiorul mutațiilor din cauza comportamentului său de blocare, în schimb, ar trebui folosite acțiuni. Este considerată cea mai bună practică de a nu accesa direct un obiect de stare. În schimb, utilizați funcția getter, deoarece poate fi mapată în orice componentă vue folosind mapGetters care se comportă ca o proprietate calculată cu rezultatul getters în cache pe baza dependențelor sale. De asemenea, asigurați-vă că fiecare modul este spațial de nume și că nu le accesați folosind domeniul de aplicare a stării globale.

Utilizarea metodei Furnizare/Injectare pentru a transmite date

Gândiți-vă la o aplicație care are componente diferite. Avem componenta părinte și componenta părinte are multe componente copil. Din imaginea de mai jos, vedem componentele noastre Child A, B și D ca componente de top, apoi vedem Componenta E imbricată în componenta D și componenta F imbricată în componenta E. Dacă avem date despre aplicație (cum ar fi Adresa utilizatorului), asta dorim să folosim în Componenta A, C și F copil, iar aceste date despre adresa de utilizator se află în componenta noastră părinte.

Pentru a face acest lucru, trebuie să:

• Furnizați valoare în componenta părinte (furnizor de dependență).
• Injectați valoarea în componenta F (consumator de dependență).

În componenta noastră părinte oferim datele:

 app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: this.user.address } }, template: ` ... ` })

Folosim provide ca funcție prin returnarea unui obiect pentru a accesa proprietățile instanței componente.

În componenta noastră child-f , avem următoarele:

 app.component('child-f', { inject: ['userAddress'], template: ` <h2>Injected property: {{ this.userAddress }}</h2> ` })

Cu toate acestea, am observat că dacă ne schimbăm user.address la o altă adresă, modificarea nu se va reflecta în valoarea noastră injectată, aceasta deoarece datele furnizate către provide/inject nu sunt reactive inițial. Putem rezolva acest lucru pasând un obiect reactive pentru a provide . Trebuie să atribuim o proprietate calculată obiectului nostru utilizator.

 app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: Vue.computed(() => this.user) } }, template: ` ... ` })

Acest model poate fi foarte util și mai simplu decât utilizarea Vuex.

Cu toate acestea, cu Vue3 și cu actualizarea recentă, acum putem folosi furnizori de context, permițându-ne să partajăm date între mai multe componente la fel ca Vuex.

Utilizarea corectă a elementelor de recuzită pentru componentele de formular

Crearea de formulare pe web este unul dintre acele lucruri pe care nu le place tuturor să le facă. Vue.js facilitează construirea de formulare excelente. Pentru a realiza acest lucru, trebuie să știm cum să folosim corect recuzita în componentele noastre de formular. Într-o aplicație tradițională în care avem înscriere, autentificare sau pagină de produs, dorim să avem un comportament și un design consistent. De exemplu, pagina de conectare de mai jos.

Cu codul:

 <template> <div class="form-group"> <form> <label for="email">Your Name</label> <input type="text" class="form-control" placeholder="name" v-model="userData.name" /> <label for="email">Your Email Address</label> <input type="text" class="form-control" placeholder="Email" v-model="userData.email" /> <label for="email">Your Password</label> <input type="text" class="form-control" placeholder="password" v-model="userData.password" /> </form> </div> </template> <script> export default { data() { return { userData: { name: '', email: '', password: '' } } }, } </script>

Vom dori să avem o componentă BaseInput pe care să o putem folosi pentru cele trei intrări de formular de mai sus. BaseInput -ul nostru arată astfel:

 <template> <div> <label v-if="label">{{ label }}</label> <input type="email" @value="value" @input="updateInput" v-bind="$attrs"> </div> </template> <script> export default { props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>

Dorim ca BaseInput -ul nostru să accepte o label prop care este întotdeauna un șir, iar dacă Input-ul are o etichetă, o arătăm în șablonul nostru, așa cum putem vedea mai sus.

Când completăm formularul, se declanșează metoda updateInput . Metoda updateInput ia evenimentul de intrare ca argument și emite un eveniment cu numele Input, împreună cu payload event.target.value care este numele (John Doe) sub forma:

 <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/>

v-model va asculta evenimentul de intrare și apoi, când îl primește, setează userData.name la sarcina utilă pe care a primit-o.

Dacă vrem să setăm un substituent pentru o intrare, s-ar putea să întâmpinăm o eroare, aceasta deoarece în vue2 atributele se atașează întotdeauna la părinte, așa că pentru a remedia acest lucru, setăm inheritAttrs la false și bind attrs .

 <script> export default { inheritAttrs: false, props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>

Acolo unde vrem să fie atributul substituent. Codul paginii noastre de formular arată acum așa:

 <template> <div class="form-group"> <form> <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/> <BaseInput label="Your Email Address" v-model="userData.email" placeholder="Email"/> <BaseInput label="Your Password" v-model="userData.password" placeholder="Password"/> </form> </div> </template>

Avem în sfârșit o componentă de formular reutilizabilă de sine stătătoare. Vă puteți juca cu codul din caseta de coduri pe care am făcut-o.

Notă: $Attrs în Vue3 include acum toți ascultătorii dvs., legăturile de stil și clasele.

Familiarizarea cu Vue Devtools

Vue.js Devtools este un instrument foarte puternic, deoarece ne ajută să ne depanăm eficient aplicația în timp real. Este cel mai puternic atunci când folosim Vuex și trebuie să gestionăm mutațiile și să urmărim modificările în aplicația noastră. Majoritatea dezvoltatorilor Vue.js folosesc devtools ca extensie, dar o putem instala și ca aplicație independentă.

Notă: instrumentele de dezvoltare Vue.js funcționează numai în modul de dezvoltare al construcției dvs. și nu vor funcționa în producție, așa că alte persoane nu le pot folosi pentru a vă inspecta aplicația.

Instalarea Devtools ca aplicație autonomă

S-ar putea să vă întrebați de ce am dori să instalăm o aplicație autonomă pentru devtools când putem folosi extensia de browser pentru aceasta? Se datorează faptului că atunci când o instalați ca aplicație autonomă local, o puteți utiliza din orice browser.

Îl instalăm:

 // Globally npm install -g @vue/devtools // or locally npm install --save-dev @vue/devtools

După ce ați terminat instalarea, rulați:

 vue-devtools

Apoi, în fișierul nostru index.html , situat în folderul public din rădăcina aplicației noastre Vue.js, adăugăm:

 <script src="https://localhost:8098"></script>

Odată ce aplicația este reîncărcată, se va conecta automat.

Câteva operațiuni pe care le putem face cu Vue Devtools

Iată câteva operațiuni utile pe care le puteți face cu Vue.js DevTools.

• Tema întunecată
  În noile DevTools, există acum o opțiune de a seta între teme deschise, întunecate sau contrastante. Puteți face acest lucru accesând setările globale și selectând-o.

• Cronologie
  Noua cronologie din devtools afișează informații despre evenimentele care au loc și este aranjată în ordine cronologică. Este situat lângă vizualizarea inspector și setări.

• Formatați numele componentei
  Puteți alege să afișați numele componentei fie în camelCase, fie în kebab-case.

Există multe alte operațiuni pe care le puteți utiliza în vue devtools. Puteți consulta jurnalul lor de modificări.

Instrumente pentru a face lucrul în Vue mai ușor

Când lucrăm cu Vuejs, s-ar putea să întâlnim unele caracteristici pe care ne-ar plăcea să le implementăm, dar ar putea dura mult timp pentru codificarea greutății sau doar puțin dificil de implementat. În calitate de dezvoltatori profesioniști, adăugăm anumite instrumente și biblioteci de ajutor pentru a ușura lucrurile și ne-am uita la unele dintre ele.

Testarea bibliotecilor

Testarea poate juca un rol crucial atunci când se construiesc aplicații la scară largă. Ne ajută să evităm erorile inutile în timpul dezvoltării atunci când lucrăm cu o echipă. Să ne uităm la cele trei tipuri de testare pe care le putem efectua în aplicația noastră Vue și cadrele acestora.

• Testarea componentelor
  Biblioteca de testare Vue, Utilitare de testare Vue.
• Testarea unitară
  Glume, Mocha.
• Teste de la capăt la capăt
  Nightwatch.js, Cypress.

Biblioteci de componente

O bibliotecă de componente este un set de componente reutilizabile pe care le putem folosi în aplicația noastră pentru a face dezvoltarea UI mult mai rapidă și mai consistentă în aplicația noastră. La fel ca React și Angular, Vue are propriul set de biblioteci de componente. Unele dintre ele includ:

• Kit de materiale Vue
  Un kit UI Vue.js „Badass” construit pe baza designului materialului. Conține peste 60 de componente realizate manual.
• Buefy
  O bibliotecă de componente ușoară bazată pe cadrul Bulma CSS. Dacă vă simțiți confortabil cu SASS, nu veți avea nicio problemă să îl utilizați.
• Vuetify
  Acesta este, de asemenea, un cadru pentru componenta de proiectare a materialelor, cu disponibilitatea unei schele deja realizate pentru cod, cu o comunitate mare și actualizări regulate
• Quasar
  Preferatul meu personal, când vine vorba de cadrul componentelor. Quasar, cu stiva sa de front-end de înaltă performanță, vă permite să construiți aplicații multiplatforme pentru web, mobil și desktop.
  

Alte biblioteci interesante

Alte biblioteci demne de remarcat sunt:

• FilePond
  Această bibliotecă Vue.js încarcă orice imagine pe care i-o oferiți și optimizează acele imagini cu o experiență netedă.
• Vuelidate
  Această bibliotecă este foarte importantă atunci când lucrați cu formulare și aveți nevoie de o modalitate de a valida intrările utilizatorilor pe front-end. Este o validare simplă și ușoară bazată pe model.
• vue-Clickaway
  Vue nu are un ascultător nativ de evenimente care să știe când un utilizator a făcut clic în afara unui element, de exemplu, un meniu derulant, de aceea vue-clickaway există pentru a detecta evenimentele de clic.

Există mult mai multe biblioteci acolo. Puteți consulta o multitudine de ele pe madewithvuejs.com și vuejsexamples.com .

Extensii utile pentru a vă ajuta să scrieți Vue

Extensiile sunt instrumente cu adevărat utile, care pot face o mare diferență în productivitatea zilnică atunci când scrieți vuejs. În timpul petrecut scriind codul Vuejs, am găsit următoarele extensii foarte utile:

• Vetur
  Aceasta este extensia numărul unu de pe lista mea. Mă economisesc ore când scriu Vuejs. Oferă evidențieri specifice, fragmente, Intellisense, depanare și multe altele pentru Vue.js.
• Marcaje
  Această extensie este foarte utilă atunci când lucrați la un proiect mare, deoarece puteți marca și seta un marcaj în anumite locuri din codul dvs. și să sari la acel loc specific atunci când doriți.
• Eslint
  Eslint ne ajută să găsim cu ușurință erorile de codare, lansând un avertisment dacă facem ceva greșit în cod. Este indicat să-l folosești într-un format mai frumos.
• Pachetul de extensii Vue.js
  Acest pachet de extensii conține o colecție de alte extensii care vă vor ajuta la dezvoltarea Vue.js, cum ar fi Prettier, Vetur, Night Owl etc.

Concluzie

În acest tutorial, am analizat câteva sfaturi și instrumente pentru a vă ajuta să deveniți un dezvoltator Vue mai bun. Am început cu câteva informații utile despre organizarea proiectelor noastre pentru scară și alte puncte grozave de remarcat și le-am rotunjit cu Instrumente și extensii care fac scrierea Vuej-urilor mult mai ușoară.

Rețineți că cea mai mare parte a ceea ce este învățat în acest articol este centrat pe Vue.js 2, pentru a evita neînțelegerile.

Resurse suplimentare

Iată câteva link-uri utile pe care le puteți consulta dacă doriți să vă aprofundați în unele dintre lucrurile pe care le-am discutat mai sus.

• „Directive personalizate”, documente oficiale
• „Reactivitatea lui Vue”, documente oficiale
• Site-ul web „Vue Devtools”.
• Discuție despre Composition API vs Vuex
• Instrumente utile vue dezvoltare javascript de Timi Omoyeni