Como estruturar um projeto Vue.js

A estrutura de pastas e a arquitetura de componentes perfeitas do Vue.js. com componentes inteligentes e burros

O Vue.js é mais do que um hype, é uma ótima estrutura de front-end. É muito fácil começar e criar um aplicativo da web. O Vue.js é frequentemente descrito como uma estrutura para aplicativos pequenos e, às vezes, como uma alternativa ao jQuery devido ao seu tamanho pequeno! Pessoalmente, acho que também pode ser adequado para projetos maiores e, nesse caso, é importante estruturá-lo bem, em termos de arquitetura de componentes.

Antes de iniciar meu primeiro grande projeto Vue.js., fiz algumas pesquisas para encontrar a estrutura de pastas perfeita, a arquitetura de componentes e a convenção de nomenclatura. Examinei a documentação do Vue.js, alguns artigos e muitos projetos de código aberto do GitHub.

Eu precisava encontrar as respostas para algumas perguntas que eu tinha. É isso que você encontrará nesta postagem:

  • Como você estrutura os arquivos e pastas dentro do projeto Vue.js.
  • Como você escreve componentes Smart e Dumb e onde os coloca? É um conceito vindo do React.
  • O que são o estilo de codificação do Vue.js e as práticas recomendadas?

Também documentarei com a fonte em que me inspirei e outros links para entender melhor.

Estrutura de pastas do Vue.js.

Aqui está o conteúdo da pasta src. Eu recomendo que você inicie o projeto com o Vue CLI. Eu pessoalmente usei o modelo padrão do Webpack.

.
├── app.css
├── App.vue
├── ativos
│ └── ...
Components── componentes
│ └── ...
├── main.js
Mix── mixins
│ └── ...
Router── roteador
│ └── index.js
├── loja
│ ├── index.js
Modules ├── módulos
│ │ └── ...
Mut └── mutation-types.js
├── traduções
│ └── index.js
├── utils
│ └── ...
Views── visualizações
    └── ...

Alguns detalhes sobre cada uma dessas pastas:

  • ativos - Onde você coloca quaisquer ativos importados em seus componentes
  • componentes - Todos os componentes dos projetos que não são as principais visualizações
  • mixins - os mixins são as partes do código javascript que são reutilizadas em diferentes componentes. Em um mixin, você pode colocar os métodos de qualquer componente no Vue.js, que serão mesclados aos do componente que o usa.
  • router - Todas as rotas dos seus projetos (no meu caso, eu os tenho no index.js). Basicamente, no Vue.js, tudo é um componente. Mas nem tudo é uma página. Uma página possui uma rota como “/ dashboard”, “/ settings” ou “/ search”. Se um componente tem uma rota, ele é roteado.
  • store (opcional) - As constantes Vuex em mutation-type.js, os módulos Vuex nos módulos de subpasta (que são carregados no index.js).
  • traduções (opcional) - arquivos de localidades, eu uso o Vue-i18n e funciona muito bem.
  • utils (opcional) - Funções que eu uso em alguns componentes, como teste de valor de expressão regular, constantes ou filtros.
  • visualizações - Para tornar a leitura mais rápida do projeto, separo os componentes roteados e os coloco nesta pasta. Os componentes que são roteados para mim são mais do que um componente, pois representam páginas e possuem rotas. Coloco-os em "views". Quando você verifica uma página, acessa esta pasta.

Eventualmente, você pode adicionar outras pastas, dependendo da sua necessidade, como filtros ou constantes, API.

Alguns recursos que me inspiraram

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Componentes inteligentes vs burros com Vue.js

Componentes inteligentes e burros é um conceito que aprendi com o React. Componentes inteligentes também são chamados de contêineres, são os que lidam com as mudanças de estado, são responsáveis ​​por como as coisas funcionam. Pelo contrário, os componentes mudos, também chamados de apresentação, lidam apenas com a aparência.

Se você estiver familiarizado com o padrão MVC, poderá comparar os componentes de despejo com o View e os componentes inteligentes com o Controller!

No React, componentes inteligentes e burros geralmente são colocados em pastas diferentes, enquanto no Vue.js você os coloca na mesma pasta: componentes. Para se diferenciar no Vue.js, você usará uma convenção de nomenclatura. Digamos que você tenha um componente idiota do cartão, use um destes nomes:

  • BaseCard
  • AppCard
  • VCard

Se você possui um componente inteligente que usa o BaseCard e adiciona alguns métodos, é possível, por exemplo, nomeá-lo, dependendo do seu projeto:

  • ProfileCard
  • ItemCard
  • NewsCard

Se o seu componente inteligente não for apenas um BaseCard “mais inteligente” com métodos, basta usar qualquer nome que seja adequado ao seu componente e sem iniciar com o Base (ou App ou V), por exemplo:

  • DashboardStatistics
  • Procurar Resultados
  • Perfil de usuário

Esta convenção de nomenclatura vem do guia de estilo oficial do Vue.js. que também contém convenções de nomenclatura!

Convenções de nomenclatura

Aqui estão algumas convenções provenientes do guia de estilo oficial do Vue.js. que você precisa para estruturar bem seu projeto:

  • Os nomes dos componentes sempre devem ter várias palavras, exceto os componentes "App" raiz. Use “UserCard” ou “ProfileCard” em vez de “Card”, por exemplo.
  • Cada componente deve estar em seu próprio arquivo.
  • Os nomes de arquivos dos componentes de arquivo único devem ser sempre PascalCase ou sempre kebab-case. Use “UserCard.vue” ou “user-card.vue”.
  • Os componentes usados ​​apenas uma vez por página devem começar com o prefixo “The”, para indicar que só pode haver um. Por exemplo, para uma barra de navegação ou rodapé, você deve usar "TheNavbar.vue" ou "TheFooter.vue".
  • Os componentes filhos devem incluir o nome do pai como prefixo. Por exemplo, se você deseja que um componente "Foto" seja usado no "Cartão do Usuário", você o chamará "Cartão do Usuário". É para melhor legibilidade, pois os arquivos em uma pasta geralmente são ordenados alfabeticamente.
  • Sempre use o nome completo em vez de abreviação no nome dos seus componentes. Por exemplo, não use "UDSettings", use "UserDashboardSettings".

Guia de estilo oficial do Vue.js.

Seja você um iniciante ou avançado no Vue.js., leia este guia de estilo do Vue.js. Ele contém muitas dicas e também convenções de nomes. Ele contém muitos exemplos de coisas para fazer e não fazer.

Se você gostou deste post, clique no botão cl abaixo algumas vezes para mostrar seu apoio! Além disso, fique à vontade para comentar e dar qualquer tipo de feedback. Não se esqueça de me seguir!

Deseja ver mais artigos como este? Apoie-me no Patreon