Bienvenida e Introducci贸n

1

Bienvenida y Presentaci贸n del proyecto: PlatziRooms

2

Creaci贸n y configuraci贸n inicial del proyecto utilizando VUE CLI 3

3

Boilerplate y Limpieza del proyecto

Render Functions y JSX

4

驴Que son las Render Functions y JSX?

5

Preparando nuestro entorno para un prototipo

6

Creaci贸n de un componente con createElement

7

Utilizando JSX para la creaci贸n de un componente

8

Utilizando Slots con Render Functions y JSX

9

Creando un Modal de Login para PlatziRooms

10

Creando la l贸gica general de nuestros modales con Vuex

11

Creando el contenido de nuestro modal

Componentes controlados y uso de librer铆as externas

12

Componentes Controlados y Variables Personalizadas

13

Construcci贸n del componente de Recordar Contrase帽a

14

Creaci贸n de un componente Slider utilizando la librer铆a tiny-slider

High Order Functions

15

驴Qu茅 son las High Order Functions? - Crea tu primera HOF

16

Vuex

17

Obtener datos usando Vuex

18

Crea un getter din谩mico en Vuex utilizando HOF

19

Creaci贸n de la vista para creaci贸n de publicaciones

20

Agregando datos con Vuex

Base de datos en tiempo real con Firebase

21

Instalaci贸n y Configuracion de Firebase Realtime Database

22

Obteniendo los datos desde Firebase Realtime Database

23

Agregando la consulta de usuarios

24

Almacenando nuevas publicaciones en Firebase Realtime Database

25

Perfeccionando el flujo de navegaci贸n de nuestra App

Autenticaci贸n con Firebase

26

Configuracion Inicial para trabajar con Firebase Authentication

27

Agregando nuevos usuarios en firebase autentication

28

Inicio de sesi贸n de usuario

29

Cierre de sesi贸n de usuario

30

Protegiendo p谩ginas utilizando Navigation Guards

Scoped Slots

31

驴Qu茅 son los Scoped Slots? D贸nde utilizarlos y por qu茅

32

Integraci贸n de Scoped Slots en Platzi Rooms

Deploy

33

Creando y desplegando nuestra app en Heroku

34

Conclusiones y Despedida

Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
8H
17M
46S

Preparando nuestro entorno para un prototipo

5/34
Recursos

Antes de crear nuestro primer componente con createElement debemos instalar el plugin o dependencia para generar prototipos peque帽os y mostrarlos en el navegador. Un prototipo individual por cada componente de Vue.

Aportes 18

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

NPM
npm install -g @vue/cli-service-global

YARN
yarn global add @vue/cli-service-global

Incre铆ble, no sab铆a que pod铆a servidor un 煤nico componente usando vue serve, es bueno saberlo

Es compatible bajo el uso de sintaxis pug (antiguamente llamado jade) ?

App.vue

<template>
    <div id="app">
        <button >Toggle Modal</button>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>
body {
    background: #cecece;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 250px;
    background: #fff;
    padding: 15px;    
}

.modal > .message {
    margin: 0;
    margin-bottom: 10px;
}
</style>
npm install -g @vue/cli-service-global

馃槄 驴Existe alg煤n plugin as铆 de React/Preact para generar prototipos individuales de cada componente?
馃 Me suena StoryBook 馃帹.

para la nueva version de vue-clic 4.1.2 el comando de instalacion es:

npm install -g @vue/cli @vue/cli-service-global

Para los que estan usando la v5 del CLI en la documentacion recomiendan usar Vite para hacer el Instant Prototyping: Pueden iniciar el proyecto ejecutando el comando 鈥渘pm init vite鈥

NPM
npm install -g @vue/cli-service-global

Les recomiendo mucho este plugin que les ayudara con la sintaxis de vue https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

Al ejecutar vue serve App.vue me devuelve este error:

Command vue serve requires a global addon to be installed. Please run yarn global add @vue/cli-service-global and try again.

驴alguna idea?

Haber si entiendo, cada archivo .vue es como un proyecto independiente con el comando vue serve

Alguno conoce como cambiar e host y port en Vue serve, seg煤n veo las opciones disponibles son muy pocas:

Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config


Options:

  -o, --open  Open browser
  -c, --copy  Copy local url to clipboard
  -h, --help  output usage information

Para el que le da el siguiente error:
(node:7897) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 鈥榲ersion鈥 of undefined
at module.exports (/usr/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-plugin-eslint/index.js:18:27)
鈥 [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Instalar como dependencia del proyecto:
- npm install eslint-plugin-vue
- npm install babel-eslint

Estaba muy ancioso por hacer este curso pero al ejercutar el vue server me da este error

Command vue serve requires a global addon to be installed.
Please run npm install -g @vue/cli-service-global and try again.

Corro el comando que dice el mensaje pero no resuelve el problema. He visto recomendaciones a este error pero ninguna me ha servido.

Me di cuenta que si corro el comando en mi carpeta de NodeJS ah铆 si funciona, me da a entender que tengo problemas con la instalaci贸n global y ya no se que hacer para solventarlo.

Desinstale e Instale nuevamente todo, Node, Vue, Vue-cli y sigo con el mismo problema. Alguna idea? 馃槮

tengo este problem@

C:\Users\jangove\AppData\Roaming\npm-cache_logs\2021-01-17T16_23_50_785Z-debug.log

A mi me saiio este error al ejecutar vue serve App.vue.

Module Error (from /Users/eduardopech/.config/yarn/global/node_modules/v
ue-loader/lib/index.js):

Vue packages version mismatch:

Ya que anteriormente tenia instalado vue de manera global. Y encontre la soluci贸n:
en el caso de /Users/UsuariodeTuPC/.config/yarn/global/ ejecutar los siguientes comando en orden. y sustituye el nombre de tu pc que marca el error.

cd /Users/eduardopech/.config/yarn/global/
rm -rf node_modules/
rm yarn.lock 
yarn

Y con esto desaparece el error.
Cualquier duda estoy a sus ordenes.

Ayuda!

Al correr el comando vue serve me arroja el siguiente error.

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.