Estructura de directorios de NuxtJS

En este artículo, aprenderemos sobre la estructura de directorios de NuxtJs. Nuxt.js es un marco de aplicación web gratuito y de código abierto basado en Vue.js, Node.js, Webpack y Babel.js. Nuxt está inspirado en Next.js, que es un framework de propósito similar, basado en React.js.

Crear aplicación NuxtJS :

Paso 1: puede crear un nuevo proyecto NuxtJs usando el siguiente comando:

npx create-nuxt-app gfg

Paso 2: Ahora navegue a su aplicación usando el siguiente comando:

cd gfg

Estructura del proyecto: Se verá así.

Hay 7 subdirectorios principales en NuxtJs:

• Componentes: En este directorio podemos almacenar todos los componentes que vamos a utilizar en nuestra aplicación principal. A diferencia de NextJs o ReactJs, no tenemos que importar manualmente los componentes en nuestras páginas en NuxtJs. NuxtJs escaneará e importará automáticamente sus componentes a sus páginas.

• Páginas: en este directorio, podemos crear páginas para nuestra aplicación NuxtJs. Solo tiene que crear un nuevo archivo .vue dentro del directorio de la página para crear una nueva página. Después de eso, NuxtJs escaneará automáticamente las páginas y creará el enrutador para la aplicación. También puede crear páginas anidadas creando nuevas carpetas dentro del directorio de páginas.

• Activos: en este directorio, podemos almacenar diferentes tipos de activos que vamos a utilizar en nuestra aplicación, como imágenes, fuentes, archivos de audio, logotipos y estilos.

  Nota: si este directorio no existe en su aplicación, puede crearlo simplemente agregando una carpeta con el nombre ‘activos’.

• Complementos: en este directorio podemos agregar los complementos que vamos a usar en nuestra aplicación NuxtJs. Después de instalar los complementos, debemos crear un nuevo archivo para ese complemento dentro de nuestro directorio de complementos.

• Estático: En este directorio almacenaremos los archivos estáticos que no van a cambiar como robot.txt, sitemaps o favicons.

  

• nuxt.config.js: Este es el archivo de configuración para su aplicación NuxtJs. Puede agregar nuevos módulos aquí creando una sección de complementos. También puede anular la configuración predeterminada de su archivo NuxtJs utilizando este archivo nuxt.config.js.

  

• packages.json: este archivo contiene todas las dependencias de su aplicación NuxtJs. También puede ver los comandos para ejecutar o compilar la aplicación dentro de este archivo con el nombre y la versión de su aplicación NuxtJs.

  

Ejemplo: En este ejemplo, vamos a crear una nueva página. Para ello, tenemos que crear un nuevo archivo con el nombre gfg.vue dentro de nuestro directorio de páginas. Agregue el siguiente contenido en el archivo:

<template>
  <div>
    <h3>This is a simple NuxtJs Page.</h3> 
  </div>
</template>

Ejecute la aplicación: Ejecute la aplicación usando el siguiente comando en la terminal.

npm run dev

Producción:

Referencia: https://nuxtjs.org/docs/get-started/directory-structure/