Cómo crear un scaffolding de aplicación en 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/cliUna vez hecho esto ya podemos crear nuestro primer proyecto con el comando
vue create my-projectEste 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 serveEsto 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 buildPara 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 serveCon 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 distEsto 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.