Vuejs, Node i różne takie JSy
Posted on pią 23 lutego 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.