Funcionalidades, UI y comandos básicos

Por si alguien se hizo la misma pregunta que yo:
Errores de Linteo

Un linter revisa tu código buscando errores y problemas de sintaxis, se asegura también que el código que escribes siga un estilo, esto ayuda a que todo el código escrito en un proyecto se vea como si hubiera sido escrito por la misma persona, y eso lo hace mas legible y mantenible.

Funcionalidades, UI y comandos básicos

npm run lint. Detectar errores de linteo

npm run build. Generar la aplicación en modo producción. Genera una carpeta dist.

npm i -g serve. Permite generar un servidor web local:

serve -s dist. Levanta un localhost.

vue ui. Genera una aplicación web local, que mediante una interfaz de usuario permite gestionar los proyectos de Vue.
preset. A medida que se van creando proyectos con determinada configuración, el cli de vue permite guardar esa configuración para más adelante poder utilizarla al momento de crear un proyecto.

• Para detectar errores de linteo podemos ejecutar el siguiente comando

npm run lint

• Si queremos generar la version de produccion de nuestro proyecto ejecutamos el siguiente codigo

npm run build #Esto tendra como salida una carpeta `dist` la cual contendra aquellos archivo que entiende el navegador

• Para probar nuestro paquete de producción que se genero (dist) podemos hacerlo atravez de un servidor interno, para ello tenemos que instalar lo siguiente:

npm i -g serve #Este nos permite generar un servidor web local

• Ya que tengamos nuestro servidor instalado, para habilitarlo ejecutamos el siguiente comando:

server -s dist 

ahí tenemos los distintos URL por donde podemos ver nuestro proyecto en el navegador

sirve el código dentro de la carpeta dist en un servidor local, lo que significa que abre un puerto con todos los archivos estáticos en un host creado en el mismo computador (localhost) (referencia: David Behar)

• Hay otra manera para poder interactuar con Vue CLI aparte de la consola, esto es atreves de un modo grafico el cual podemos ver en el navegador, para poder acceder a este tenemos que ejecutar el siguiente comando:

vue ui

Esto nos habilitará un puerto en nuestra computadora por el cual podremos administrar los plugins, dependencias, etc.

Nacho explica muy bien

npm run lint = genera una versión de desarrollo
npm run build = genera una versión para producción
npm i -g serve = genera un servidor web en nuestra pc, revisa que la carpeta dist tenga el código correcto.
vue ui = genera una app web local con una interfaz de usuario para gestionar nuestros proyectos desarrollados en vue.

Dejo mis apuntes y digamos pasos que hicimos:

# Instalación Vue JS CLI y estructura básica
npm install -g @vue/cli
vue create myapp

# Servidor desarrollo
npm run serve
# Validar errores
npm run lint
# Compilar ./dist -> Distrubicción
npm run build

# Instalar servidor producción (Primero hacer build)
npm install -g serve
serve -s dist

# Vue UI (Interfaz para gestionar dependencias
vue ui

perfecto nacho!! tuve que verlo 2 veces para entenderlo bien pero lo logre! explicas re bien.

Wow ya me estaba preguntando como se llevaria el sitio web a produccion y aqui se explica muy bien con el uso del comando de build. y me parece increible el vue ui, pues ofrece muchas herramientas de gestion desde una interfas intuitiva.

APUNTES MANEJO PROFESIONAL VUE JS:

Descargo e instalo la herramienta node desde la web: node .org

Instalo las herramientas de desarrollo de Vue segun el navegador que estemos usando.
en este caso usaremos CHROME:
las vue dev tools se encuentran en el repositorio original de vue.
es una extension que una vez instalada, me permite inspeccionar desde una pestaña propia de vue
en las herramientas del desarrollador

El vue-cli (es decir, la “interfaz de línea de comandos Vue”) es una herramienta creada por el equipo Vue.js
para ayudar a facilitar el rápido desarrollo de las aplicaciones Vue.
Si bien puede usar Vue.js en el navegador directamente, la mayoría de las aplicaciones frontales
usan Node.js para las herramientas de compilación.
Se descarga desde la web de vue cli y se instala con comando en la terminal.

nuevo proyecto:
una vez instalada la herramienta, ejecutamos
vue create nombre-del-proyecto.
configuro el proyecto segun las opciones que voy a emplear.

cd nombre-del-proyecto
npm run serve (para correr mi aplicacion de forma local, es una expresion alojada en el package.json)

abro en el navegador el localhost: en el puerto que este corriendo mi aplicacion vue.
abro la carpeta del proyecto en vs code.

SINGLE FILES COMPONENTS

Es una herramienta que nos ofrece el framework para poder trabajar con la logica,
el estilo y el html dentro de un mismo componente. El CLI va a generar un codigo compatible
con el navegador para poder utilizar nuestra aplicacion en produccion, pero tambien va a alojar los
modulos y dependencias que utilizamos para llevar a cabo el desarrollo.

para detectar errores de lint:
npm run lint (es una expresion alojada en el package.json)

para generar nuestro codigo en produccion:
npm run build (es una expresion alojada en el package.json)
Este comando genera archivos .js compatibles con el navegador. todo empaquetado por el web pack
una vez ejecutado, se generara la carpeta dist con todos los archivos empaquetados de nuestro codigo.
para verificar estos archivos podemos ejecutar en un servidor local asi:

npm i -g serve (para instalar el server)
serve -s dist

para correr la USER INTERFACE. Este comando me va a mostrar una aplicacion local para gestionar mis proyectos.

vue ui

aqui puedo importar mis archivos y gestionar dependencias, plugins y diferentes cosas de mi proyecto.

Hola! Estoy teniendo un error al usar el comando npm i -g serve
a alguien le paso?

npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected].
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'serve'
npm ERR! notarget

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/paula/.npm/_logs/2020-05-01T23_29_31_960Z-debug.log```

Además de poder servir nuestra aplicación en modo local con:

npm run serve

También podemos correr el comando Lint, utiliza internamente el CLI para detectar errores de linteo,:

npm run lint

O el comando build, para generar nuestra aplicación en modo de producción:

npm run build

Internamente este comando está utilizando webpack para generar los archivos llamados bundlers, generando así código JS ente doble por el browser, a partir de nuestra configuración local, de nuestros archivos vue, assets, y css’s.

Para probar el código correcto para producción se ejecuta el código:

npm i -g serve

Así puedo correr el comando serve que se acaba de instalar y servir el directorio distribuidor con los archivos generados para el ambiente de producción:

Serve -s dist

Para correr la Vue UI genera una aplicación web local que me va a permitir gestionar todos los proyectos locales en Vue, permite gestionar dependencias, así como instalación de nuevas dependencias, plugins, así como la configuración del CLI o ESLint para el proyecto en específico, así como en la parte de tareas, las diferentes tareas que se definieron en el packageJSON.

el lint tiene algun template o config base, para definir la identacion, los espacios entre palabras, donde debe cerrar los corchetes?

Me gustó Vue UI xD Lo único malo es que te puedes mal acostumbrar, la terminal siempre es más rápida, es un gran dileme el usar Vue CLI o Vue UI D:

Se que el curso es de Vue, pero me preguntaba si hay una herramienta similar a la que se despliega con ‘vue ui’ para React y Angular.

Este hombre no parpadeaa:0

El que más me llamó la atención fue vue ui 😮

Si estas en Windows y no te funciona el comando serve -s dist, tienes que habilitar la ejecución de scripts en Windows a través del prower shell en modo administrador, sigue este video

https://www.youtube.com/watch?v=gm0gexHWDy0

en mi caso me funcionó sin hacer la parte del gpedit

Es increíble lo bien que explica este profesor!

26.-Funcionalidades, UI y comandos básicos

Todo lo que está en package.json dentro de scripts son comandos que podemos correr con npm.

El comando con lint se puede usar para detectar errores de linteos y el comando build para generar nuestra app en modo de producción, internamente el CLI usa webpack para generar los archivos “bundlers” donde genera código JS entendible para el browser a partir de toda nuestra configuración local. Carpeta dist.

npm i -g serve: nos permite generar un servidor web en nuestra computadora y nos permite checar que la carpeta dist tenga el código correcto funcionando en base a lo que venimos programando.

vue ui: nos permite es generar una pequeña app web local que con una interfaz amigable me permite gestionar los proyectos que nos brinda un set de funcionalidades que me permiten gestionar las dependencias, pluggins, etc.

Es muy importante que después de este curso corran al de webpack, es una herramienta fantástica que nos hará la vida mas fácil a todos. 😃

Hola todos. Tengo este este error al querer ejecutar npm run build, alguien podría enseñarme cómo corregirlo??

cuando ya creamos nuestra aplicación de producción se que se crea una carpeta dist en el cual me preguntaba que pasamos a nuestro servidor de producción toda la carpeta general o que se pasa o que estructura pasamos ??

quedo atento a sus comentarios gracias

En cristiano es npm run lint realiza correcciones en el formato del código para que parezca que una única persona lo escribió aunque fue hecho por varios.

me gusta que vue ui tiene una version en modo oscuro

Los comandos dentro del archivo package.json en la sección de scripts se pueden correr agregando npm run y luego el comando, por ejemplo, npm run build, npm run serve, etc.

El comando serve inicia un servidor local para ver la aplicación funcionando, el comando build compila todos los archivos y genera archivos que pueda entender el navegador, cuando se ejecuta este comando genera una carpeta llamada dist donde están estos archivos, y el comando lint revisa que no haya errores de sintaxis en el código.

El comando vue ui permite generar una aplicación local que ofrece una interfaz para gestionar los proyectos de vue, puedes crear un proyecto desde ahí o importar uno para gestionar sus plugins, dependencias y otras configuraciones. Todo lo que se hace en esta interfaz se puede hacer de forma manual a través de código.

Los presets son configuraciones guardadas desde las que podemos empezar proyectos, estos presets pueden tener ciertas dependencias, configuraciones que ya no tendremos que configurar, si no que podemos empezar rápidamente desde ellas.

Hola, al ejecutar serve -s dist, no me carga la aplicación me aparece un pagina 404!

producción
npm run build -> crear el directory “dist”
npm i -g serve
serve -s dist ->empieza un web server pero con js no vue

Excelente explicación

La funcionalidad de la UI es bastante útil cuando el proyecto tiene varias dependencias es sencillo verlas ahí que en el archivo package.json uwu

😊

Es solo a mi? O a partir del minuto 5:22 se va el audio en el vídeo?

Excelente explicación del servidor que podemos utilizar para comprobar el proyecto en producción…