Как структурировать компоненты в большом приложении vue.js?

Я использовал Vue.js для небольшого одностраничного приложения или для небольших компонентов. Но теперь я пытаюсь создать с его помощью весь интерфейс приложения, и у меня возникли проблемы с архитектурой моего проекта.

Должен ли я создавать один компонент для каждой страницы? (Как в документе vue router), например HomePage, ArticlePage, LoginPage, ContactPage и т. д.?

Но как мне организовать папку с таким количеством компонентов?

И мне было интересно, есть ли какая-то типичная архитектура для больших приложений vue.js?

Вот моя текущая архитектура:

Архитектура VueJs


person CanardMandarin    schedule 13.10.2016    source источник


Ответы (2)


Эта структура в порядке, и я думаю, что она у вас есть внутри src/. Структуры — это всегда что-то очень субъективное, поэтому идеального способа не существует. Вы тот, кто будет иметь дело с этим, так что вы должны чувствовать себя более комфортно.

Я также использую папку под названием директивы, другую для плагинов и еще одну для представлений, куда я помещаю содержимое «страниц».

Пример:

├ assets
├ components
│  ├ alerts.vue
│  └ menu.vue
├ directives
│  └ datepicker.vue
├ plugins
│  ├ auth.js
│  └ alerts.js
├ views
│  ├ home.vue
│  └ users
│    ├ edit.vue
│    └ list.vue
├─ App.vue
└─ main.js

Также постарайтесь не перепутать папку с ресурсами, потому что та, что внутриsrc/, будет обрабатываться. Для обычных ресурсов, которые не нужно обрабатывать или которые вы не хотите упаковывать, поместите их в папку static/.

person ragnar    schedule 16.10.2016

Вы должны сделать больше папок и подпапок для классификации архитектуры.

Я делюсь своим текущим использованием этого подхода. Он более многоразовый и предпочитает, чтобы вы работали в команде разработчиков, состоящей из нескольких человек.

Абсолютно подходит для больших приложений. Он включает 3 части.

Часть 1, Часть 2, Часть 3

person tommychoo    schedule 12.10.2017