Estructura de un proyecto de Vue.js

El archivo package.json es fundamental en cualquier proyecto Node.js. Contiene metadatos sobre el proyecto, como su nombre, versión, dependencias y scripts.

• Dependencias: Aquí se listan todas las dependencias necesarias para el proyecto.
• Scripts: Define comandos útiles para ejecutar tareas comunes, como iniciar el servidor de desarrollo o construir el proyecto para producción.

Este directorio contiene todas las dependencias de Node.js que tu proyecto necesita. No debes modificar manualmente nada en este directorio, ya que es gestionado automáticamente por npm o yarn.

Contiene todas las dependencias instaladas mediante npm install. No necesitamos modificar nada aquí directamente, ya que este directorio es gestionado automáticamente por npm y Vite.

Dependiendo de si estás utilizando Vite o Vue CLI, encontrarás uno de estos archivos de configuración. Aquí puedes personalizar el comportamiento del servidor de desarrollo, la compilación y otras configuraciones específicas del proyecto.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
plugins: [vue()],
server: {
port: 3000,
},
});

Este archivo especifica qué archivos y directorios deben ser ignorados por Git. Es útil para evitar subir archivos innecesarios o sensibles al repositorio.

node_modules/
dist/
.env

Estos archivos contienen variables de entorno que pueden ser utilizadas en tu aplicación. Por ejemplo, puedes definir la URL de una API o claves de autenticación.

VUE_APP_API_URL=https://api.example.com

Configuración de ESLint para mantener estándares de código:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

Punto de entrada de la aplicación. Aquí se monta Vue y se configura la aplicación.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

El componente raíz de la aplicación:

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper">
      <HelloWorld msg="¡Bienvenido a tu aplicación Vue 3!" />
      <nav>
        <RouterLink to="/">Inicio</RouterLink>
        <RouterLink to="/about">Acerca de</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
}

/* Más estilos... */
</style>

Este directorio contiene recursos estáticos como imágenes, fuentes y estilos globales. A diferencia de los archivos en public/, los archivos en assets/ son procesados por el sistema de compilación de Vue.

import '@/assets/global.css';

Este directorio almacena recursos estáticos que serán procesados por Vite. Por ejemplo,

assets/
├── logo.svg
└── main.css

Este directorio almacena los componentes reutilizables de Vue. Los componentes en Vue son piezas independientes de interfaz que podemos combinar para construir la estructura de la aplicación.

Cada componente Vue tiene su propio archivo .vue, que incluye el template, script y estilos.

Los componentes se deben nombrar usando el formato PascalCase (HelloWorld.vue) o kebab-case (hello-world.vue) para seguir las convenciones de Vue. Por ejemplo,

components/
├── HelloWorld.vue
├── TheHeader.vue
├── TheFooter.vue
└── ui/
    ├── BaseButton.vue
    └── BaseInput.vue

Aquí almacenamos las vistas principales de la aplicación, que suelen estar asociadas a rutas específicas de Vue Router. Por ejemplo,

views/
├── HomeView.vue
└── AboutView.vue

Aquí configuramos Vue Router para gestionar la navegación en nuestra aplicación. Por ejemplo,

router/
└── index.js

Para gestión de estado con Pinia (si la usamos claro). Por ejemplo,

stores/
└── counter.js

Para APIs y servicios externos. Por ejemplo,

services/
├── api.js
└── authService.js

Los composables son funciones reutilizables que encapsulan lógica compartida. Por ejemplo,

utils/
├── useFilterTable.js
└── useValidateNumber.js

Para funciones de utilidad. Por ejemplo,

utils/
├── formatter.js
└── validation.js