Jaka jest różnica między widokami a folderami komponentów w projekcie Vue?

128

Właśnie użyłem linii poleceń ( CLI), aby zainicjować projekt Vue.js. CLIStworzył src/componentsi src/viewsfolder.

Minęło kilka miesięcy, odkąd pracowałem nad projektem Vue i struktura folderów wydaje mi się nowa.

Jaka jest różnica między folderami viewsi componentsw projekcie Vue wygenerowanym za pomocą vue-cli?

drsnark
źródło
4
Nie sądzę, żeby się różniły w tym sensie, że oba są składnikami widoku pojedynczego pliku. Ale wyświetlenia stron (Home.vue, About.vue, Checkout.vue) mogą być oddzielone od komponentów (Button.vue, LoadingSpinner.vue, itp.)
Jeff,
To rzuca nieco światła na różnice w strukturze: blog.pusher.com/new-vue-cli-simplify-development
connexo
10
@Jeff jesteś politykiem, jeśli nie, to powinieneś. Właśnie powtórzyłeś pytanie Ops, ale udało ci się sprawić, że będzie wyglądało jak odpowiedź. LOL.
PrestonDocks

Odpowiedzi:

177

Przede wszystkim oba foldery src/componentsi src/viewszawierają komponenty Vue.

Kluczowa różnica polega na tym, że niektóre komponenty Vue działają jako widoki na potrzeby routingu.

W przypadku routingu w Vue, zwykle w Vue Router , trasy są definiowane w celu przełączenia bieżącego widoku używanego w <router-view>komponencie. Te trasy są zwykle zlokalizowane pod adresem src/router/routes.js, gdzie możemy zobaczyć coś takiego:

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]

Komponenty znajdujące się poniżej src/componentssą mniej prawdopodobne, że zostaną użyte na trasie, podczas gdy komponenty znajdujące się poniżej src/viewsbędą używane przez co najmniej jedną trasę.


Vue CLI ma być standardową bazą narzędziową dla ekosystemu Vue. Zapewnia to płynne działanie różnych narzędzi do kompilacji z rozsądnymi ustawieniami domyślnymi, dzięki czemu możesz skupić się na pisaniu aplikacji zamiast spędzać dni na zmaganiach z konfiguracjami. Jednocześnie nadal oferuje elastyczność w dostosowywaniu konfiguracji każdego narzędzia bez konieczności wysuwania.

Vue CLI ma na celu szybki rozwój Vue.js, zapewnia prostotę i elastyczność. Jego celem jest umożliwienie zespołom o różnym poziomie umiejętności skonfigurowania nowego projektu i rozpoczęcia pracy.

W końcu to kwestia wygody i struktury aplikacji .

  • Niektórzy ludzie lubią mieć swoje poglądy pod Folder src/routerjak tego przedsiębiorstwa boilerplate.
  • Niektórzy nazywają to Stronami zamiast Widokami .
  • Niektóre osoby mają wszystkie komponenty w tym samym folderze.

Wybierz strukturę aplikacji, która najlepiej pasuje do projektu, nad którym pracujesz.

Ricky
źródło
6
To jest w 100% poprawne. Możesz ustrukturyzować swoją aplikację w dowolny sposób, który ma dla Ciebie sens. Osobiście używam "src / pages" dla wszystkich tras. W tym folderze utworzę podfolder dla każdego „obszaru” witryny. Przykład „src / pages / questions” iw tym folderze będę miał plik index.vue, który będzie zawierał listę pytań. Będę miał add.vue, który będzie stroną do dodawania pytań, itp. Te „strony” zazwyczaj po prostu łączą potrzebne komponenty, aby utworzyć „stronę”. W moim folderze „src / components” utworzę podfoldery dla takich rzeczy, jak nawigacja, elementy formularzy, niestandardowe współdzielone komponenty itp.
Tim Wickstrom
Zakładam, że komponenty takie jak okna wyskakujące / modalne są zgodne src/componentsz tą konwencją?
Simon Thiel
@Ricky, czy mogę prosić o przyjrzenie się pytaniu Vue.JS związanemu z kodem źródłowym na githubie książki 'Full-Stack Vue.js 2 and Laravel 5' autorstwa Anthone Gore'a: stackoverflow.com/questions/ 59245577 /… ? Szczególnie spójrz na EDYCJA: sekcja PO
Istiaque Ahmed,
Czy możemy powiedzieć, że komponenty w widokach są zbiorem komponentów? Na przykład mój widok listy może mieć wiele komponentów i te komponenty są umieszczone / opakowane wewnątrz pojedynczego komponentu w widoku?
Aayush
20

Myślę, że to bardziej konwencja. Coś, co nadaje się do ponownego użycia, może być przechowywane w folderze src / components, coś, co jest powiązane z routerem, może być przechowywane w src / views

Ravi
źródło
7

Ogólnie sugeruje się umieszczanie widoków wielokrotnego użytku w src/componentskatalogu. Przykłady, takie jak nagłówek, stopka, reklamy, siatki lub dowolne niestandardowe elementy sterujące, takie jak stylizowane pola tekstowe lub przyciski. W widoku można uzyskać dostęp do jednego lub większej liczby komponentów.

Widok może mieć komponent (i), a widok jest faktycznie przeznaczony do otwierania za pomocą adresu URL nawigacji. Zazwyczaj są umieszczane wsrc/views .

Pamiętaj, że nie jesteś ograniczony, aby uzyskać dostęp do składników za pośrednictwem adresu URL. Możesz dodać dowolny komponent do router.jsi uzyskać do niego dostęp. Ale jeśli masz to zrobić, możesz przenieść go do src/viewsfolderu, zamiast go umieszczać src/components.

Składniki są kontrolkami użytkownika, analogicznie do formularzy internetowych asp.net.

Chodzi tylko o ustrukturyzowanie kodu w celu lepszej obsługi i czytelności.

navule
źródło
1

Oba foldery są zasadniczo takie same, ponieważ oba zawierają komponenty, ale estetyka Vue polega na tym, że komponenty, które będą działać jako strony (kierowane do podobnej strony w celu nawigacji) są przechowywane w /viewsfolderze, podczas gdy komponenty wielokrotnego użytku, takie jak pola formularzy, są przechowywane w /componentsfolderze .

Chinedu Chaz
źródło