Crear y ejecutar un proyecto de Vue.js

¿Qué es Vue.js?

Vue.js es un marco de JavaScript progresivo para construir interfaces de usuario. A diferencia de otros marcos grandes, Vue está diseñado para desarrollo incremental de abajo hacia arriba. El núcleo de Vue se centra únicamente en la capa de vista, no solo es fácil de aprender, sino que también es fácil de integrar con bibliotecas de terceros o proyectos existentes. Vue 3 es la última versión de Vue.js y trae muchas características y mejoras nuevas, incluida un mejor rendimiento, un tamaño de paquete más pequeño y un mejor soporte para TypeScript.

Principales características y ventajas de Vue 3

• API de composición: organiza el código lógico a través de la composición de funciones, haciendo el código más fácil de mantener y reutilizar.
• Mejor rendimiento: Vue 3 usa objetos Proxy para implementar el sistema reactivo, mejorando el rendimiento significativamente.
• Tamaño de paquete más pequeño: mediante la tecnología de Tree-shaking, el tamaño del paquete de Vue 3 es más pequeño que el de Vue 2.
• Mejor soporte para TypeScript: Vue 3 proporciona definiciones de tipo TypeScript mejoradas, haciendo la experiencia de desarrollo más óptima.
• Ciclo de vida de componentes mejorado: los nuevos hooks en el ciclo de vida hacen que la lógica del componente sea más clara y más fácil de gestionar.

El uso de Vue 3 puede ayudar a los desarrolladores a construir aplicaciones web modernas y receptivas de manera más eficiente.

Crear y ejecutar un proyecto Vue 3 utilizando ServBay

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

Crear un proyecto Vue 3

1. Inicializar el proyecto

   Primero, asegúrese de que ha instalado el entorno Node.js proporcionado por ServBay. Luego, inicialice un nuevo proyecto Vue 3 usando el siguiente comando:

   cd /Applications/ServBay/www
   npm create vue@latest

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

   ✔ Nombre del proyecto: … servbay-vue-app
   ✔ ¿Agregar TypeScript? … No
   ✔ ¿Agregar soporte para JSX? … No
   ✔ ¿Agregar Vue Router para desarrollo de aplicaciones de una sola página? … Yes
   ✔ ¿Agregar Pinia para gestión de estado? … No
   ✔ ¿Agregar Vitest para pruebas unitarias? … No
   ✔ ¿Agregar una solución de pruebas End-to-End? … No
   ✔ ¿Agregar ESLint para calidad de código? … Yes
   ✔ ¿Agregar Prettier para formateo de código? … Yes
   ✔ ¿Agregar la extensión Vue DevTools 7 para depuración? (experimental) … No

2. Instalar dependencias

   Ingrese al directorio del proyecto e instale las dependencias:

   cd servbay-vue-app
   npm install

Modificar el contenido de salida del proyecto Vue

1. Modificar el archivo src/App.vue

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

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'App'
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </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 proxy inverso en ServBay

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

   • Nombre: My first Vue dev site
   • Nombre de dominio: servbay-vue-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 el navegador y visita https://servbay-vue-test.dev para ver el proyecto en tiempo real. Gracias a que ServBay soporta nombres de dominio personalizados y SSL gratuito, usted disfrutará de un mayor nivel de seguridad.

Construir la versión de producción

1. Construir la versión de producción

   Una vez completado el desarrollo, ejecute el siguiente comando para construir la versión de producción:

   npm run build

   Después de construir, 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 el servicio de archivos estáticos. En la configuración de 'host' de ServBay, agregue un nuevo sitio web estático:

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

3. Acceder al modo de producción

   Abra el navegador y visite https://servbay-vue-test.prod para ver la versión construída en producción. Gracias a los nombres de dominio personalizados y certificados SSL gratuitos de ServBay, su sitio web tendrá mayor seguridad y credibilidad.

Siguiendo los pasos anteriores, habrá creado y ejecutado exitosamente un proyecto Vue 3, utilizando las funciones proporcionadas por ServBay para gestionar y acceder a su proyecto.