Desenvolvimento Web: Conhecendo o Vue.Js - Francisco Matheus Ricelly Pinto de Sena

1. DesenvolvimentoWeb:
Conhecendo oVue.js

2. /fsenaweb /fsenaweb/fsena
Matheus Ricelly
• Servidor Público Estadual, exercendo as atividades técnico-administrativas na Universidade
Estadual do Rio Grande do Norte (UERN)
• Graduando em Análises e Desenvolvimento de Sistemas pelo Instituto Federal de Educação,
Ciência e Tecnologia do Rio Grande do Norte – IFRN.
• Full Stack Webdeveloper, com experiência na linguagem de programação PHP, banco de dados
MySQL e ênfase em frameworks como Codeigniter e Laravel (PHP) e VueJS (Javascript)

3. DesenvolvimentoWeb: Conhecendo oVue.js
O que é ?

4. DesenvolvimentoWeb: Conhecendo oVue.js
- Framework Javascript
Frameworks são ferramentas criadas para ajudar
na complexidade dos nossos projetos...

5. DesenvolvimentoWeb: Conhecendo oVue.js
- Reativo

6. DesenvolvimentoWeb: Conhecendo oVue.js
- Reativo

7. DesenvolvimentoWeb: Conhecendo oVue.js
- Desenvolvimento de
componentes e SPA’s

8. DesenvolvimentoWeb: Conhecendo oVue.js
- Possui ecossistema próprio:
- VueX
- Vue-router
- Vue-resource
- Vue Loader
- DevTools (chrome)

9. DesenvolvimentoWeb: Conhecendo oVue.js
- Comunidade muito forte,
crescente e atuante
- Tradução da documentação
- Vue Jobs
- AwesomeVue (comunidades, podcasts,
youtuber, tutoriais)

10. DesenvolvimentoWeb: Conhecendo oVue.js
- Desenvolvimento de
componentes e SPA’s
A componentização facilita na manutenção do código
e personalização dos processos.

11. DesenvolvimentoWeb: Conhecendo oVue.js
Quando surgiu ?
• Iniciado no final de 2013
• Primeiro release em Fevereiro 2014

12. DesenvolvimentoWeb: Conhecendo oVue.js
PorqueusarVue?

13. DesenvolvimentoWeb: Conhecendo oVue.js
- Nível de complexidade

14. DesenvolvimentoWeb: Conhecendo oVue.js
- Flexibilidade

15. DesenvolvimentoWeb: Conhecendo oVue.js
- Performance

16. DesenvolvimentoWeb: Conhecendo oVue.js
- Livre!!

17. DesenvolvimentoWeb: Conhecendo oVue.js
Oquedevosaber?Pré-requisitos importantes para iniciar o
desenvolvimento com o Vue.js.

18. DesenvolvimentoWeb: Conhecendo oVue.js
- Node.js
- NPM
- ES6 (Javascript)
- Webpack

19. DesenvolvimentoWeb: Conhecendo oVue.js
Iniciandouma
aplicação

20. DesenvolvimentoWeb: Conhecendo oVue.js

21. DesenvolvimentoWeb: Conhecendo oVue.js
Estrutura de
pastas e arquivos

22. DesenvolvimentoWeb: Conhecendo oVue.js
Pasta SRC
Principal pasta para o
desenvolvimento das aplicações

23. DesenvolvimentoWeb: Conhecendo oVue.js
Single File Components

24. DesenvolvimentoWeb: Conhecendo oVue.js
Como funciona

25. DesenvolvimentoWeb: Conhecendo oVue.js
• Template, Lógica e Estilo
• Use o que você já sabe:
HTML, CSS e Javascript
• Suporte a ES6
• O CSS pode ser restrito
apenas ao componente
ou globalmente.

26. DesenvolvimentoWeb: Conhecendo oVue.js

27. DesenvolvimentoWeb: Conhecendo oVue.js

28. DesenvolvimentoWeb: Conhecendo oVue.js
EofuturodoVue.js?

29. DesenvolvimentoWeb: Conhecendo oVue.js
Desenvolvimento web

30. DesenvolvimentoWeb: Conhecendo oVue.js
- Empresas que utilizamVue

31. DesenvolvimentoWeb: Conhecendo oVue.js
O mercado dos App Mobile

32. DesenvolvimentoWeb: Conhecendo oVue.js
- Poderosos frameworks
Desenvolvimento Híbrido Desenvolvimento Nativo

33. DesenvolvimentoWeb: Conhecendo oVue.js
- Poderosos frameworks
Aplicações Desktop

34. Obrigado !
/fsenaweb /fsenaweb/fsena
fsenaweb@gmail.com / (84) 9.9995-9216