Cómo estructurar un proyecto con vue, vue-router, vuex y vue-cli entre otros.

1. El ecosistema de Vue.js
vue - vue-router - vuex - vue-cli

2. Acerca de mi
Bio
Soy Hugo Gilmar Erazo, desarrollador full stack
con 12 años de experiencia. Fiel partidario del
free software y el open source. Fanático de
GNU/Linux y la terminal de comandos.
Qué hago para comer
Software Developer en
Perfiles
@hugogilmar
@hugogilmar
Blog
nanotutoriales.com

3. Objetivos
● ¿Qué es Vue.js?
● Componentes
● Ciclo de vida
● Ecosistema
● Herramientas
● Aplicación en la vida real
○ Vistas y componentes
○ Rutas
○ Manejo del estado
○ Plugins

4. ¿Qué es Vue.js?

5. ¿Qué es Vue.js?
Descripción
Vue (pronunciado / vju /, como vista
en inglés) es un framework
progresivo para crear interfaces de
usuario.

6. ¿Qué es Vue.js?
Características
● Patrón MVVM.
● Liviano.
● Simplicidad.
● Enfocado en la capa de la vista.
● Fácil integración.
● Reactividad.
● Curva de aprendizaje baja.
● Escalabilidad.
● Muy buena documentación.
● Soporte para desarrollo de SPA
(ecosistema).
● Mantenible.
● Testeable.

7. Ejemplo
https://jsfiddle.net/hugogilmar/qnobktyh/

8. Componentes

9. Componentes
Descripción
Los componentes permiten
encapsular funcionalidad del resto
del código de tal forma que se
pueda reutilizar e integrar
fácilmente en diferentes secciones
e incluso proyectos.

10. Componentes
Estructura
Los componentes en Vue tienen
una estructura simple: template
HTML, JavaScript y CSS.

11. Ejemplo
https://jsfiddle.net/hugogilmar/t6Lekwf0

12. Ciclo de vida

13. Ciclo de vida
● beforeCreate
● created
● beforeMount
● mounted
● beforeUpdate
● updated
● beforeDestroy
● destroyed

14. Ciclo de vida

15. Ecosistema

16. Ecosistema ● Vue
● Vue router
● Vuex

17. Vue
Core
Librería principal en donde todos los
demás elementos del ecosistema
son acoplados.

18. Vue router
Rutas
Manejo de rutas e integración con
los componentes para el desarrollo
de SPA’s.

19. Vue router
Características
● Mapeo de rutas / vistas.
● Rutas dinámicas.
● Links con manejo automático
del estado activo.
● Historial de navegación.
● Navegación programática.
● Transiciones.
● Guards.

20. Ejemplo
https://codesandbox.io/s/yk76p0vxwz

21. Vuex
Estado
Manejo del estado de la aplicación
integración con los componentes
para el desarrollo de SPA’s.

22. Vuex
Flujo

23. Ejemplo
https://codesandbox.io/s/4x7ypy80r0

24. Plugins

25. Plugins
Herramientas y librerías
● Vue Loader.
● Vuetify.
● CLI.
● Vue I18n.
● Axios.
● NativeScript.
● Electron.
● ....

26. Enlaces
Información adicional
https://vuejs.org
https://router.vuejs.org
https://vuex.vuejs.org
https://cli.vuejs.org
https://github.com/vuejs/vue-devtools
https://vue-loader.vuejs.org
https://github.com/vuejs/awesome-vue
https://madewithvuejs.com

27. Enlaces
Presentación
http://jsfiddle.net/user/dashboa
rd/fiddles
https://codesandbox.io/u/hugo
gilmar/sandboxes

28. Gracias!!!