W tym momencie jestem programistą reagującym już od dłuższego czasu. Dla mnie wszystko zaczęło się od poszukiwania nowej technologii, która mogłaby wesprzeć moje osobiste projekty. Wiele lat później — pracuję jako pełnoetatowy programista React i nie mogę się z tym czuć lepiej.

Nie oznacza to jednak, że się nie rozglądam. Jestem osobą, która stara się znaleźć idealne narzędzie do swojej pracy, nawet jeśli nie leży ono w moich umiejętnościach (jeszcze). No i oczywiście o Vue zrobiło się ostatnio głośno, więc trudno było przejść obok niego obojętnie.

Ale za każdym razem, gdy przeglądałem oficjalne dokumenty, witali mnie czymś, co wyglądało na przestarzałe i wydawało mi się krokiem wstecz w porównaniu z tym, co zrobiłem tam. Nie jestem pewien, czy jest to problem dokumentów, czy mój, ale w tym właśnie miejscu jesteśmy. I sądząc po tym, co widzę wokół siebie – nie jestem sam, stąd te wszystkie święte wojny.

Na szczęście znajomy pokazał mi, że Vue niekoniecznie jest tym, co widzisz na pierwszej stronie, może być całkiem fajne i nowoczesne. Połączył mnie z vue-class-component i to wszystko zmieniło.

Dla mnie, jako programisty React, powinno to zostać ogłoszone na pierwszej stronie, może nawet nad logo lub w wyskakującym okienku, albo nie wiem… rozumiesz, o co chodzi. To było jak odkrycie, które skłoniło mnie do dalszych poszukiwań. A skończyło się na czymś takim

Delikatnie mówiąc, byłem zszokowany.

Skończyło się na komponencie reagującym, z modułami css od razu po wyjęciu z pudełka, a nawet silnikami szablonów, takimi jak pug! Wszystko działa razem, bez zmiany (prawie) czegokolwiek w mojej konfiguracji pakietu internetowego i tym podobnych.

Nie zrozum mnie źle, zmiana konfiguracji pakietu internetowego nie jest trudna, zwłaszcza jeśli robiłeś to już wiele razy. Ale mówimy o projektach osobistych, w których masz ograniczony czas i chcesz, aby ten czas był poświęcony faktycznemu pomysłowi, a nie szablonowi.

I to nie znaczy, że wszystko jest czysto magiczne. Sama nie jestem wielką fanką magii, ALE! W projekcie pobocznym mogę sobie tylko wyobrazić, ile czasu mógłbym zaoszczędzić, gdybym miał pod ręką takie narzędzie.

A co jeszcze lepsze – nie musiałem uczyć się wszystkiego na nowo! Cóż prawie. Odpowiedzi na większość moich pytań znajdują się w dokumentach, a jedyne, czego musisz się nauczyć, to pewne rzeczy związane ze składnią i skróty. Ale jeśli chcesz — możesz nawet używać JSX, tak, tego JSX, tego, którego używasz w React na co dzień!

Lista jest długa. W tym momencie przebudowuję frontend dla projektu, nad którym pracuję już od jakiegoś czasu. I robię to w Vue. Dlaczego? Ponieważ jest po prostu szybszy. Pomaga mi osiągać zamierzone cele w rekordowo krótkim czasie.

Szczerze mówiąc, nie potrzebuję niczego bardzo skomplikowanego pod względem struktury kompilacji, moja aplikacja jest na tyle prosta, że ​​react-create-app lub, w tym przypadku vue-cli z cue-loader, może obsłużyć wszystko, co chcę. I to po prostu sprawia, że ​​moje życie staje się lepsze.

Mogę po prostu dorzucić trochę <style lang="sass" module> i mogę już korzystać z modułów CSS!

Chcesz używać tagu mops w szablonach? <template lang="pug">robi to. Powiązania zdarzeń lub rekwizytów są również dość proste. A gotowa do użycia obsługa zdarzeń klawiaturowych zdziała cuda.

Nie ma potrzeby wprowadzania zależności zewnętrznej, po prostu wykonaj @keyup.shift i to działa!

Wiem, że to trochę zbyt magiczne dla sceptycznego programisty React, ale osobiście uważam, że warto. Nie obyło się bez problemów, dlatego na dole zamieściłem nawet całą sekcję ze wskazówkami, które mogą Ci się przydać jako programista React wypróbowujący Vue.

Nawet jeśli nie jesteś przekonany, aby w pełni wykorzystać Vue w swoich sprawach osobistych, możesz połączyć go z React i używać obu! Brzmi trochę szalenie, ale powinieneś sprawdzić i to podejście.

Na koniec chcę to powiedzieć. Po prostu spróbuj. Byłem co do niego bardzo sceptyczny, ale okazał się świetny. W najbliższym czasie nie będę używać Vue w produkcji na dużą skalę (nie dlatego, że sobie z tym nie poradzę, ale dlatego, że po prostu nie tym się zajmuję), ale moje osobiste projekty będą teraz często korzystać z Vue, to jest pewne.

Przydatne rzeczy

Rzeczy, na które warto zwrócić uwagę

  • Domyślnie Vue będzie używać skrótu tylko jako nazwy klasy dla modułów CSS, co jest w porządku w przypadku produkcji, ale naprawdę trudne w programowaniu. Możesz otworzyć konfigurację vue-loadera (domyślnie build/vue-loader.conf.js) i dodać coś takiego. To sprawi, że nazwy klas CSS-Modules będą wyglądać jak Button_chs3f
  • Możesz przełączyć router na tryb historii HTML5 (aby działał podobnie do react-router . Aby to zrobić — otwórz swój src/router/index.js i dodaj mode: 'history' do new Router({}) .
  • W przypadku większości szablonów polecam używanie bloków szablonów Vue (z czymś w rodzaju Pug), jest to o wiele szybsze i bardziej czytelne niż robienie wszystkiego w JSX (bez obrazy JSX).
  • To jakoś nie było tak oczywiste, jak się spodziewałem. Jeśli chcesz przekazać elementy podrzędne do komponentu (tj. mieć coś w rodzaju <my-component>Child Content</my-component> ), to powinien on mieć co najmniej jeden znacznik <slot /> w swoim szablonie.
  • Na koniec — nie zapomnij, że do poprawnego działania vue-class-component dekoratorów musisz użyć wtyczki transform-decorators-legacy babel. Będziesz także musiał zdefiniować wszystkie komponenty i rekwizyty, których nowy, błyszczący komponent ma używać w tym dekoratorze. Ma tę samą strukturę danych, co podstawowy konstruktor Vue, więc zajrzyj do dokumentacji Vue, aby uzyskać pełną listę opcji.

I z tym powinieneś być gotowy! Mam nadzieję, że to ci pomoże i nie będziesz potrzebować trzech prób, aby zrozumieć to wszystko i zacząć cieszyć się Vue, tak jak było to w moim przypadku.