Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
En este Curso Intensivo de Nuxtjs, no profundizaremos sobre la teoría, porque para ello tienes disponible la Página Oficial de Nuxtjs, mi propósito fundamental es explicarte, de la mejor manera posible, todo lo que necesitas para comenzar a explorar el desarrollo de aplicaciones web, utilizando este magnífico Framework, fruto de una evolución de Vuex, y que ofrece una manera mucho más simple, en mi opinión, de aplicar múltiples mejoras en cuanto al diseño y funcionalidad de las webs.
Sin más que añadir por el momento, vamos a comenzar ya con la primera parte del curso:
Prerrequisitos e instalación de NuxtJS
Lo primero que vamos a necesitar, es un entorno de desarrollo estable, en el que podamos ejecutar todo nuestro código sin complicarnos la vida; en mi caso, como trabajado con Windows 10, he optado por utilizar el Subsitema de Linux con WSL2 en mi ordenador, si no lo has utilizado, aquí te explico cómo hacerlo.
El siguiente requisito para comenzar a trabajar con Nuxtjs, una vez configurado nuestro entorno, será descarga e Instalar NodeJS, si ya lo tenías instalado, te recomiendo actualizar a la versión más reciente ya que se hicieron varias correcciones sobre errores de compatibilidad con Nuxtjs.
Antes de comenzar con la instalación de Nuxtjs, te recomiendo que compruebes las versiones de Nodejs y Npm que tienes instaladas, para ello puedes usar el comando:
node -v
npm -v
Instalación del proyecto con Nuxt
Ahora que ya tenemos todo a punto, listos para comenzar con nuestro proyecto, nos colocaremos en la carpeta destinada para ello, y crearemos una nueva carpeta a la que daremos todos los permisos para evitar fallos durante el proceso de instalación.
Una vez realizados estos pasos, podremos comenzar con la descarga e instalación de la estructura principal de nuestro proyecto, yo he creado una carpeta llamada proyectoNuxt, y dentro de esta tendré otra carpeta a la que llamaré cliente, que será donde alojaré todos los archivos de mi instalación con Nuxtjs, de esta forma, una vez realizada mi instalación, podré trabajar conectándome, por ejemplo a otros proyectos mediante API, manteniendo una estructura organizada.
sudo mkdir proyectoNuxt
sudo chmod -R 777 proyectoNuxt
cd proyectoNuxt/
Si vamos a la Página Oficial de Nuxt, comprobaremos que para instalarlo podremos utilizar npm o yarm, en mi caso optaré por la primera opción pero puedes hacerlo con la que prefieras.
Estando dentro de la carpeta donde alojaremos la instalación, ejecutaremos el siguiente comando, que crerá la carpeta cliente y dentro alojará todos los archivos de nuestra instalación de Nuxtjs:
npx create-nuxt-app cliente
De inmediato, comenzará la descarga de todos los archivos necesarios para que comencemos a trabajar con Nuxtjs. Y una vez descargado se nos realizarán varias preguntas sobre el proyecto que vamos a comenzar, para terminar con las configuraciones correspondientes:
Tendremos la oportunidad de seleccionar varias opciones, previas a nuestra instalación, como el uso de algún Framework de testeo o de Frontend, si usaremos control de versiones, etc.
Una vez hayamos seleccionado las opciones que consideramos importantes para nuestro proyecto, entonces, continuará la descargar y configuración final del Nuxtjs y se mostrará en pantalla un conjunto de informaciones, dentro de las que están los comandos fundamentales para arrancar nuestro proyecto y comenzar con la diversión.
En nuestro caso, nos moveremos a la nueva carpeta cliente y una vez allí, ejecutaremos el comando
npm run dev
Si todo ha ido bien, entonces veremos la url "http://localhost:3000/", para acceder a nuestro proyecto, si la copiamos en el navegador deberíamos ver la página de bienvenida de Nuxtjs.
Y si abrimos, utilizando el IDE de nuestra preferencia, los archivos donde tenemos alojado nuestro proyecto, podremos comprobar la estructura de Nuxtjs, que explicaremos en detalle a medida que avancemos en el desarrollo del curso.
