No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Funcionalidades, UI y comandos b谩sicos

26/38
Recursos

Aportes 32

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

<h1>Comandos b谩sicos</h1>
  • 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 鈥渋nterfaz 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鈥檚.

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 鈥榲ue 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 鈥渂undlers鈥 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 鈥渄ist鈥
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鈥