También pueden crear un proyecto Vue con su interfaz gráfica ejecutando el comando:
vue ui
Bienvenida e Introducción
Bienvenida y Presentación del proyecto: PlatziRooms
Creación y configuración inicial del proyecto utilizando VUE CLI 3
Boilerplate y Limpieza del proyecto
Render Functions y JSX
¿Que son las Render Functions y JSX?
Preparando nuestro entorno para un prototipo
Creación de un componente con createElement
Utilizando JSX para la creación de un componente
Utilizando Slots con Render Functions y JSX
Creando un Modal de Login para PlatziRooms
Creando la lógica general de nuestros modales con Vuex
Creando el contenido de nuestro modal
Componentes controlados y uso de librerías externas
Componentes Controlados y Variables Personalizadas
Construcción del componente de Recordar Contraseña
Creación de un componente Slider utilizando la librería tiny-slider
High Order Functions
¿Qué son las High Order Functions? - Crea tu primera HOF
Vuex
Obtener datos usando Vuex
Crea un getter dinámico en Vuex utilizando HOF
Creación de la vista para creación de publicaciones
Agregando datos con Vuex
Base de datos en tiempo real con Firebase
Instalación y Configuracion de Firebase Realtime Database
Obteniendo los datos desde Firebase Realtime Database
Agregando la consulta de usuarios
Almacenando nuevas publicaciones en Firebase Realtime Database
Perfeccionando el flujo de navegación de nuestra App
Autenticación con Firebase
Configuracion Inicial para trabajar con Firebase Authentication
Agregando nuevos usuarios en firebase autentication
Inicio de sesión de usuario
Cierre de sesión de usuario
Protegiendo páginas utilizando Navigation Guards
Scoped Slots
¿Qué son los Scoped Slots? Dónde utilizarlos y por qué
Integración de Scoped Slots en Platzi Rooms
Deploy
Creando y desplegando nuestra app en Heroku
Conclusiones y Despedida
Creación y configuración inicial del proyecto utilizando VUE CLI 3
2/34Recursos
Vue CLI es una herramienta oficial de Vue.js que nos ayuda a crear proyectos con una muy buena configuración por defecto que podemos extender y personalizar de acuerdo a nuestros proyectos.
Comando de instalación con Yarn:
bash
yarn global add @vue/cli
Si la instalación fue exitosa vamos a tener un nuevo comando en la terminal: vue.
La versiones anteriores de Vue CLI usabamos el comando vue init para descargar una plantilla con configuración por defecto. Sin embargo, con la nueva versión podemos usar el comando vue create que nos permite elegir paso a paso las herramientas y sus diferentes configuraciones para desarrollar nuestro proyecto.
Recuerda que tener todas las configuraciones de tu proyecto en el archivo package.json puede ser confuso porque mezclamos las dependencias con sus configuraciones. Más bien, podemos usar archivos dedicados a la configuración de cada herramienta; es más limpio y fácil de detectar el lugar de nuestras configuraciones.
Por último, vamos a correr nuestro proyecto con el comando vue serve.
Aportes 16
Preguntas 5
Ordenar por:
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?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?