• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Budowa aplikacji Vue.js

VPS Starter Arubacloud
0 głosów
1,156 wizyt
pytanie zadane 11 października 2017 w JavaScript przez michal Mądrala (5,560 p.)
Witam, mam pytanko do osób które bawiły się już coś w vue.js. Jak powinno się zbudować taką aplikację, bo rozumem ze każda podstrona to osobny komponent ładowany za pomocą routingu, ale gdzie umieścić takie elementy które będą wspólne chociażby jakaś belka nav, czy coś podobnego. Czy to wstawić bezpośrednio w index, czy jakoś inaczej to dodać?

4 odpowiedzi

0 głosów
odpowiedź 11 października 2017 przez ProgramistaStepek Nałogowiec (27,020 p.)

Skoro belka nav jest używana w każdym pliku to zarejestrowanie (czy jakoś tak to się nazywa) komponentu globalnie ma sens. Tu masz filmik z porównaniem globalnie vs lokalnie 

0 głosów
odpowiedź 21 października 2017 przez michal Mądrala (5,560 p.)
Mam jeszcze pytanie w jaki sposób można przygotować projekt vue do przeniesienia na hosting. Próbowałem zrobić npm run build po czym to co mi wygenerowało w dist uruchomić, ale w żaden sposób nie chce mi to zadziałać. Czy jest na to jakiś inny sposób ? Jak to właściwie się powinno robić  ?
1
komentarz 21 października 2017 przez niezalogowany

Do tego właśnie służy npm run build

Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

0 głosów
odpowiedź 21 października 2017 przez niezalogowany

Na przykład: w App.vue

<div id="app">
	<nav-component></nav-component>
	<router-view></router-view>
</div>
0 głosów
odpowiedź 21 października 2017 przez Schizohatter Nałogowiec (39,600 p.)

Po pierwsze nawigacja może być w:

a) index.html jeśli nie będzie używała routera z Vue i z Vue nie będzie miała nic wspólnego

b) jako osobny moduł dołączany np. do App

c) jako część App bezpośrednio

 

Co do budowania aplikacji, to npm run build, ale:

Odpalony taki plik nie zadziała, ponieważ wszystkie ścieżki odniesienia będą miały na początku "/" co oznacza root folder (w przypadku odpalenia z dysku C:/X/Y/Z to będzie szukał plików w C:/). Stąd rada, żeby użyć do tego hostingu (na hostingu będziesz miał bezpośrednio pliki pod adresem "/"). Ale co jeśli chciałbym mieć aplikację w podfolderze na hostingu?

Otóż podlinkuję do mojego githuba, bo nie chce mi się przepisywać: https://github.com/soanvig/hptcg-deck-builder#build

Więc teoretycznie możesz nawet ustawić jako ścieżki odniesienia adres "/X/Y/Z".

Jeśli Twoja wersja template'u Vue/Webpack nie ma tego pliku musisz znaleźć, gdzie się ustala konfigurację webpacka.

komentarz 22 października 2017 przez michal Mądrala (5,560 p.)
Cześć dzięki za info, ale dalej mam z tym delikatny problem. Mógłbyś mi podpowiedzieć gdzie w tym pliku webpack.prod.conf.js mam zmienić tą ścieżkę i na jaką zmienić? Jakoś tak nie mogę sobie tego przyswoić jak to ma być i jak to działa ze przy npm run dev że ten serwer się uruchamia, a po zbudowaniu tej aplikacji muszę ją dać na hosting żeby zadziałała, czy mogę te pliki z folderu dist (bo rozumie że to są pliki wynikowe) uruchomić lokalnie bez żadnego serwera? Jakoś tak nie mogę tego budowania tej aplikacji ogarnąć. Znasz może jakieś ciekawy poradnik gdzie w miarę łopatologicznie jest to opisane ? Z góry dzięki za cierpliwość dla mnie :)
komentarz 22 października 2017 przez Schizohatter Nałogowiec (39,600 p.)
Jak odpalasz dev to też tworzy się serwer, więc jak webpack zbuduje ścieżki z "/" na początku to wszystko działa.

Możesz pliki z dist uruchomić lokalnie - jeśli twój folder dist to:

C:/Vue/Abrakadabra/dist (zakładam Windows xd)

to ta ścieżka w configu to powinno być:

"/Vue/Abrakadabra/dist/" (ukośnik na końcu)

Szczerze mówiąc, to przed chwilą to sprawdziłem (na linuxie) i działa.
komentarz 22 października 2017 przez michal Mądrala (5,560 p.)
W którym miejscu w webpack.prod.conf.js muszę tą ścieżkę zmienić? W przypadku umieszczenia tego na hostingu w jakimś folderze( nie w głównym public html) to co w tej ścieżce podać ?

Ps. Widzę ze będę musiał trochę ogarnąć te podstawy jeśli chodzi o noda webpack itd, bo jakoś nie mogę tego tak do końca pojąć.

Podobne pytania

0 głosów
1 odpowiedź 415 wizyt
0 głosów
2 odpowiedzi 942 wizyt
pytanie zadane 20 grudnia 2018 w JavaScript przez ozimas Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 495 wizyt
pytanie zadane 12 lipca 2021 w JavaScript przez _Visni4PL_ Obywatel (1,320 p.)

92,454 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...