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

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
12 Hrs
1 Min
13 Seg

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

2/34
Resources

Vue CLI is an official Vue.js tool that helps us to create projects with a very good default configuration that we can extend and customize according to our projects.

Installation command with Yarn:

bashyarn global add @vue/cli

If the installation was successful we will have a new command in the terminal: vue.

In previous versions of Vue CLI we used the vue init command to download a template with default configuration. However, with the new version we can use the vue create command that allows us to choose step by step the tools and their different configurations to develop our project.

Remember that having all the configurations of your project in the package.json file can be confusing because we mix the dependencies with their configurations. Rather, we can use dedicated files for each tool configuration; it is cleaner and easier to detect the location of our configurations.

Finally, let's run our project with the vue serve command.

Contributions 16

Questions 5

Sort by:

Want to see more contributions, questions and answers from the community?

También pueden crear un proyecto Vue con su interfaz gráfica ejecutando el comando:

vue ui

Para aquellos que usan Npm
npm install -g @vue/cli

Para aquellos que usan Yarn
yarn global add @vue/cli

Instalación de Vue CLI con NPM (vamos, es muy fácil de “traducir” ¬¬ 😅😛):

npm install -g @vue/cli
npm install -g @vue/cli
vue create platzi-rooms

Existen también templates para empezar proyectos mas avanzados. https://madewithvuejs.com/templates

La herramienta que de ayudara en el desarrollo con vue es la vue devtool, la cual es una extension para el navegador, la puedes encontrar para chrome y firefox:
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=es

https://addons.mozilla.org/es/firefox/addon/vue-js-devtools/

en la version de vue cli 4.1.2 las opciones para la creacion de proyectos sigue siendo igual a las que podemos ver en esta clase.

🤔 ¿Cuál configuración de ESLint recomiendan para Vue?

El profe recomienda la de Airbnb (irónico, nuestro proyecto es una aplicación de viviendas 😂) pero he visto mucho por Twitter que Prettier está ganando terreno 👀😬.

En este caso...

No puedo encontrar el archivo router.js al generar el proyecto… alguien tiene idea que puede ser? No puedo seguir adelante…

Para iniciar el proyecto en NodeJS

npm run serve

Actualmente ya estamos por Vue CLI 4.5, pero los comandos siguen siendo los mismos

Voy a hacer una aplicación pero necesitaré de SEO, será que aplico esta config ó uso NUXT…?

Para desinstalar versiones anteriores de vue:

npm uninstall vue-cli -g

el CLI ya está en la versión 4
Este curso sigue siendo válido?