Scopri come riformattare i componenti a file singolo di Vue.js con un esempio reale

In ogni grande progetto Vue.js c'è qualche debito tecnico. Dopo tutto, non ci sono progetti di sviluppo senza debito tecnico. Sarà lì, qualunque cosa tu faccia.

In questo articolo, ti guiderò attraverso il modo in cui refactoring i componenti Vue.js su una "applicazione del mondo reale" (letteralmente chiamata così). Cos'è questa "applicazione nel mondo reale"?

Sono un appassionato di Vue.js da molto tempo. Sto usando Vue.js ormai da più di due anni e professionalmente ho usato Vue.js da più di un anno. Ho faticato molto all'inizio per imparare Vue.js ma mi sono orientato molto sugli hackernews ufficiali del team Vue.js che puoi trovare qui:

Comunque, dopo qualche tempo, volevo qualcosa da zero e realworld.io è nato. È un progetto di Thinkster per mostrare una vera API integrata nelle applicazioni frontend. L'indizio è che puoi prendere qualsiasi backend che desideri ma anche sostituire ogni componente. Quindi potresti voler andare con Django + React, Golang e Vue.js o ASP.net MVC + Angular. Tutto possibile. Per noi, l'interessante applicazione qui è quella Vue.js. Potete trovare qui:

Sono un manutentore centrale di questo progetto, ma anche in questo progetto c'è un sacco di debito tecnico che dobbiamo combattere. Qui mostrerò diversi piccoli refactoring su un componente Vue.js a file singolo e come renderlo più pulito. Di seguito puoi trovare il componente iniziale e sulla destra il componente finale. Potrebbe essere più lungo, ma alla fine, spiegherò perché questo è ancora meglio. Quindi cominciamo.

Per avere una visione d'insieme di ciò che abbiamo fatto tutti, inizieremo esaminando il componente stesso che vogliamo riformattare. Puoi trovare il codice sorgente nella seguente immagine o puoi sfogliarlo su GitHub.

Il codice sorgente di VArticlePreview.vue prima del refactoring

Fondamentalmente, il caso d'uso dei componenti è mostrare un'anteprima di un articolo. Simile a quello che vedi nella home page media di un articolo. Sembra un componente malefico ma c'è spazio per migliorare. Questo è importante da capire perché ciò che conta per un componente o una base di codice è la prima impressione. Questo componente mi dà l'impressione di uno stile strano e l'uso di stili diversi. Lo normalizzeremo, ma anche rispetto alla Guida di stile ufficiale Vue.js.

1. Rendere le importazioni relative

Il primo refactoring che stiamo facendo è il refactoring dell'importazione dell'alias webpack. L'alias webpack è fondamentalmente un'utilità fornita da webpack che offre l'opportunità di utilizzare un modello di stringa per l'emulazione del percorso. Ciò significa sostanzialmente che possiamo esprimere un percorso con un altro testo. In questo esempio, @ sta sostituendo un percorso statico alla nostra applicazione. In generale, questo è un modello errato perché quando si desidera scambiare il webpack con un altro bundler di moduli, il nuovo bundler deve supportare anche questa funzione. Poiché non è possibile accertarsi che sia così, dovremmo rimuovere questo comportamento personalizzato e normalizzarlo secondo il normale modello relativo.

2. Ordinare le opzioni dell'istanza del componente

La guida di stile Vue.js suggerisce di ordinare le opzioni di istanza di un componente file singolo Vue.js. Puoi cercare l'ordine nella pagina dei documenti della Guida di stile Vue.js. In generale, raccomanda che i componenti siano elencati prima dei puntelli. Questo significa sostanzialmente per noi che dobbiamo ricorrere alle proprietà dell'istanza. Il ragionamento alla base è molto intelligente e avrà molto più senso in seguito. Ma fondamentalmente, è causato per creare meno confusione per lo sviluppatore. Nella maggior parte delle volte interagirai con oggetti di scena anziché componenti in seguito, come nei metodi, nelle proprietà delle istanze di watch o computate. Ecco perché i componenti dovrebbero essere elencati prima dei puntelli.

3. Componenti PascalCase in