New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Estrutura de diretórios com Vuejs #408

Open
leandroruel opened this Issue Jan 16, 2017 · 15 comments

Comments

Projects
None yet
10 participants
@leandroruel

leandroruel commented Jan 16, 2017

Olá galera, estou estudando o Vuejs, para começar a usar num projeto, eu usava o angular antes, agora quero saber como construir e organizar uma estrutura de diretórios com Vuejs, eu andei pesquisando mas encontrei exemplos bem básicos, alguém teria algum exemplo para mostrar?

@victormiguez

This comment has been minimized.

Show comment
Hide comment

victormiguez commented Jan 16, 2017

Invoco o @luisfmsouza.

@alexsandro-xpt

This comment has been minimized.

Show comment
Hide comment
@alexsandro-xpt

alexsandro-xpt Jan 16, 2017

Ja tentou usaro Vue CLI? ele gera o diretório todo pra voce e possui 5 templates com estrutura de diretorios prontos pra voce https://github.com/vuejs/vue-cli

alexsandro-xpt commented Jan 16, 2017

Ja tentou usaro Vue CLI? ele gera o diretório todo pra voce e possui 5 templates com estrutura de diretorios prontos pra voce https://github.com/vuejs/vue-cli

@edmolima

This comment has been minimized.

Show comment
Hide comment
@edmolima

edmolima Jan 16, 2017

Uma estrutura que adoto seja vue ou react é:

app/
./assets/
./components/
./templates/

  • index.html - aqui basicamente é o html da single page.

index.js (o arquivo principal).

webpack/

  • arquivos de configurações do webpack (prod, dev e base).

bin/

  • tasks (scripts para clean, build, deploy e etc).
    webpack.config.js

No geral me atende bem, é bem parecido com a organização de diretórios do RoR! Mas uma sugestão é fazer o que o @alexsandro-xpt citou, usa o Vue-CLI que nele já tem alguns templates predefinidos!

edmolima commented Jan 16, 2017

Uma estrutura que adoto seja vue ou react é:

app/
./assets/
./components/
./templates/

  • index.html - aqui basicamente é o html da single page.

index.js (o arquivo principal).

webpack/

  • arquivos de configurações do webpack (prod, dev e base).

bin/

  • tasks (scripts para clean, build, deploy e etc).
    webpack.config.js

No geral me atende bem, é bem parecido com a organização de diretórios do RoR! Mas uma sugestão é fazer o que o @alexsandro-xpt citou, usa o Vue-CLI que nele já tem alguns templates predefinidos!

@diogomoretti diogomoretti changed the title from estrutura de diretório com Vuejs to Estrutura de diretórios com Vuejs Jan 17, 2017

@felisio

This comment has been minimized.

Show comment
Hide comment
@felisio

felisio Jan 17, 2017

Dentro da documentação do Vuex também tem um exemplo de estrutura, baseado no Vue-cli, e tem um projeto de exemplo.

https://vuex.vuejs.org/en/structure.html

felisio commented Jan 17, 2017

Dentro da documentação do Vuex também tem um exemplo de estrutura, baseado no Vue-cli, e tem um projeto de exemplo.

https://vuex.vuejs.org/en/structure.html

@luisfmsouza

This comment has been minimized.

Show comment
Hide comment
@luisfmsouza

luisfmsouza Jan 17, 2017

Valeu @victormiguez !

A estrutura do Vuex é bem parecida com a que utilizamos hoje. Com a diferença que temos uma separação por páginas(e não um main.js que controle tudo) e também não utilizamos .vue.

De uma forma simplificada temos:

├── pagina-1 // podemos ter várias páginas
│   ├── index.js
├── componentes // podemos ter vários componentes
    └── componente-1
        ├── component-1.js
        ├── component-1.scss
        ├── template.html

luisfmsouza commented Jan 17, 2017

Valeu @victormiguez !

A estrutura do Vuex é bem parecida com a que utilizamos hoje. Com a diferença que temos uma separação por páginas(e não um main.js que controle tudo) e também não utilizamos .vue.

De uma forma simplificada temos:

├── pagina-1 // podemos ter várias páginas
│   ├── index.js
├── componentes // podemos ter vários componentes
    └── componente-1
        ├── component-1.js
        ├── component-1.scss
        ├── template.html
@leandroruel

This comment has been minimized.

Show comment
Hide comment
@leandroruel

leandroruel Jan 17, 2017

@luisfmsouza gostei... mas ai, isso é para um projeto simples? eu estou trabalhando em refazer todo o sistema de uma faculdade. financeiro, acadêmico, portal do aluno e etc. é isso que me preocupa na estrutura, se ela vai ser escalável e não vai ficar bagunçada

leandroruel commented Jan 17, 2017

@luisfmsouza gostei... mas ai, isso é para um projeto simples? eu estou trabalhando em refazer todo o sistema de uma faculdade. financeiro, acadêmico, portal do aluno e etc. é isso que me preocupa na estrutura, se ela vai ser escalável e não vai ficar bagunçada

@luisfmsouza

This comment has been minimized.

Show comment
Hide comment
@luisfmsouza

luisfmsouza Jan 17, 2017

Por enquanto o nosso projeto ainda não está grande. E até por isso já temos algumas mudanças em vista.

Uma opção seria seguir a estrutura que vocês já tem, apenas encaixando o Vue. Ou então começar com uma estrutura simples e ir incrementando conforme a necessidade, afinal tem muitos problemas que vão surgir no meio do caminho e não temos como prever no início.

luisfmsouza commented Jan 17, 2017

Por enquanto o nosso projeto ainda não está grande. E até por isso já temos algumas mudanças em vista.

Uma opção seria seguir a estrutura que vocês já tem, apenas encaixando o Vue. Ou então começar com uma estrutura simples e ir incrementando conforme a necessidade, afinal tem muitos problemas que vão surgir no meio do caminho e não temos como prever no início.

@leandroruel

This comment has been minimized.

Show comment
Hide comment
@leandroruel

leandroruel Jan 19, 2017

estou vendo que o webpack é essencial em projetos com Vue... é mais uma coisa para aprender...

leandroruel commented Jan 19, 2017

estou vendo que o webpack é essencial em projetos com Vue... é mais uma coisa para aprender...

@felisio

This comment has been minimized.

Show comment
Hide comment
@felisio

felisio Jan 19, 2017

@leandroruel trabalho em um erp todo feito em Vue.js e estamos usando a seguinte estrutura

  src/
    |__ components  # Estrtutura especifica do projeto.
       |__ Area   # a area do software ex: Financeiro, Operacional
          |__ Modulo   # ex: Banco - todos os components referente a Banco
              |__ FormBanco.vue   # nesse caso o component de formulario de cadastro do Banco
              |__ ListBanco.vue   # nesse caso o component que lista os Banco
    |__ assets   # assets do projeto
    |__ commons   # Components Comuns a todos
    |__ graphql # todas as querys do graphql
    |__ helpers # bibliotecas de funções puras em js
    |__ vuex # toda a estrutura do vuex
    |__ mixins # Mixins Vue usado no projeto

espero que tenha captado a ideia...

felisio commented Jan 19, 2017

@leandroruel trabalho em um erp todo feito em Vue.js e estamos usando a seguinte estrutura

  src/
    |__ components  # Estrtutura especifica do projeto.
       |__ Area   # a area do software ex: Financeiro, Operacional
          |__ Modulo   # ex: Banco - todos os components referente a Banco
              |__ FormBanco.vue   # nesse caso o component de formulario de cadastro do Banco
              |__ ListBanco.vue   # nesse caso o component que lista os Banco
    |__ assets   # assets do projeto
    |__ commons   # Components Comuns a todos
    |__ graphql # todas as querys do graphql
    |__ helpers # bibliotecas de funções puras em js
    |__ vuex # toda a estrutura do vuex
    |__ mixins # Mixins Vue usado no projeto

espero que tenha captado a ideia...

@leandroruel

This comment has been minimized.

Show comment
Hide comment
@leandroruel

leandroruel Jan 20, 2017

@felisio agradeço pelo exemplo, já me deu uma boa clareada, vocês usam webpack também?

leandroruel commented Jan 20, 2017

@felisio agradeço pelo exemplo, já me deu uma boa clareada, vocês usam webpack também?

@felisio

This comment has been minimized.

Show comment
Hide comment
@felisio

felisio Jan 20, 2017

@leandroruel sim estou usando vue-cli com webpack

felisio commented Jan 20, 2017

@leandroruel sim estou usando vue-cli com webpack

@vedovelli

This comment has been minimized.

Show comment
Hide comment
@vedovelli

vedovelli Jan 23, 2017

Aqui há um starter kit com o qual tive o prazer de colaborar. Talvez ajude!

https://github.com/codecasts/spa-starter-kit

vedovelli commented Jan 23, 2017

Aqui há um starter kit com o qual tive o prazer de colaborar. Talvez ajude!

https://github.com/codecasts/spa-starter-kit

@filipemerker

This comment has been minimized.

Show comment
Hide comment
@filipemerker

filipemerker Jan 29, 2017

Se serve como referência, tem um projetinho do próprio Evan You que é um clone do hacker news em Vue.
Ali ele usa algo assim:

  public/ # assets do projeto, imagens, svgs, jsons, etc...
  src/
    |__ components # componentes do projeto, ex.: comentário, lista se comentários, post,lista de posts, etc... 
    |__ filters # filters que serão utilizados nos components
    |__ router # vue-router
    |__ store  # api utils e vuex store
    |__ views # telas do projeto, ex.: blog, home, etc...

Acho excelente essa forma de organizar o projeto e tento sempre me basear nela. Claro que sempre acabo criando um diretório de utils para colocar código de terceiros ou helpers.

Outra fonte que pode te ajudar é dar uma lida na Lista de projetos open source do Awesome Vue. Lá tu pode encontrar uma série de projetos famosos que usam diferentes arquiteturas.

Por fim, lembre que uma estrutura de diretórios só é boa se funciona para você e seu time. Use algo que escale fácil. Esse exemplo do Hacker News clone serve muito bem para pequenos projetos, mas se tu vai desenvolver alguma aplicação de larga escala, certamente você vai ter que reorganizar essa estrutura para escalar melhor.

Estrutura escalável

Para usar um exemplo pessoal, acho que deixar componentes e views misturados e só separar em um diretório o que for compartilhável funciona melhor para grandes aplicações. Um exemplo do boilerplate de Vue que eu criei para tocar projetos na empresa que eu trabalho:

  src/
    |__ filters # filters que serão utilizados nos components
    |__ router # vue-router
    |__ store  # api utils e vuex store
    |__ screens # telas do projeto, ex.: blog, home, etc...
        |__ Blog
            |__ Blog.vue # código da tela de blog
            |__ components # componentes restritos ao blog
                |__ Post.vue
        |__ Contact
            |__ Contact.vue
            |__ components
                |__ Form.vue
    |__ shared
        |__ components # componentes que serão compartilhado em diferentes screens
            |__ ListItem.vue

Percebe como dessa forma o diretório de componentes não fica sobrecarregado e você sempre consegue ver claramente quem pertence a quem?
Enfim, ao adotar uma estrutura de diretórios para seus projetos, sempre tenha em mente a escalabilidade e o nível de engajamento do seu time. Se funcionar para todos e escalar bem, está ótimo.

Espero ter ajudado.

EDIT

Só mais um adendo, tente sempre ter um diretório exclusivo para a aplicação. No caso, estou usando /src, mas pode ser /app ou qualquer outro nome. Fora desse diretório, na raiz, crie um chore ou config para configuração do seu webpack e chore da sua aplicação. Crie também um outro separado para seus testes. Deixe a raiz APENAS para arquivos que não possam estar em outro lugar, como .babelrc, .eslintrc e outros rcs, .gitignore, README.md, arquivos de deploy, package.json, web.config ou .htaccess.

Dessa forma, você deixa seu projeto muito mais profissional e organizado. É anti-pattern deixar App.vue ou main.js ou qualquer diretório relacionado ao código da aplicação na raiz do projeto. Fica a dica!

filipemerker commented Jan 29, 2017

Se serve como referência, tem um projetinho do próprio Evan You que é um clone do hacker news em Vue.
Ali ele usa algo assim:

  public/ # assets do projeto, imagens, svgs, jsons, etc...
  src/
    |__ components # componentes do projeto, ex.: comentário, lista se comentários, post,lista de posts, etc... 
    |__ filters # filters que serão utilizados nos components
    |__ router # vue-router
    |__ store  # api utils e vuex store
    |__ views # telas do projeto, ex.: blog, home, etc...

Acho excelente essa forma de organizar o projeto e tento sempre me basear nela. Claro que sempre acabo criando um diretório de utils para colocar código de terceiros ou helpers.

Outra fonte que pode te ajudar é dar uma lida na Lista de projetos open source do Awesome Vue. Lá tu pode encontrar uma série de projetos famosos que usam diferentes arquiteturas.

Por fim, lembre que uma estrutura de diretórios só é boa se funciona para você e seu time. Use algo que escale fácil. Esse exemplo do Hacker News clone serve muito bem para pequenos projetos, mas se tu vai desenvolver alguma aplicação de larga escala, certamente você vai ter que reorganizar essa estrutura para escalar melhor.

Estrutura escalável

Para usar um exemplo pessoal, acho que deixar componentes e views misturados e só separar em um diretório o que for compartilhável funciona melhor para grandes aplicações. Um exemplo do boilerplate de Vue que eu criei para tocar projetos na empresa que eu trabalho:

  src/
    |__ filters # filters que serão utilizados nos components
    |__ router # vue-router
    |__ store  # api utils e vuex store
    |__ screens # telas do projeto, ex.: blog, home, etc...
        |__ Blog
            |__ Blog.vue # código da tela de blog
            |__ components # componentes restritos ao blog
                |__ Post.vue
        |__ Contact
            |__ Contact.vue
            |__ components
                |__ Form.vue
    |__ shared
        |__ components # componentes que serão compartilhado em diferentes screens
            |__ ListItem.vue

Percebe como dessa forma o diretório de componentes não fica sobrecarregado e você sempre consegue ver claramente quem pertence a quem?
Enfim, ao adotar uma estrutura de diretórios para seus projetos, sempre tenha em mente a escalabilidade e o nível de engajamento do seu time. Se funcionar para todos e escalar bem, está ótimo.

Espero ter ajudado.

EDIT

Só mais um adendo, tente sempre ter um diretório exclusivo para a aplicação. No caso, estou usando /src, mas pode ser /app ou qualquer outro nome. Fora desse diretório, na raiz, crie um chore ou config para configuração do seu webpack e chore da sua aplicação. Crie também um outro separado para seus testes. Deixe a raiz APENAS para arquivos que não possam estar em outro lugar, como .babelrc, .eslintrc e outros rcs, .gitignore, README.md, arquivos de deploy, package.json, web.config ou .htaccess.

Dessa forma, você deixa seu projeto muito mais profissional e organizado. É anti-pattern deixar App.vue ou main.js ou qualquer diretório relacionado ao código da aplicação na raiz do projeto. Fica a dica!

@leandroruel

This comment has been minimized.

Show comment
Hide comment
@leandroruel

leandroruel Jan 30, 2017

@filipemerker Boa filipe! obrigado pela dica! ps: o boilerplate do seu último link esta parecido ao que eu já tenho montado aqui. só muda algumas pastas que adicionei

leandroruel commented Jan 30, 2017

@filipemerker Boa filipe! obrigado pela dica! ps: o boilerplate do seu último link esta parecido ao que eu já tenho montado aqui. só muda algumas pastas que adicionei

@LFeh LFeh added the [Resolvido] label Jan 30, 2017

@danilovaz

This comment has been minimized.

Show comment
Hide comment
@danilovaz

danilovaz Feb 6, 2017

@filipemerker caraca, tô começando um projeto em Vue agora e seu comentário já me deu um norte mais organizado pra seguir 🍻

danilovaz commented Feb 6, 2017

@filipemerker caraca, tô começando um projeto em Vue agora e seu comentário já me deu um norte mais organizado pra seguir 🍻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment