Crear y ejecutar un proyecto de Nuxt.js

¿Qué es Nuxt.js?

Nuxt.js es un marco de código abierto basado en Vue.js, utilizado para construir aplicaciones Vue.js renderizadas por el servidor. Proporciona una amplia gama de características, como renderización del lado del servidor (SSR), generación de sitios estáticos (SSG), división automática de código, un potente sistema de enrutamiento, entre otros, lo que permite a los desarrolladores construir aplicaciones web modernas de manera más eficiente.

Principales características y ventajas de Nuxt.js

• Renderización del lado del servidor (SSR): Mejora la velocidad de carga de la página y el rendimiento de SEO.
• Generación de sitios estáticos (SSG): Pre-renderiza páginas estáticas, mejorando el rendimiento y la experiencia del usuario.
• División automática de código: Carga solo el código JavaScript necesario para la página actual, optimizando el rendimiento.
• Enrutamiento incorporado: Enrutamiento basado en el sistema de archivos, sin necesidad de configuración adicional.
• Modularidad: Fácil integración de bibliotecas y servicios de terceros a través de módulos.
• Ecosistema robusto: Nuxt.js cuenta con un amplio soporte de plugins y módulos, facilitando el desarrollo.

Usar Nuxt.js puede ayudar a los desarrolladores a construir aplicaciones web modernas y altamente sensibles de manera más eficiente.

Crear y ejecutar un proyecto de Nuxt.js utilizando ServBay

En este artículo, utilizaremos el entorno Node.js proporcionado por ServBay para crear y ejecutar un proyecto Nuxt.js. Utilizaremos la función "Host" de ServBay para configurar un servidor web y acceder al proyecto mediante un proxy inverso y servicio de archivos estáticos.

Crear un proyecto Nuxt.js

1. Inicializar el proyecto

   Primero, asegúrese de tener instalado el entorno Node.js proporcionado por ServBay. Luego, utilice el siguiente comando para inicializar un nuevo proyecto Nuxt.js:

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   Siga las indicaciones para ingresar el nombre del proyecto (se recomienda nombrarlo servbay-nuxt-app) y seleccione otras opciones según sea necesario:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm
   ? UI framework: None
   ? Nuxt.js modules: Axios
   ? Linting tools: ESLint
   ? Testing framework: None
   ? Rendering mode: Universal (SSR / SSG)
   ? Deployment target: Server (Node.js hosting)
   ? Development tools: jsconfig.json (Recommended for VS Code)

2. Instalar dependencias

   Ingrese al directorio del proyecto e instale las dependencias:

   cd servbay-nuxt-app
   npm install

Modificar el contenido de salida del proyecto Nuxt.js

1. Modificar archivo pages/index.vue

   Abra el archivo pages/index.vue y modifique el contenido para que la página muestre "Hello ServBay!":

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

Entrar en modo de desarrollo

1. Ejecutar el servidor de desarrollo

   Inicie el servidor de desarrollo y especifique el puerto (por ejemplo: 8585):

   npm run dev -- --port 8585

   Esto iniciará un servidor de desarrollo local y expondrá el puerto 8585.

2. Configurar el proxy inverso de ServBay Host

   Utilice la función "Host" de ServBay para acceder al servidor de desarrollo mediante un proxy inverso. En la configuración del "Host" de ServBay, agregue un nuevo proxy inverso:

   • Nombre: My first Nuxt.js dev site
   • Dominio: servbay-nuxt-test.dev
   • Tipo de host: Proxy inverso
   • IP: 127.0.0.1
   • Puerto: 8585

   Consulte los pasos detallados en agregar un sitio web de desarrollo Nodejs.

3. Acceder al modo de desarrollo

   Abra un navegador y acceda a https://servbay-nuxt-test.dev para ver el proyecto en tiempo real. Dado que ServBay soporta dominios personalizados y certificados SSL gratuitos, disfrutará de mayor seguridad.

Construir versión de producción

1. Construir la versión de producción

   Cuando haya terminado el desarrollo, utilice el siguiente comando para construir la versión de producción:

   npm run build
   npm run export

   Una vez construida, los archivos estáticos generados estarán en el directorio dist.

2. Configurar el servicio de archivos estáticos

   Utilice la función "Host" de ServBay para acceder a la versión de producción mediante un servicio de archivos estáticos. En la configuración del "Host" de ServBay, agregue un nuevo sitio estático:

   • Nombre: My first Nuxt.js production site
   • Dominio: servbay-nuxt-test.prod
   • Tipo de host: Estático
   • Directorio raíz del sitio web: /Applications/ServBay/www/servbay-nuxt-app/dist

3. Acceder en modo de producción

   Abra un navegador y acceda a https://servbay-nuxt-test.prod para ver la versión de producción construida. Mediante los dominios personalizados y los certificados SSL gratuitos de ServBay, su sitio web tendrá mayor seguridad y confiabilidad.

A través de estos pasos, ha logrado crear y ejecutar con éxito un proyecto Nuxt.js y ha utilizado las funcionalidades proporcionadas por ServBay para gestionar y acceder a su proyecto.