Am fost un dezvoltator de reacții de ceva vreme în acest moment. Și pentru mine totul a început ca o căutare a unei noi tehnologii care să-mi alimenteze proiectele personale. Ani mai târziu, lucrez ca dezvoltator React cu normă întreagă și nu mă pot simți mai bine în privința asta.

Asta nu înseamnă însă că nu mă uit în jur. Sunt genul de persoană care încearcă să găsească un instrument perfect pentru job, chiar dacă s-ar putea să nu fie în setul meu de abilități (încă). Și, evident, Vue a făcut o mulțime de zumzet în ultimul timp, așa că a fost greu să treci pe lângă.

Dar de fiecare dată când m-am uitat la documentele oficiale, m-au întâmpinat cu ceva, care părea depășit și se simțea ca un pas înapoi față de ceea ce făceam la ATM. Nu sunt sigur dacă este o problemă a documentelor sau a mea, dar aici suntem. Și judecând după ceea ce văd în jurul meu - nu sunt singur, de aici toate războaiele sfinte.

Din fericire, un prieten de-al meu mi-a arătat că Vue nu este neapărat ceea ce vezi pe prima pagină, poate fi de fapt destul de cool și modern. M-a legat vue-class-component, iar asta a schimbat totul.

Pentru mine, ca dezvoltator React, asta ar fi trebuit să fie anunțat chiar pe prima pagină, poate chiar deasupra siglei, sau într-o fereastră pop-up, sau nu știu... înțelegi ideea. A fost ca o revelație, care m-a făcut să continui să sap. Și am ajuns cu așa ceva

Am fost șocat, cel puțin.

Ceea ce am ajuns a fost o componentă asemănătoare reacției, cu module css imediat scoase din cutie și chiar motoare șablon precum pug! Toate lucrează împreună, fără a schimba (aproape) nimic din configurația pachetului meu web și așa ceva.

Nu mă înțelege greșit, modificarea configurațiilor pachetului web nu este dificilă, mai ales când ați făcut-o deja de mai multe ori. Dar vorbim de proiecte personale, în care ai timp limitat și vrei ca acel timp să fie cheltuit cu ideea propriu-zisă, nu pe boilerplate.

Și asta nu înseamnă că totul este pur magic. Eu nu sunt un mare fan al magiei, DAR! Într-un proiect secundar, îmi pot imagina doar cât timp aș fi putut economisi dacă aș avea un astfel de instrument la îndemână.

Și ce este și mai bine - nu a trebuit să reînvăț toate lucrurile! Ei bine aproape. La majoritatea întrebărilor mele se răspunde în documente și tot ce trebuie să înveți sunt câteva lucruri de sintaxă și comenzi rapide. Dar dacă vrei — poți chiar să folosești JSX, da, acel JSX, cel pe care îl folosești în React în fiecare zi!

Și lista continuă. În acest moment reconstruiesc front-end pentru un proiect la care am lucrat de ceva vreme. Și o fac în Vue. De ce? Pentru că este doar mai rapid. Mă ajută să-mi ating obiectivele într-un timp record.

Pentru a fi corect, nu am nevoie de nimic extrem de complex în ceea ce privește structura de construcție, aplicația mea este suficient de simplă încât react-create-app sau, în acest caz, vue-cli cu cue-loader să poată gestiona tot ce vreau. Și pur și simplu îmi face viața mai bună.

Pot pur și simplu să arunc niște <style lang="sass" module> și sunt bine să merg cu module CSS!

Doriți să utilizați pug în interiorul șabloanelor? <template lang="pug">o face. Legăturile pentru evenimente sau prop sunt și ele destul de simple. Iar un suport ieșit din cutie pentru evenimentele de la tastatură face minuni.

Nu este nevoie să aduci o dependență externă, doar fă un @keyup.shift și funcționează!

Știu, este puțin prea magic pentru un dezvoltator React sceptic, dar, personal, cred că merită. Nu a fost complet fără probleme, de aceea am inclus chiar și o secțiune întreagă în partea de jos cu sfaturi pe care le considerați utile ca dezvoltator React care încearcă Vue.

Și chiar dacă nu ești convins să îmbrățișezi pe deplin Vue în lucrurile tale personale — îl poți îmbina cu React și le poți folosi pe amândouă! Sună puțin nebunesc, dar ar trebui să verificați și această abordare.

Până la urmă vreau să spun asta. Doar incearca. Eram cu adevărat sceptic în privința asta, dar a ieșit grozav. Nu voi folosi Vue în producția la scară mare în curând (nu pentru că nu se poate descurca, ci pentru că nu este ceea ce fac), dar proiectele mele personale vor vedea o mulțime de Vue acum, asta este sigur.

Lucruri utile

  • „Documente oficiale Vue”
  • „Documente de la Vue-Router”
  • „Documente de la Vue-Loader”
  • Vuex Docs (gestionare de stat, gândiți redux/flux)
  • JSX în Vue (citiți mai întâi puțin despre Vue)
  • „Componenta clasei Vue” (ES6)

Lucruri la care să fii atent

  • În mod implicit, Vue va folosi doar hash ca nume de clasă pentru CSS-Modules, ceea ce este ok pentru producție, dar foarte greu pentru dezvoltare. Poate doriți să deschideți configurația vue-loader (build/vue-loader.conf.js în mod implicit) și să adăugați ceva de genul acesta. Va face ca numele claselor dvs. CSS-Module să arate ca Button_chs3f
  • Poate doriți să schimbați routerul în modul istoric HTML5 (deci va acționa similar cu react-router . Pentru a face acest lucru, deschideți src/router/index.js și adăugați mode: 'history' la new Router({}) .
  • Recomand să folosiți blocuri de șabloane Vue (cu ceva de genul Pug) pentru majoritatea șabloanelor, este mult mai rapid și mai lizibil decât a face totul în JSX (fără supărare pentru JSX).
  • Acesta nu a fost cumva atât de evident pe cât mă așteptam. Dacă doriți să treceți copii la componentă (adică să aveți ceva de genul <my-component>Child Content</my-component> ), atunci ar trebui să aibă cel puțin o etichetă <slot /> în șablon.
  • În cele din urmă, nu uitați că trebuie să utilizați pluginul transform-decorators-legacy babel pentru ca decoratorii vue-class-component să funcționeze corect. De asemenea, va trebui să definiți toate componentele și elementele de recuzită pe care doriți ca componenta dvs. nouă și strălucitoare să le folosească în interiorul respectivului decorator. Urmează aceeași structură de date ca și constructorul Vue de bază, așa că căutați în documentele Vue lista completă de opțiuni.

Și cu asta, ar trebui să fii gata de plecare! Sperăm că acest lucru vă va ajuta și nu veți avea nevoie de trei încercări pentru a înțelege totul și pentru a începe să vă bucurați de Vue, așa cum a fost pentru mine.