Cómo crear un scaffolding de aplicación en Vue.js ?

Author
By Darío Rivera
Posted on 2020-09-29 in Vue.js

Después de haber visto los conceptos básicos sobre Vue.js, desde el enlace de atributos hasta la creación de componentes ya es hora de empezar con nuestra primera aplicación profesional. Para esto, vamos a hacer uso de Vue CLI (command line interface) la cual es una interfaz de comandos con lo necesario para lograr nuestro objetivo.

Lo primero que debemos hacer si no lo hemos hecho aún, es instalar Vue CLI con el siguiente comando de NPM.

npm install -g @vue/cli

Una vez hecho esto ya podemos crear nuestro primer proyecto con el comando

vue create my-project

Este comando te preguntará el preset que deseas para crear tu projecto. Un preset como un set de configuraciones con las cuales se creará tu proyecto, en este caso disponemos de utilizar Vue2 con babel y eslint, Vue3 con babel y eslint o seleccionar manualmente el conjunto de dependencias.

Vue CLI v4.5.6
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features 

Una vez hayas instalado el scaffolding de tu proyecto puedes entrar a la carpeta generada y correr el siguente comando para iniciar el servidor de aplicación en algún puerto disponible.

npm run serve

Esto generará una versión de la apliación en desarrollo en una URI del tipo http://localhost:8080 a la cual debes acceder para ver tu app en ejecución.

Versión de producción de tu aplicación en Vue.js

Una vez tu aplicación esté lista podrás generar los assets de producción con el comando

npm run build

Para probar esta versión de producción de una manera más fluída también es recomendable instalar el paquete serve.

npm i -g serve

Con esto podrás iniciar un servidor que tome los assets preparados para producción de la carpeta build y no los de desarrollo.

serve -s dist

Esto generará una versión de la apliación en producción en una URI del tipo http://localhost:5000 a la cual debes acceder para ver tu app en ejecución.


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.