forum

forum copied to clipboard

Gostaria de saber qual modelo de estrutura de diretórios vocês usam, o Vue por ser um fw e deixar isso ao modo que o DEV resolva o melhor para ele, é legal, mas quando falamos de uma equipe grande com projeto de médio/grande porte, qual é a estrutura que vocês usam? Alguma nomenclatura especial para componentes comuns da aplicação algo especifico outros?

Eu uso a estrutura fornecida pelo quasar-cli, consegui me adaptar bem a ela.

Gosto da forma como os componentes do Router são carregados:

Por enquanto dividindo services, helpers, config

O meu servico http.js é em axios, fica assim:

E o model fica assim:

Aqui na nossa equipe nós trabalhamos com o conceito de "telas" screens, cada screen tem sua pasta components e store (quando necessário).

Além disso mantemos os arquivos de teste na mesma pasta dos demais arquivos.

screens/
  Home/
    components/
      Index.vue
      Index.spec.vue
  User/
    components/
      Index.vue
      Index.spec.vue
      Edit.vue
      Edit.spec.vue
    store/
      actions.js
      actions.spec.js
      getters.js
      getters.spec.js
      index.js
      mutations.js
      mutations.spec.js
      types.js
      types.spec.js

Quando necessitamos de um componente mais genérico dentro da aplicação o colocamos em uma pasta chamada shared:

shared/
  form/
    DateInput.vue
    DateInput.spec.vue

As rotas colocamos em uma pasta chamada routes e arquivos de tradução em uma pasta chamada i18n.

Ainda temos outra pasta onde adicionamos coisas genéricas como serviços de conexão com API's, manipulação de dados complexos, etc., para isso usamos uma pasta chamada services, tendo esse resultado no final:

src/
  i18n/
  routes/
  screens/
  services/
  shared/

Já utilizamos a estrutura de pastas separadas por camadas (componentes, store, etc) mas gostamos mais dessa separada por telas (screens).

Estou trabalhando com Vue.js desde o final de 2016 e cheguei nessa arquitetura.

Abstraí a camada de serviços com as actions da minha Store que usam o axios pra fazer as requisições pro back-end. E minha Store é dividida em módulos, cada um trabalhando um contexto de dado e usando as constantes de types para os getters, mutations e actions.

PS. Ignore as bagunças e nomenclatura dos módulos.

Meus componentes seguem o pattern de dumb/smart onde os componentes são dumbs e só recebem props e os containers são smarts que conectam a store aos componentes e passam os estados pra eles.

As views são as páginas, é só uma maneira melhor de agrupar containers.

Router tem o router e alguns módulos para as rotas.

Style tem variáveis, reset e uns mixins pra stylus.

Assets são imagens, ícones, vídeos e outros recursos.

Eu tenho gostado bastante desta estrutura https://blog.codecasts.com.br/arquitetura-de-projetos-vue-js-com-ddd-a2bc26817793 tenho usado bastante.