Instalación Vue con Typescript
Instalación Vue con Typescript
Introducción
Seguro más de uno conocerá el Framework VueJS, que en resumen es un marco de trabajo para desarrollo frontend con Javascript. Este posee todo un ecosistema que nos permite gestionar componentes, manejar estados por componente y/o global en la aplicación, manejo de rutas, entre otras utilidades que poco a poco se han ido acoplando a este framework. Además en sus ultimas versiones se puede trabajar con Typescript (En este caso hablo de la versión 2, pero la 3 también tiene la posibilidad de trabajar Javascript o Typescript).
En está publicación haremos los pasos básicos para hacer una instalación de Vue con Typescript, que poco se puede ir añadiendo elementos y UI que disponibles para este framework.
Requisitos del sistema
- Tener instalado la última versión estable de NodeJS.
- Tener acceso al terminal de comandos.
- (Opcional) Tener instalado globalmente Yarn.
Manos a la obra
Lo primero que haremos es instalar Vue Cli y eso lo hacemos con el siguiente comando:
npm install -g @vue/cliPara comprobar que la instalación ha sido correcta, pueden ejecutar lo siguiente, que
les dirá la versión instalada de Vue Cli:
vue --versionUna vez instalado en el terminal nos vamos a mover al directorio donde queremos crear
nuestro proyecto. Y para este tutorial el proyecto que crearemos se llamará vue-typescript, pero siéntanse
libre de llamar su proyecto como ustedes prefieran.
vue create vue-typescriptAquí desde el terminal nos irá haciendo unas preguntas de como queremos que nuestra
aplicación sea configurada, que lo iremos explicando a continuación:
Aquí seleccionaremos Manually para elegir las configuraciones de nuestra preferencia.
Dependiendo de lo que ustedes requieran van marcando los módulos que necesiten. Para
este paso es necesario marcarlo con barra espaciadora y para navegar entre las opciones hacerlo con las flechitas
arriba y abajo. Para este paso es requerido que marquen Babel y Typescript, las demás son opcionales,
Yo las marcó porque de aquí estaré sacando más tutoriales y ejercicios prácticos que necesito más adelante.
Los siguientes 3 pasos siguientes confirmaremos. El primero es para aceptar que nos de
el ejemplo de un Componente con sintaxis de clases como Programación Orientada a Objeto se tratase. El segundo para
que nos configure lo necesario de Babel para que funcione Typescript. Y el tercero para habilitar el Modo histórico.
Cabe destacar que de este último, se deben tener algunas consideraciones para el servidor donde se despliegue, pero
para el desarrollo no habría problemas.
Aquí podemos seleccionar como que queremos nos indique los errores y aplicación de
mejores prácticas en nuestro código. En este caso selecciono solo ESlint con prevención de errores, así me
menciona los errores de sintaxis (que no son más que advertencias) y me deja continuar si no afecta el
funcionamiento de la aplicación:
Luego dejaremos el por defecto y seleccionaremos In dedicated config
files que colocará todas las configuraciones por separado (ESlint, Prettier, Unit Test, etc.), que
particularmente prefiero así, pero si ustedes desean todo unificado lo pueden colocar package.json.
Luego nos preguntará si queremos guardar está plantilla o estos pasos que ya
respondimos, para no tener que hacerlo en próximas creaciones. En nuestro caso le pondré no.
Luego nos preguntará con que gestor de paquetes usaremos en nuestro proyecto (Caso tal
que tengan instalado Yarn). Seleccionamos el que prefiramos, en este caso elegimos yarn. Luego de aquí
empezará a realizar toda la creación e instalación del proyecto.
Una vez finalizado, podemos ejecutar los comandos que nos muestra la instalación y
luego de que se levante la instacia nos vamos al navegador y escribiremos http://localhost:3000/. Aquí dejo
los pasos:
cd vue-typescriptYarn:
yarn serveNPM:
npm serve
Ya en este punto nuestro proyecto Vue está
funcionando y listo para empezar a desarrollar sobre él. Incluso si abrimos el
archivo src/components/HelloWorld.vue veremos una sintaxis parecida a esta:
Y si queremos verlo desde nuestro celular o verlo
desde otra PC en nuestra casa o trabajo (dependiendo de las restricciones de seguridad de la empresa donde
laboren), pueden hacer este ajuste en los script del package.json y aquí ya podrían colocar la IP de su
máquina en la URL del navegador de los otros dispositivos seguido del puerto.
Conclusión
Bueno aquí llegamos al fin del tutorial de instalación Vue con Typescript, ya podemos
ir probando y creando nuestras aplicaciones, aplicando la magia de Typescript sobre nuestro proyecto, logrando un
proyecto mucha más mantenible a lo largo del tiempo. Sin más me despido, espero sus comentarios de como les fue
creando su proyecto de Vue con Typescript.
0 comentarios