Uso básico do framework Vue apresentado na faculdade Ftec de Porto Alegre/RS em 2018

1. Vue JS 2
Equipe Front-end Engenharia de Software
● Marcelo Rodrigues Piva
● Felipe da Conceição
● Gabriel Antunes
● Gabriel Correia

2. O que é,
Como usar sem vue-cli,
Como usar com vue-cli,
Nossa experiência,
Pequeno projeto

3. O que é vuejs

4. O que é o Vue?
● Primeira release 2014
● Framework Progressivo ou Biblioteca Javascript;
○ Biblioteca: <script src="https://cdn.jsdelivr.net/npm/vue"></script>;
○ Framework: nodejs, npm, vue-cli;
● Componentes Reativos;
● Framework Ascendente:
○ https://hotframeworks.com/languages/javascript

6. VueJS, Angular e React
VueJS Angular React
Manutenção Comunidade Google Facebook
Native NativeScript-
vue
NativeScript React
Native
Gerenciamento
de Estado
Vuex Flux Redux

7. Guide
● Base da apresentação;
● Traduzida pela comunidade;
● Muito util;
● https://br.vuejs.org/v2/guide/index.html

8. Trabalhando
com vuejs
Sem vue-cli

9. Trabalhando sem vue-cli
● Uso mais simples do
Vue.js, onde ele é
inserido diretamente
na página através da
tag <script>.

10. Router
● Router é responsável por mostrar/esconder um ou mais
elementos dependendo da URL que se acessa no
browser.

11. Componentes
● Os componentes são um dos recursos mais poderosos do
Vue. Eles ajudam a estender os elementos HTML para
encapsular código de forma reusável. Em um alto nível,
componentes são elementos personalizados que o Vue
compila e anexa à sua instância.

12. Trabalhando com Vue
● Data e Renderização Declarativa;
○ https://jsfiddle.net/felipedacs/8h5khLwf/
● Diretiva v-bind;
○ https://jsfiddle.net/felipedacs/xer24hgL/
● Computed;
○ https://jsfiddle.net/felipedacs/xbgro6uk
● Diretiva v-model;
○ https://jsfiddle.net/felipedacs/o7sjvu7z

13. Trabalhando com Vue
● Diretiva v-on e Methods;
○ https://jsfiddle.net/felipedacs/pwkLat2r/
● Diretiva v-if;
○ https://jsfiddle.net/felipedacs/18s5sg1e/
● Diretiva v-for;
○ https://jsfiddle.net/felipedacs/t403ejet/
● Components;
○ https://jsfiddle.net/felipedacs/2u646h91/

14. Trabalhando com Vue
● Lifecycle hooks;
○ https://jsfiddle
.net/felipedac
s/f8notz21/
● Rotas;
○ https://jsfiddle
.net/felipedac
s/8mhysefa/

15. Usando vue-cli
Trabalhando
com vuejs

16. Webpack
● É um empacotador de código para projetos web, como o
browserify. Foca em módulos da sua aplicação. Tem a
ideia de code splitting, onde você modulariza partes
reaproveitáveis do seu projeto, facilitando o
desenvolvimento independente.

17. Iniciando com vue-cli
➔ vue init <template> <nome>
◆ webpack
◆ webpack-simple
➔ npm run dev
➔ npm run buid

18. Criando Rota, main.js

19. Criando Rota, routes.js

20. Criando Rota, App.vue

21. Cadastrando componente
CRIAR
COMPONENTE
COM ROTA SEM ROTA
PÁGINA
COMPONENTE
MENOR
C-ROTA/PAGINA
PÁGINA
COMPONENTE
MENOR
C-ROTA/MENOR S-ROTA/PAGINA S-ROTA/MENOR
X

22. C-ROTA/MENOR
● ComponenteQueImportara.vue:
○ import NomeComponent from './NomeComponent.vue'; // msm pasta
○ components: {'NomeComponent': NomeComponent}

23. Componente página
● Criar arquivos numa pasta chamada components, uma pasta por pagina e
component.vue
● Main.js:
○ import NomeComponent from './components/NomeComponent.vue'
○ Vue.component('tag-component', NomeComponent);

24. Componente da página
● ComponenteQueImportara.vue:
○ import NomeComponent from './NomeComponent.vue'; // msm pasta
○ components: {'NomeComponent': NomeComponent}

25. S-ROTA/MENOR
● ComponenteQueImportara.vue:
○ import NomeComponent from './NomeComponent.vue'; // msm pasta
○ components: {'NomeComponent': NomeComponent}
OU
● Main.js:
○ import NomeComponent from './components/NomeComponent.vue'
○ Vue.component('tag-component', NomeComponent);

26. Nossa
experiência
Usando vue-cli

27. Plano de telas,
Comunicação entre componentes,
Utilização do websocket

28. telas
Planejamento das telas

29. Telas
login jogo votação placar
X X

30. Telas
Html c/ rodapé
App.vue c/ dados
centralizados
Rota
Componente

31. Tela de login
login.vue

32. Tela de jogo
jogo.vue
jogadoresList.vue
letraBox.vue
formulario.vue

33. Tela de votos
votos.vue
resposta.vue
categoria.vue

34. Tela de placar
placar.vue
linha.vue

36. Comunicação entre
componentes
Desenhados todos componentes necessários, como é feita a comunicação
entre eles?

37. Telas
index.html
App.vue
Rota
Componente
index.html
App.vue
Rota
Componente

38. Comunicação do login
index.html
App.vue
Rota
login.vue

39. Comunicação do jogo
index.html
App.vue
Rota
jogo.vue
jogadoresList.vue letraBox.vue formulario.vue
# jogadores
# letra
# categorias

40. Comunicação dos votos
index.html
App.vue
Rota
votos.vue
linha.vue

41. Comunicação do placar
index.html
App.vue
Rota
placar.vue

42. Utilização do
WebSocket
Como enquadrar websocket? Como substituir a tecnologia se necessário?

43. Comunicação do login
index.html
App.vue
Rota
login.vue
Cria
jogador
*escuta WS*
*redireciona*

44. Comunicação do jogo
index.html
App.vue
Rota
jogo.vue
jogadoresList.vue letraBox.vue formulario.vue
# objWS
# jogadores
# letra
# categorias
Responde
(valor, categoria)
Responde
(arrayCategorias)

45. Comunicação dos votos
index.html
App.vue
Rota
votos.vue

46. Comunicação do placar
index.html
App.vue
Rota
placar.vue

47. “programinha”
Usando vue-cli

48. Proposta
● Criar portfolio simples com deploy para o github-pages

49. Criação do
projeto
Como iniciar?
➔ vue init webpack-simple
felipedacs2.github.io
➔ cd projeto
➔ npm run dev

50. Configurar vue
Mas afinal, why?
● Remover dist do .gitignore

51. Criação das
rotas
Como criar as rotas?
● vuerouter.txt

52. Criação dos
assets
Onde guardar arquivos estáticos,
como: css, imgs, fonts e etc
● src/assets/img/img

53. Criação dos
componentes
Onde importar e como guardar
componentes por padrão?
● projeto.vue:
○ import links from './links.vue';
○ components: {links: links}
● Lets code

54. Repo no github
Como criar um repo no github?
● Criar repo
● Configurar git remoto

55. Deploy no
github-pages
Como criar um repo remoto e
usar o git para commits e pushs?
➔ npm run build
➔ git add .
➔ git commit -m “first commit”
➔ git push origin master
● Liberar github-pages

56. Sugestões para estudo inicial
1. Guide;
2. Udemy;
3. Youtube;

57. That’s All
Para quem vue e quiser os slides, só pedir;
JSFiddle permanecerá, e também pode ser forkado;
Perguntas?