Introducción a Nuxt.js en Windows

Una guía para ayudarle a instalar el marco web de Nuxt.js y ponerse en marcha en Windows.

Nuxt.js es un marco para crear aplicaciones JavaScript representadas por el servidor basadas en Vue.js, Node.js, Webpack y Babel.js. Se inspiró en Next.js. Es básicamente una plantilla base para Vue. Al igual que Next.js, se crea con atención a los procedimientos recomendados y le permite crear aplicaciones web "universales" de una manera sencilla y coherente, con apenas ninguna configuración. Estas aplicaciones web "universales" representadas por el servidor también se denominan a veces "isomórficas", lo que significa que el código se comparte entre el cliente y el servidor.

Para obtener más información sobre Vue, consulte la página de resumen de Vue .

Prerrequisitos

En esta guía se da por supuesto que ya has completado los pasos para configurar el entorno de desarrollo de Node.js, que incluyen:

• Instale el Subsistema de Windows para Linux (WSL), incluida una distribución de Linux (como Ubuntu), y asegúrese de que se ejecuta en modo WSL 2. Para comprobarlo, abre PowerShell y escribe: wsl -l -v.
• Instale Node.js en WSL 2: aquí se incluye un administrador de versiones, un administrador de paquetes, Visual Studio Code y la extensión de Remote Development.

Se recomienda usar el Subsistema de Windows para Linux al trabajar con aplicaciones NodeJS para mejorar la velocidad de rendimiento, la compatibilidad de llamadas del sistema y para la parodia al ejecutar servidores Linux o contenedores de Docker.

Importante

La instalación de una distribución de Linux con WSL creará un directorio para almacenar archivos: \\wsl\Ubuntu-20.04 (sustituya Ubuntu-20.04 por la distribución de Linux que vaya a usar). Para abrir este directorio en el Explorador de archivos de Windows, abra la línea de comandos de WSL, seleccione el directorio principal con cd ~ y, a continuación, escriba el comando explorer.exe .. Tenga cuidado de no instalar NodeJS ni almacenar archivos con los que vaya a trabajar en la unidad C montada (/mnt/c/Users/yourname$). Si lo hace, ralentizará significativamente los tiempos de instalación y compilación.

Instalar Nuxt.js

Para instalar Nuxt.js, deberá responder a una serie de preguntas sobre el tipo de marco integrado del lado servidor, el marco de interfaz de usuario, el marco de pruebas, el modo, los módulos y el linter que le gustaría instalar:

1. Abra una línea de comandos de WSL (es decir, Ubuntu).

2. Crea la nueva carpeta de proyecto mkdir NuxtProjects y accede al directorio cd NuxtProjects.

3. Instala Nuxt.js y crea un proyecto (reemplazando "my-nuxt-app" por lo que quieras llamar la aplicación): npm create nuxt-app my-nuxt-app

4. El instalador de Nuxt.js ahora le hará las siguientes preguntas:

   • Nombre del proyecto: my-nuxtjs-app
   • Descripción del proyecto: descripción de mi aplicación de Nuxt.js.
   • Nombre del autor: uso mi alias de GitHub.
   • Elija el administrador de paquetes: Yarn o Npm : usamos NPM para nuestros ejemplos.
   • Elegir marco de interfaz de usuario: None, Ant Design Vue, Bootstrap Vue, etc. Vamos a elegir Vuetify para este ejemplo, pero la comunidad de Vue creó un buen resumen comparando estos marcos de interfaz de usuario para ayudarle a elegir la mejor opción para el proyecto.
   • Elegir marcos de servidor personalizados: None, AdonisJs, Express, Fastify, etc. Vamos a elegir Ninguno para este ejemplo, pero en el sitio Dev.to puede encontrar una comparación del marco de servidor 2019-2020.
   • Elija Nuxt.js módulos (use la barra espaciadora para seleccionar módulos o simplemente presione Enter si no quiere ninguno): Axios (para simplificar las solicitudes HTTP) o soporte para PWA (para agregar un service worker, un archivo manifest.json, etc.). No vamos a agregar un módulo para este ejemplo.
   • Elija herramientas de linting: ESLint, Prettier y Archivos almacenados provisionalmente de Lint. Vamos a elegir ESLint (una herramienta para analizar el código y advertirle de posibles errores).
   • Elija un marco de pruebas: None, Jest, AVA. Vamos a elegir Ninguno, ya que no trataremos las pruebas en este inicio rápido.
   • Elija el modo de representación: Universal (SSR) o Aplicación de página única (SPA). Vamos a elegir universal (SSR) para nuestro ejemplo, pero los documentos de Nuxt.js señalan algunas de las diferencias: SSR que requiere un servidor de Node.js que se ejecuta para representar la aplicación y spa para el hospedaje estático.
   • Elegir herramientas de desarrollo: jsconfig.json (recomendado para VS Code para que funcione la finalización de código de IntelliSense)

5. Una vez creado el proyecto, cd my-nuxtjs-app para entrar en el directorio de tu proyecto Nuxt.js, luego ingresa code . para abrir el proyecto en el entorno de VS Code WSL-Remote.

   

6. Hay 3 comandos que debe saber una vez que se instala Nuxt.js:

   • npm run dev para ejecutar una instancia de desarrollo con recarga activa, supervisión de archivos y reejecución de tareas.
   • npm run build para compilar el proyecto.
   • npm start para iniciar la aplicación en modo de producción.

   Abra el terminal de WSL integrado en VS Code (Ver > Terminal). Asegúrate de que la ruta de acceso del terminal apunta al directorio del proyecto (es decir, ~/NuxtProjects/my-nuxt-app$). A continuación, pruebe a ejecutar una instancia de desarrollo de la nueva aplicación de Nuxt.js mediante: npm run dev

7. Se iniciará el servidor de desarrollo local (mostrando algún tipo de barras de progreso geniales para las compilaciones del cliente y el servidor). Una vez que el proyecto haya terminado de compilar, el terminal mostrará "Compilado correctamente" junto con el tiempo necesario para compilar. Dirija el navegador web a http://localhost:3000 para abrir la nueva aplicación de Nuxt.js.

   

8. Abre el archivo pages/index.vue en el editor de VS Code. Busque el título <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> de la página y cámbielo a <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>. Con el navegador web aún abierto en localhost:3000, guarde el cambio y observe cómo la función de recarga en caliente compila y actualiza automáticamente su cambio en el navegador.

9. Veamos cómo Nuxt.js maneja los errores. Quite la etiqueta de cierre </v-card-title> para que su código de título tenga el siguiente aspecto: <v-card-title class="headline">This is my new Nuxt.js app!. Guarde este cambio y observe que se mostrará un error de compilación en el explorador y, en el terminal, para que sepa que falta una etiqueta <v-card-title> de cierre, junto con los números de línea en los que se puede encontrar el error en el código. Reemplace la etiqueta de cierre </v-card-title>, guarde y la página se volverá a cargar.

Para usar el depurador de VS Code con la aplicación de Nuxt.js, seleccione la tecla F5 o vaya a Ver > Depurar (Ctrl+Mayús+D) y Ver > Consola de depuración (Ctrl+Mayús+Y) en la barra de menús. Si selecciona el icono de engranaje en la ventana de depuración, se creará un archivo de configuración de inicio (launch.json) para que pueda guardar los detalles de la configuración de depuración. Para obtener más información, consulte VS Code Debugging.

Para obtener más información sobre Nuxt.js, consulte la guía deNuxt.js.