Vuejs, Node i różne takie JSy

Posted on Fri 23 February 2018 in misc

Fajne są te frameworki, React, Vuejs, Angular itd... Ale momentami mam wrażenie że ogon macha psem :).

Będąc zmęczony Angularem, postanowiłem następny prosty interfejsik wykonać w czymś innym. Padło na Vuejs, ponoć najprostsze.

Coś tam zrobiłem działającego, postanowiłem ubrać to w jakieś ikonki. W poprzednim bootstrapie były glyphicons - w najnowszym to wywalili i radź sobie człowieku.

Do głowy mi nie przyszło, że taka prosta sprawa jak zastosowanie ikonek, zajmie mi TYLE czasu. Na dobrą sprawę powinienem pobrać po prostu kilka plików .png i je wrzucić do projektu, no ale się zawziąłem ....

Na pierwszy ruch idzie rzeczone Glyphicons (teraz osobny projekt), ale jest komercyjne do użytku komercyjnego, więc nie przejdzie. No to jedziemy dalej i myślę sobie że zastosuję Octicons. Skoro Vuejs, no to trzeba ściągnąć coś dostosowane do Vue. Jest kilka pakietów, wybrałem vue-octicon a w międzyczasie minęło już prawie 2 godziny.

Godzina później, no cos nie działa. Próbuję i tak, i inaczej, cholera mnie bierze. Błędów nie ma, ikonka się nie pojawia. Coś działa, bo ewidentnie w DOM strony widzę <svg> w odpowiednim miejscu, no ale ikonka się nie pojawia.

Biorę robię na boku ... no cholera działa. Ikonka pojawia się taka jak chce. Upewniam się że w aplikacji jest tak samo jak w usecase na boku - no tam się ikonka pojawia, w aplikacji nie. Minęło już 3 godziny.

Może przyczyną jest to że apka jest na browserify a usecase jest na webpacku. Przerabiam aplikację na webpack. Więc z powrotem, rm -rf .nev && nodeenv .nev && . .nev/bin/activate && npm install -g vue-cli i inicjalizuję apkę opartą na webpacku, kopiuję ze starego wszystkie pliki .vue, .js, upewniam się że wszystko działa jak trzeba. Dodaję npm install --save vue-octicon - KUPA. Jakiś błąd (którego nie zanotowałem) świadczący ewidentnie że instalacja apki VUE jest skopana. Ponowienie procedury, to samo. Minęły kolejne 2 godziny. Razem 5.

Walczę jeszcze dłuższą chwilę. Potem wywalam vue-octicon, biorę vue-awesome, wrzucam do projektu, używam <icon name=xxxxx/> i działa.

Dzień roboczy spędzony na dodaniu ikonki do aplikacji. Przynajmniej sobię trochę poprawiłem strukturę katalogów.