Budowa aplikacji Vue.js

Question

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ć?

Answer 1

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 

Answer 2

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ć  ?

Comments

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.

Answer 3

Na przykład: w App.vue

<div id="app">
	<nav-component></nav-component>
	<router-view></router-view>
</div>

Answer 4

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.

Comments

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 :)

---

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.

---

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ąć.