Si ya conoces Vue, pero todavia no has utilizado Vue CLI este post te resultará interesante, pues resulta que Vue CLI nos da la facilidad de crear un archivo con extension .vue y verlo en el navegador sin la necesidad de crear una aplicacion completa.
\nPrimeramente necesitamos instalar de forma global los paquetes de npm que nos van a permitir hacer lo que te he mencionado anteriormente.
\nnpm install -g @vue/cli @vue/cli-service-globalCon la instrucción anterior instalamos Vue CLI y también el paquete que nos va a facilitar la tarea de levantar un servidor con cero configuracion para nuestros archivos .vue
\nSi al intentar instalar los paquetes te da algun error prueba hacerlo con privilegios elevados, en mac y Linux puedes ejecutar el comando con la instrucción sudo en Windows abre el cmd con privilegios de administrador.
Bien, ahora que ya tenemos instalados los paquetes vamos a probar su funcionamiento, primero vamos a hacer una carpeta para poner dentro los componentes que hagamos, puedes hacerla desde la terminal con el comando:
\nmkdir prototipos-vueDentro de la carpeta vamos a crear un archivo llamado App.vue, lo puedes crear desde la terminal con el comando:
touch App.vueAhora abrimos el archivo con nuestro editor de texto de preferencia, en mi caso lo voy a abrir la carpeta en la que me encuetro ubicado con VS Code desde la terminal con el comando:
\ncode .Ahora en nuestro archivo App.vue escribimos el siguiente código:
<template>\n <h1>{{ saludo }}</h1>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n saludo: \"Hola desde mi componente\"\n };\n }\n};\n</script>Para ver nuestro componente en el navegador debemos levantar el servidor que nos proporciona Vue CLI y especificamente el paquete extra que hemos instalado, lo hacemos con el comando:
\nvue serveEste comando va a realizar la ‘compilacion’ necesaria de nuestro componente y nos lo va a mostrar en el navegador, el resultado en consola de la ejecución del comando debe ser algo como esto:
\n DONE Compiled successfully in 4184ms\n App running at:\n - Local: http://localhost:8080/\n - Network: http://192.168.1.3:8080/\n\n Note that the development build is not optimized.\n To create a production build, run npm run build.Este mensaje nos indica que podemos abrir una URl en nuestro navegador, en est caso http://localhost:8080/, al abrirlo veremos nuestro componente.