Cómo estructurar un proyecto Vue.js

La perfecta estructura de carpetas y arquitectura de componentes de Vue.js con componentes inteligentes y tontos

Vue.js es más que una exageración, es un gran marco frontend. Es bastante fácil comenzar y crear una aplicación web. Vue.js a menudo se describe como un marco para aplicaciones pequeñas e incluso a veces como una alternativa a jQuery debido a su pequeño tamaño. Personalmente, creo que también puede adaptarse a proyectos más grandes y, en este caso, es importante estructurarlo bien, en términos de la arquitectura de componentes.

Antes de comenzar mi primer gran proyecto Vue.js, investigué un poco para encontrar la estructura de carpetas perfecta, la arquitectura de componentes y la convención de nombres. Revisé la documentación de Vue.js, algunos artículos y muchos proyectos de código abierto de GitHub.

Necesitaba encontrar las respuestas a algunas preguntas que tenía. Eso es lo que encontrarás en esta publicación:

  • ¿Cómo estructura los archivos y carpetas dentro del proyecto Vue.js?
  • ¿Cómo se escriben los componentes inteligentes y tontos y dónde se colocan? Es un concepto que proviene de React.
  • ¿Cuáles son el estilo de codificación y las mejores prácticas de Vue.js?

También documentaré con la fuente que me inspiró y otros enlaces para obtener una mejor comprensión.

Estructura de carpetas de Vue.js

Aquí está el contenido de la carpeta src. Le recomiendo que inicie el proyecto con Vue CLI. Personalmente utilicé la plantilla predeterminada de Webpack.

.
├── app.css
├── App.vue
├── activos
│ └── ...
├── componentes
│ └── ...
├── main.js
├── mixins
│ └── ...
├── enrutador
│ └── index.js
├── tienda
│ ├── index.js
│ ├── módulos
│ │ └── ...
│ └── mutation-types.js
├── traducciones
│ └── index.js
├── utils
│ └── ...
└── vistas
    └── ...

Algunos detalles sobre cada una de estas carpetas:

  • activos: dónde coloca los activos que se importan en sus componentes
  • componentes: todos los componentes de los proyectos que no son las vistas principales
  • mixins: los mixins son las partes del código javascript que se reutilizan en diferentes componentes. En un mixin, puede colocar los métodos de cualquier componente de Vue.js, que se fusionarán con los del componente que lo utiliza.
  • enrutador: todas las rutas de sus proyectos (en mi caso las tengo en index.js). Básicamente en Vue.js todo es un componente. Pero no todo es una página. Una página tiene una ruta como "/ dashboard", "/ settings" o "/ search". Si un componente tiene una ruta, se enruta.
  • store (opcional): las constantes de Vuex en mutation-type.js, los módulos de Vuex en los módulos de subcarpeta (que luego se cargan en index.js).
  • traducciones (opcional): archivos de configuración regional, uso Vue-i18n y funciona bastante bien.
  • utils (opcional): funciones que utilizo en algunos componentes, como pruebas de valor de expresiones regulares, constantes o filtros.
  • vistas: para que el proyecto sea más rápido de leer, separo los componentes que se enrutan y los coloco en esta carpeta. Los componentes que se enrutan para mí son más que un componente, ya que representan páginas y tienen rutas, los pongo en "vistas" y luego, cuando verificas una página, vas a esta carpeta.

Eventualmente puede agregar otras carpetas según sus necesidades, como filtros o constantes, API.

Algunos recursos me inspiraron

  • 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 tontos con Vue.js

Componentes inteligentes y tontos es un concepto que aprendí de React. Los componentes inteligentes también se llaman contenedores, son los que manejan los cambios de estado, son responsables de cómo funcionan las cosas. Por el contrario, los componentes tontos, también llamados presentacionales, solo manejan la apariencia.

Si está familiarizado con el patrón MVC, puede comparar los componentes de volcado con la vista y los componentes inteligentes con el controlador.

En React, los componentes inteligentes y tontos generalmente se colocan en carpetas diferentes, mientras que en Vue.js los coloca todos en la misma carpeta: componentes. Para diferenciar en Vue.js, utilizará una convención de nomenclatura. Supongamos que tiene un componente de tarjeta tonto, entonces debe usar uno de estos nombres:

  • BaseCard
  • AppCard
  • VCard

Si tiene un componente inteligente que utiliza BaseCard y le agrega algunos métodos, puede nombrarlo, por ejemplo, según su proyecto:

  • ProfileCard
  • ItemCard
  • NewsCard

Si su componente inteligente no es solo una BaseCard "más inteligente" con métodos, simplemente use cualquier nombre que se ajuste a su componente y sin comenzar con Base (o App, o V), por ejemplo:

  • DashboardStatistics
  • Resultados de la búsqueda
  • Perfil del usuario

¡Esta convención de nombres proviene de la guía de estilo oficial de Vue.js que también contiene convenciones de nombres!

Convenciones de nombres

Aquí hay algunas convenciones provenientes de la guía de estilo oficial de Vue.js que necesita para estructurar bien su proyecto:

  • Los nombres de los componentes siempre deben tener varias palabras, excepto los componentes raíz de la "Aplicación". Utilice "UserCard" o "ProfileCard" en lugar de "Card", por ejemplo.
  • Cada componente debe estar en su propio archivo.
  • Los nombres de archivo de componentes de un solo archivo deben ser siempre PascalCase o siempre kebab-case. Utilice "UserCard.vue" o "user-card.vue".
  • Los componentes que solo se usan una vez por página deben comenzar con el prefijo "The", para indicar que solo puede haber uno. Por ejemplo, para una barra de navegación o un pie de página, debe usar "TheNavbar.vue" o "TheFooter.vue".
  • Los componentes secundarios deben incluir su nombre principal como prefijo. Por ejemplo, si desea utilizar un componente "Foto" en la "Tarjeta de usuario", lo llamará "Tarjeta de usuario". Es para una mejor legibilidad ya que los archivos en una carpeta generalmente están ordenados alfabéticamente.
  • Utilice siempre el nombre completo en lugar de la abreviatura en el nombre de sus componentes. Por ejemplo, no use "UDSettings", use en su lugar "UserDashboardSettings".

Guía de estilo oficial de Vue.js

Si usted es un principiante o avanzado con Vue.js, debe leer esta guía de estilo de Vue.js, contiene muchos consejos y también convenciones de nombres. Contiene muchos ejemplos de cosas que hacer y no hacer.

Si te gustó esta publicación, haz clic en el botón de aplaudir below a continuación para mostrar tu apoyo. Además, siéntase libre de comentar y dar cualquier tipo de comentario. ¡No te olvides de seguirme!

¿Quieres ver más artículos como este? Apóyame en Patreon