Node.js<\/a> instalado em sua m\u00e1quina.<\/p>\r\n\r\n\r\n\r\nInstalando o Vue.JS e o Quasar<\/h2>\r\n\r\n\r\n\r\n Se n\u00e3o tiver, \u00e9 s\u00f3 baixar e instalar antes dos pr\u00f3ximos passos!<\/p>\r\n\r\n\r\n\r\n
npm install vueDepois de rodar os passos acima, tanto o Vue.JS quanto o Quasar j\u00e1 est\u00e3o dispon\u00edveis para uso.<\/p>\r\n\r\n\r\n\r\n
Como eu j\u00e1 disse nesse tutorial de Vue.JS, usar ele ajuda e muito na velocidade de cria\u00e7\u00e3o de um sistema.<\/p>\r\n\r\n\r\n\r\n
Assim como o uso de seus frameworks, ent\u00e3o em vez de perder tempo criando toda a arquitetura do sistema, vamos deixar o Quasar fazer isso para n\u00f3s apenas executando o c\u00f3digo abaixo.<\/p>\r\n\r\n\r\n\r\n
quasar create nome_do_seu_projeto -b dev<\/code><\/p>\r\n\r\n\r\n\r\n\r\n
Ap\u00f3s rodar o comando acima ser\u00e1 feita algumas perguntas para a cria\u00e7\u00e3o de seu projeto, como nome, autor …, basta preencher de acordo.<\/p>\r\n\r\n\r\n\r\n
\r\n
Sabe o que \u00e9 mais incr\u00edvel?<\/p>\r\n\r\n\r\n\r\n
Sua aplica\u00e7\u00e3o j\u00e1 est\u00e1 pronta para o desenvolvimento, agora \u00e9 s\u00f3 entrar na pasta e rodar o sistema como comando abaixo e vc ver\u00e1 sua aplica\u00e7\u00e3o funcionando lisa! \ud83d\ude00<\/p>\r\n\r\n\r\n\r\n
quasar dev<\/code><\/p>\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n
Sabe o mais legal de tudo?<\/p>\r\n\r\n\r\n\r\n
Se voc\u00ea analisar, n\u00e3o gastamos 2 minutos para ter uma aplica\u00e7\u00e3o pronta, esse um dos pontos mais fant\u00e1sticos do Vue.JS.<\/p>\r\n\r\n\r\n\r\n
Estrutura do C\u00f3digo<\/h2>\r\n\r\n\r\n\r\n Ao usar o quasar para a cria\u00e7\u00e3o do projeto em Vue.JS, toda a arquitetura do sistema j\u00e1 est\u00e1 pronta!<\/p>\r\n\r\n\r\n\r\n
Agora basta entende-l\u00e1 para come\u00e7ar a brincar, ent\u00e3o bora l\u00e1.<\/p>\r\n\r\n\r\n\r\n
\r\n
Pasta no vue.js<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nA primeira parte para onde vamos olhar \u00e9 para a pastar router<\/code>.<\/p>\r\n\r\n\r\n\r\nDentro dela voc\u00ea encontrar\u00e1 um arquivo chamado routes.js<\/code>.<\/p>\r\n\r\n\r\n\r\nComo o nome j\u00e1 diz, esse \u00e9 o arquivo respons\u00e1vel por criar as rotas da aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
\u00c9 super simples, voc\u00ea tem um componente, um peda\u00e7o de tela, representado como se fosse o “Pai”.<\/p>\r\n\r\n\r\n\r\n
Ou seja, a tela onde todos os outros componentes, as “filhas”, que vc criar, v\u00e3o ser inclu\u00eddas.<\/p>\r\n\r\n\r\n\r\n
Pense no componente “Pai” sendo o header da sua aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
\r\n
Aplicativo Quasar<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n\r\n
Hierarquia dentro da aplica\u00e7\u00e3o<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nOu seja, toda tela que voc\u00ea criar, basta colocar como est\u00e3o as filhas indicadas na imagem.<\/p>\r\n\r\n\r\n\r\n
Lembrando que pode ter outros pais.<\/p>\r\n\r\n\r\n\r\n
A partir da\u00ed \u00e9 come\u00e7ar a desenvolver.<\/p>\r\n\r\n\r\n\r\n
Vue.JS tutorial: criando a primeira tela<\/h2>\r\n\r\n\r\n\r\n Vamos criar uma tela e login para nossa aplica\u00e7\u00e3o, assim podemos abordar v\u00e1rios t\u00f3picos do Vue.JS e voc\u00ea conseguir\u00e1 continuar a partir da\u00ed.<\/p>\r\n\r\n\r\n\r\n
Dentro da pasta pages vamos criar o seguinte arquivo, Login.Vue<\/code>.<\/p>\r\n\r\n\r\n\r\n\r\n
Login.vue<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nEscrevi o seguinte c\u00f3digo para melhor interpreta\u00e7\u00e3o do HTML, ou seja, a primeira parte da p\u00e1gina Vue.JS como mencionado no in\u00edcio do artigo.<\/p>\r\n\r\n\r\n\r\nHTML do vue.JS<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\nA imagem acima do HTML gera o seguinte resultado:<\/p>\r\n\r\n\r\n\r\n
\r\n
Login<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nAgora precisamos criar a fun\u00e7\u00e3o para fazer o login e limpar o formul\u00e1rio, para isso vamos para a segunda parte da pagina Vue.JS, que \u00e9 o script.<\/p>\r\n\r\n\r\n\r\nObserva\u00e7\u00e3o: trocar login por logar<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\nAt\u00e9 esse momento n\u00e3o criamos a implementa\u00e7\u00e3o da fun\u00e7\u00e3o login.<\/p>\r\n\r\n\r\n\r\n
Para deixar esse artigo mais divertido e mais informativos vamos deixar nosso amigo Google nos ajudar com essa fun\u00e7\u00e3o de login?<\/p>\r\n\r\n\r\n\r\n
Firebase<\/h3>\r\n\r\n\r\n\r\n Entra a\u00ed mais um amigo como o Quasar: o Firebase.<\/p>\r\n\r\n\r\n\r\n
O Firebase \u00e9 um conjunto de ferramentas para nos ajudar na cria\u00e7\u00e3o de aplica\u00e7\u00f5es de qualidade.<\/p>\r\n\r\n\r\n\r\n
Vamos usar umas de suas ferramentas que \u00e9 o auth, ou seja, o cara respons\u00e1vel em fazer nosso autentica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
Para isso voc\u00eas precisam ir no Google para criar uma conta no Firebase, \u00e9 gr\u00e1tis. Depois crie um projeto!<\/p>\r\n\r\n\r\n\r\n
Quando voc\u00ea acabar de criar seu projeto, que basicamente next next next, eles v\u00e3o te dar um conjunto de credenciais, dessa forma:<\/p>\r\n\r\n\r\n\r\n
\r\n
Firebase<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nCopie essas credenciais porque vamos precisar delas na nossa aplica\u00e7\u00e3o. Dentro do seu projeto no firebase click em Authentication e ative o m\u00e9todo de login pro Email\/Senha<\/p>\r\n\r\n\r\n\r\n
\r\n
Provedores de login<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nCriei um Usu\u00e1rio de teste qualquer.<\/p>\r\n\r\n\r\n\r\n
\r\n
Criando um usu\u00e1rio<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nPerfeito, podemos voltar agora ao c\u00f3digo e terminar nosso formul\u00e1rio de login.<\/p>\r\n\r\n\r\n\r\n
Precisamos instalar o firebase no projeto, para isso digite npm install firebase<\/code>.<\/p>\r\n\r\n\r\n\r\nAgora com o Firebase instalado, vamos configurar ele na nossa aplica\u00e7\u00e3o.<\/p>\r\n\r\n\r\n\r\n
Olha como pode ser bem simples tamb\u00e9m:<\/p>\r\n\r\n\r\n\r\n
\r\n
Aplica\u00e7\u00e3o no Firebase<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nTerminando o Formul\u00e1rio:<\/p>\r\n\r\n\r\n\r\n
\r\n
Methods do sistema<\/figcaption>\r\n<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\nTemos, por fim, uma aplica\u00e7\u00e3o com uma arquitetura <\/a>bem montada de forma autom\u00e1tica, um visual clean com o quasar e uma autentica\u00e7\u00e3o com firebase do google 100% segura.<\/p>\r\n\r\n\r\n\r\nViu como esse tutorial de Vue.JS \u00e9 f\u00e1cil?<\/h2>\r\n\r\n\r\n\r\n Tanto sua implementa\u00e7\u00e3o como de seus frameworks.<\/p>\r\n\r\n\r\n\r\n
Simples? Talvez. Robusto? Muito.<\/p>\r\n\r\n\r\n\r\n
Se aplica a grandes aplica\u00e7\u00f5es? \u00c9 claro que sim.<\/p>\r\n\r\n\r\n\r\n
Se quiser, voc\u00ea pode acessar este projeto no GitHub.<\/p>\r\n\r\n\r\n\r\n
Agora \u00e9 hora de entrar de cabe\u00e7a para se aprofundar nessa maravilha.<\/p>\r\n","protected":false},"excerpt":{"rendered":"
Tutorial Vue.JS? Temos! Para quem est\u00e1 querendo criar um sistema r\u00e1pido, robusto e com uma componentiza\u00e7\u00e3o perfeita, Vue.JS \u00e9 a melhor op\u00e7\u00e3o. Al\u00e9m de ter uma curva de aprendizado extremamente pequena, \u00e9 um sistema complexo pode ser feito com velocidade e simplicidade. Vamos l\u00e1 para o nosso tutorial de Vue.JS! \ud83d\ude09 Vue.JS: o que \u00e9? […]<\/p>\n","protected":false},"author":167,"featured_media":8945,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-8922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimiento-de-software"],"acf":[],"yoast_head":"\n
Tutorial Vue.JS: Aprenda de Forma Simples e Eficiente<\/title>\n<meta name=\"description\" content=\"Tutorial Vue.JS? Temos! Esse artigo te mostra passo a passo como criar um sistema usando Vue.JS e ainda Quasar e Firebase! Vem ver :D\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Vue.JS: como criar um sistema\" \/>\n<meta property=\"og:description\" content=\"Tutorial Vue.JS? Temos! Para quem est\u00e1 querendo criar um sistema r\u00e1pido, robusto e com uma componentiza\u00e7\u00e3o perfeita, Vue.JS \u00e9 a melhor op\u00e7\u00e3o. Al\u00e9m de ter\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Geekhunter\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/geekhunterbr\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-13T13:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-29T19:46:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/01\/VUE-JS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Geekhunter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:site\" content=\"@geekhunterbr\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Geekhunter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/\"},\"author\":{\"name\":\"Geekhunter\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\"},\"headline\":\"Tutorial Vue.JS: como criar um sistema\",\"datePublished\":\"2020-04-13T13:29:00+00:00\",\"dateModified\":\"2024-10-29T19:46:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/\"},\"wordCount\":1011,\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/VUE-JS.png\",\"articleSection\":[\"Desenvolvimiento de software\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/\",\"name\":\"Tutorial Vue.JS: Aprenda de Forma Simples e Eficiente\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/VUE-JS.png\",\"datePublished\":\"2020-04-13T13:29:00+00:00\",\"dateModified\":\"2024-10-29T19:46:57+00:00\",\"description\":\"Tutorial Vue.JS? Temos! Esse artigo te mostra passo a passo como criar um sistema usando Vue.JS e ainda Quasar e Firebase! Vem ver :D\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/tutorial-vue-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/VUE-JS.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/VUE-JS.png\",\"width\":750,\"height\":410,\"caption\":\"tutorial de vue js\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/tutorial-vue-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mundo TI\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desenvolvimiento de software\",\"item\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/category\\\/mundo-ti\\\/desenvolvimiento-de-software\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Tutorial Vue.JS: como criar um sistema\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"name\":\"Blog de TI\",\"description\":\"Dicas para o RH e profissionais da \u00e1rea TI\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#organization\",\"name\":\"GeekHunter\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"contentUrl\":\"https:\\\/\\\/www.geekhunter.com/pt/blog\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/icon-1.png\",\"width\":300,\"height\":300,\"caption\":\"GeekHunter\"},\"image\":{\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/x.com\\\/geekhunterbr\",\"https:\\\/\\\/www.instagram.com\\\/geekhunterbr\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/geekhunter-brasil\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@GeekHunterOfficial\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/#\\\/schema\\\/person\\\/9f62b173345139f7bbdaf55312c3d400\",\"name\":\"Geekhunter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g\",\"caption\":\"Geekhunter\"},\"url\":\"https:\\\/\\\/www.geekhunter.com\\\/pt\\\/blog\\\/author\\\/matias\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tutorial Vue.JS: Aprenda de Forma Simples e Eficiente","description":"Tutorial Vue.JS? Temos! Esse artigo te mostra passo a passo como criar um sistema usando Vue.JS e ainda Quasar e Firebase! Vem ver :D","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/","og_locale":"pt_BR","og_type":"article","og_title":"Tutorial Vue.JS: como criar um sistema","og_description":"Tutorial Vue.JS? Temos! Para quem est\u00e1 querendo criar um sistema r\u00e1pido, robusto e com uma componentiza\u00e7\u00e3o perfeita, Vue.JS \u00e9 a melhor op\u00e7\u00e3o. Al\u00e9m de ter","og_url":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/","og_site_name":"Blog Geekhunter","article_publisher":"https:\/\/www.facebook.com\/geekhunterbr\/","article_published_time":"2020-04-13T13:29:00+00:00","article_modified_time":"2024-10-29T19:46:57+00:00","og_image":[{"width":750,"height":410,"url":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/01\/VUE-JS.png","type":"image\/png"}],"author":"Geekhunter","twitter_card":"summary_large_image","twitter_creator":"@geekhunterbr","twitter_site":"@geekhunterbr","twitter_misc":{"Escrito por":"Geekhunter","Est. tempo de leitura":"9 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/#article","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/"},"author":{"name":"Geekhunter","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400"},"headline":"Tutorial Vue.JS: como criar um sistema","datePublished":"2020-04-13T13:29:00+00:00","dateModified":"2024-10-29T19:46:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/"},"wordCount":1011,"publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/01\/VUE-JS.png","articleSection":["Desenvolvimiento de software"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/","name":"Tutorial Vue.JS: Aprenda de Forma Simples e Eficiente","isPartOf":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/#primaryimage"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/01\/VUE-JS.png","datePublished":"2020-04-13T13:29:00+00:00","dateModified":"2024-10-29T19:46:57+00:00","description":"Tutorial Vue.JS? Temos! Esse artigo te mostra passo a passo como criar um sistema usando Vue.JS e ainda Quasar e Firebase! Vem ver :D","breadcrumb":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.geekhunter.com/pt/blog\/tutorial-vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/#primaryimage","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2020\/01\/VUE-JS.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2020\/01\/VUE-JS.png","width":750,"height":410,"caption":"tutorial de vue js"},{"@type":"BreadcrumbList","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/tutorial-vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.geekhunter.com/pt/blog\/"},{"@type":"ListItem","position":2,"name":"Mundo TI","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/"},{"@type":"ListItem","position":3,"name":"Desenvolvimiento de software","item":"https:\/\/www.geekhunter.com/pt/blog\/category\/mundo-ti\/desenvolvimiento-de-software\/"},{"@type":"ListItem","position":4,"name":"Tutorial Vue.JS: como criar um sistema"}]},{"@type":"WebSite","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#website","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","name":"Blog de TI","description":"Dicas para o RH e profissionais da \u00e1rea TI","publisher":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.geekhunter.com/pt/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#organization","name":"GeekHunter","url":"https:\/\/www.geekhunter.com\/pt\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.geekhunter.com\/pt\/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","contentUrl":"https:\/\/www.geekhunter.com/pt/blog\/wp-content\/uploads\/2024\/10\/icon-1.png","width":300,"height":300,"caption":"GeekHunter"},"image":{"@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/geekhunterbr\/","https:\/\/x.com\/geekhunterbr","https:\/\/www.instagram.com\/geekhunterbr\/","https:\/\/www.linkedin.com\/company\/geekhunter-brasil\/","https:\/\/www.youtube.com\/@GeekHunterOfficial"]},{"@type":"Person","@id":"https:\/\/www.geekhunter.com\/pt\/blog\/#\/schema\/person\/9f62b173345139f7bbdaf55312c3d400","name":"Geekhunter","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09a0f76de8cf1fa3621f8b73417ce43344b42e1324a07a9af24f57c5eef49840?s=96&d=mm&r=g","caption":"Geekhunter"},"url":"https:\/\/www.geekhunter.com\/pt\/blog\/author\/matias\/"}]}},"_links":{"self":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/8922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/users\/167"}],"replies":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/comments?post=8922"}],"version-history":[{"count":0,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/posts\/8922\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media\/8945"}],"wp:attachment":[{"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/media?parent=8922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/categories?post=8922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.geekhunter.com/pt/blog\/wp-json\/wp\/v2\/tags?post=8922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"os](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/01\/o-que-\u00e9-vue.js.png\")
\r\n![\"instala\u00e7\u00e3o](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/01\/untitled-3-1.png\")
<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n![\"quasar](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/01\/untitled-4-1.png\")
<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n![\"projeto](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/01\/untitled-5-1.png\")
<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n![\"compila\u00e7\u00e3o](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/01\/untitled-6-2.png\")
<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n![\"quasar](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/01\/untitled-7-1.png\")
<\/figure>\r\n<\/div>\r\n\r\n\r\n\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/nnooo.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/fpjfopindididnondonof.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/hierarquia.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/login.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/html.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/logar.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/obs.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/forma.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/senha.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/provedores.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/aplicacao.png\")
\r\n![\"\"](\"https:\/\/geekblogti.wpengine.com\/wp-content\/uploads\/2020\/04\/form.png\")
\r\n