SlideShare uma empresa Scribd logo
1 de 9
PRIMEIROS PASSOS COM
VUE.JS
Joel Rodrigues
Microsoft MVP
Autor técnico e consultor na DevMedia
joelrlneto@hotmail.com
medium.com/@joelrodrigues
Introdução
• Framework JavaScript para criação de interfaces;
• Planejado para ser adotado de forma incremental;
• Focado na view;
• Pode ser usado em conjunto com ferramentas e bibliotecas
para construir SPAs completas.
Como começar
• HTML, CSS e JavaScript;
• TypeScript, JSX, Webpack, Babel, Node, NPM.
Como começar
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id=“app”>
{{ mensagem }}
</div>
<script>
var app = new Vue({
el : “app”,
data : {
mensagem : “Canal .NET DevWeek”
}
});
</script>
Bibliotecas complementares
Vue Router
https://router.vuejs.org/
Vuex
https://vuex.vuejs.org
Server-Side Rendering
https://ssr.vuejs.org/
Avançando
Vue Loader
https://vue-loader.vuejs.org/
Webpack Template
https://vuejs-templates.github.io/webpack/
Vue-CLI
https://github.com/vuejs/vue-cli
Próximos passos
Quasar Framework
Websites, PWAs, mobile e desktop apps.
Recursos úteis
Vue Awesome
https://github.com/vuejs/awesome-vue
VueJobs
https://vuejobs.com/
Vue Curated
https://curated.vuejs.org/

Mais conteúdo relacionado

Mais procurados

Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsVinicius Reis
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Rodrigo Branas
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa
 
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine  KarmaTest-Driven Development com JavaScript, Jasmine  Karma
Test-Driven Development com JavaScript, Jasmine KarmaRodrigo Branas
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UICleiton Francisco
 
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorMSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorGustavo Bellini Bigardi
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWordCamp Floripa
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"Stefan Horochovec
 
AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just DigitalJust Digital
 
Quasar Framework - Uma visão Geral
Quasar Framework - Uma visão GeralQuasar Framework - Uma visão Geral
Quasar Framework - Uma visão GeralPatrick Monteiro
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3WordCamp Floripa
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Daniel Makiyama
 

Mais procurados (20)

Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
Test-Driven Development com JavaScript, Jasmine Karma
Test-Driven Development com JavaScript, Jasmine  KarmaTest-Driven Development com JavaScript, Jasmine  Karma
Test-Driven Development com JavaScript, Jasmine Karma
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
Blazor #SnetTalks3
Blazor  #SnetTalks3Blazor  #SnetTalks3
Blazor #SnetTalks3
 
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com BlazorMSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
MSP Tech Days Online 2018 - SPA além do JavaScript com Blazor
 
Apresentação JQuery
Apresentação JQueryApresentação JQuery
Apresentação JQuery
 
Walker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicaçãoWalker Leite apresenta usando o WordPress como backend de aplicação
Walker Leite apresenta usando o WordPress como backend de aplicação
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
 
Lab
LabLab
Lab
 
Write once, run "everywhere"
Write once, run "everywhere"Write once, run "everywhere"
Write once, run "everywhere"
 
Grunt
GruntGrunt
Grunt
 
Angular js 4php
Angular js   4phpAngular js   4php
Angular js 4php
 
AngularJS - Just Digital
AngularJS - Just DigitalAngularJS - Just Digital
AngularJS - Just Digital
 
Apresentação angular js
Apresentação angular jsApresentação angular js
Apresentação angular js
 
Quasar Framework - Uma visão Geral
Quasar Framework - Uma visão GeralQuasar Framework - Uma visão Geral
Quasar Framework - Uma visão Geral
 
Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3Guga Alves apresenta Gutenberg fase 2 e 3
Guga Alves apresenta Gutenberg fase 2 e 3
 
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
Aprendendo Na Prática: Aplicativos Web com HTML5, Angular.js, Twitter Bootstr...
 
Fundamentos de Programação Front-End
Fundamentos de Programação Front-EndFundamentos de Programação Front-End
Fundamentos de Programação Front-End
 

Semelhante a Primeiros passos com Vue.js: introdução, instalação e bibliotecas

TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JSRodrigo Urubatan
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.Filipe Morelli
 
Criando aplicações web com tecnologias Microsoft
Criando aplicações web com tecnologias MicrosoftCriando aplicações web com tecnologias Microsoft
Criando aplicações web com tecnologias MicrosoftFabrício Lopes Sanchez
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPelliando dias
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemRodrigo Valerio
 
Quasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenhoQuasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenhoPatrick Monteiro
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APIJessica Zanelato Soares
 
Sap Comunity Day Brasil 2009 - SAP NWDI
Sap Comunity Day Brasil 2009 - SAP NWDISap Comunity Day Brasil 2009 - SAP NWDI
Sap Comunity Day Brasil 2009 - SAP NWDImarlosimon
 
Futuro do ASP.NET vNext - MVP ShowCast
Futuro do ASP.NET vNext - MVP ShowCast Futuro do ASP.NET vNext - MVP ShowCast
Futuro do ASP.NET vNext - MVP ShowCast Eduardo Pires
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxMarceloRosenbrock1
 
Palestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DPalestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DRenato Puccini
 
Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Pablo Souza
 

Semelhante a Primeiros passos com Vue.js: introdução, instalação e bibliotecas (20)

Workshop - Ionic + firebase
Workshop - Ionic + firebaseWorkshop - Ionic + firebase
Workshop - Ionic + firebase
 
Node js - Javascript Server Side
Node js - Javascript Server SideNode js - Javascript Server Side
Node js - Javascript Server Side
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.
 
Criando aplicações web com tecnologias Microsoft
Criando aplicações web com tecnologias MicrosoftCriando aplicações web com tecnologias Microsoft
Criando aplicações web com tecnologias Microsoft
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Quasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenhoQuasar Framework - Front end de alto desempenho
Quasar Framework - Front end de alto desempenho
 
Criando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma APICriando uma PWA com React para consumir uma API
Criando uma PWA com React para consumir uma API
 
Netbeans Slides
Netbeans SlidesNetbeans Slides
Netbeans Slides
 
Introdução ao Nodejs
Introdução ao NodejsIntrodução ao Nodejs
Introdução ao Nodejs
 
O poder das Progressive Web Apps
O poder das Progressive Web AppsO poder das Progressive Web Apps
O poder das Progressive Web Apps
 
Sap Comunity Day Brasil 2009 - SAP NWDI
Sap Comunity Day Brasil 2009 - SAP NWDISap Comunity Day Brasil 2009 - SAP NWDI
Sap Comunity Day Brasil 2009 - SAP NWDI
 
Futuro do ASP.NET vNext - MVP ShowCast
Futuro do ASP.NET vNext - MVP ShowCast Futuro do ASP.NET vNext - MVP ShowCast
Futuro do ASP.NET vNext - MVP ShowCast
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Palestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3DPalestra SFD etec Netbeans e Java 3D
Palestra SFD etec Netbeans e Java 3D
 
Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?
 
Web Dev Camp
Web Dev CampWeb Dev Camp
Web Dev Camp
 

Mais de Joel Rodrigues

Bancos NoSQL no Microsoft Azure
Bancos NoSQL no Microsoft AzureBancos NoSQL no Microsoft Azure
Bancos NoSQL no Microsoft AzureJoel Rodrigues
 
As vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NETAs vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NETJoel Rodrigues
 
Universal Windows Platform
Universal Windows PlatformUniversal Windows Platform
Universal Windows PlatformJoel Rodrigues
 
Certificações Microsoft e o Mercado de Trabalho
Certificações Microsoft e o Mercado de TrabalhoCertificações Microsoft e o Mercado de Trabalho
Certificações Microsoft e o Mercado de TrabalhoJoel Rodrigues
 

Mais de Joel Rodrigues (7)

Azure Search
Azure SearchAzure Search
Azure Search
 
Azure Logic Apps
Azure Logic AppsAzure Logic Apps
Azure Logic Apps
 
Bancos NoSQL no Microsoft Azure
Bancos NoSQL no Microsoft AzureBancos NoSQL no Microsoft Azure
Bancos NoSQL no Microsoft Azure
 
Carreira Microsoft
Carreira MicrosoftCarreira Microsoft
Carreira Microsoft
 
As vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NETAs vantagens do desenvolvimento em .NET
As vantagens do desenvolvimento em .NET
 
Universal Windows Platform
Universal Windows PlatformUniversal Windows Platform
Universal Windows Platform
 
Certificações Microsoft e o Mercado de Trabalho
Certificações Microsoft e o Mercado de TrabalhoCertificações Microsoft e o Mercado de Trabalho
Certificações Microsoft e o Mercado de Trabalho
 

Primeiros passos com Vue.js: introdução, instalação e bibliotecas