Curso gratuito Vue.js 3 INTRO #2 - Instalando

e Fala jovem Thiago Matos aqui vamos lá botar a mão na massa e fazer a instalação do meu dias vem comigo e cara isso é um processo bem simples Na verdade eu vou abordar aqui duas formas de instalação para você aí já ficar ligado cara aqui na documentação como eu sempre falo a documentação é a sua fonte de informação é primordial Tá certo a fonte oficial tô aqui em Box vem aqui idade kickstart e a gente vai ver esse cara aqui na direita o mais alto biotools teste a primeira forma que a gente vai ver o que é que significa isso é a forma de a gente utilizar o vds via CDM que a gente vai criar Na verdade nesse caso web components que é componentes web Ou seja você tem um projeto já existente um projeto legado e você quer injetar o verde é só para criar algum tipo de componente uma funcionalidade específica porque você não pode ou não quer é refazer bom então você utiliza essa técnica de web components para poder injetar aí no seu projeto legal se você tiver conversando projeto do zero claro que você precisa de precisa ter mais é habilidades mais funcionalidades e por isso a gente vai utilizar outra forma para poder criar um projeto muito mais robusto Tá certo então vou esse lá as duas formas para você cara tô aqui ele diz que você precisa injetar isso aqui no seu HTML O que é muito simples Então vamos criar o nosso HTML aqui eu vou chamar de index. hu ele era eu vou puxar o meu template todo do HTML aqui tá certo já também ali cinco Beleza então tem aqui meu HTML normalzinho ou copiar esse cara aqui hoje vou colocar aqui dentro de redes beleza e aí eu vou pegar esses caras aqui agora vou colocar aqui no baile passa por que que vai acontecer deixou remover esse aqui confia demais ele vai acontecer esse essa HTML vai ler não é o script aqui a fonte dele que é o vídeo né Bem do lado da anped E aí vai rodar o vídeo e essa que ele vai estacionar não se preocupe nada ainda o que está acontecendo aqui porque essa hora é só mesmo pra apresentar a parte de trás a gente vai mergulhar em tudo aqui desses assuntos dividir essa de data de mal não certo então se eu rodar esse arquivo Cadê o um browser-default ele já rodou o vídeo é essa aqui ó Olá viu Hello meu Hello viu Muito prazer já rodão e aqui galera na segunda aula olha só que beleza então seguinte galera então o vídeo é você tá rodando aqui né E isso daqui faz com que o vídeo é se é sim Está sim isso daqui o rio de S vai identificar que a zona dele de atuação e por isso que esse message aqui que a interpolação a gente vai falar muito disso né foi convertido nesse cara aqui ó é louco viu se alterar esse aqui para abril três por exemplo salvar Olha lá meu texto reativo Meu jovem tá certo então as roupas simples só que aí assim você tem seu projeto né E na verdade você não vai jantar assim seu projeto Provavelmente você iria extrair esse cara aqui iria criar um arquivo JavaScript Extra eu vou chamar de outro JS o Passo ficou aqui é 33 pênis corrigir é. JS colei aqui eu escolhi te dou viu Tá certo e agora vou chamar aqui ó src o PEP.

JS provavelmente será utilizada dessa forma a galera aí ele tem o mesmo resultado vem aqui se eu retirar esses grupos aqui ó o vídeo é assim não entra em ação e aparece a mensagem exatamente como tá aqui até agora que o verde é essa entrou em ação e aí o vídeo é se reconhece que ele precisa trabalhar dentro desse ideia aqui e aqui aonde eu vi de essa começa a fazer a mágica dele jovem você então se a gente vem aqui no ERP novamente a gente vai ver a gente tá pedindo para montar né mão nesse elemento aqui ó é se alterar esse elemento para e deixa eu ver que eu mais f não vai funcionar mais aí obviamente eu tenho que ir lá no meu no meu HTML alterar para mais ep Então como você tá trabalhando com projeto legado ou você Pode injetar um Pode injetar dois uma página em outra e sair criando várias ideias assim né mas sei lá aqui vai ser foto aqui vai ser o componente de sei lá cursos enfim ainda pensa muito do seu projeto vai ter qual lambança vai mais em projeto legado se você quiser injetar vai ser dessa forma você vai extrair o poder do Rio de S dentro do seu projeto legado O que é diferente de outros tremores reativos né os concorrentes do verde essa beleza então é dessa forma aqui que a gente vai criar web concorrência e obviamente quando é correr aqui das aulas se você vai aprender e incrementar esse script aqui para poder você colocar tudo que você quer dentro né do seu componente aqui é feito então essa o número um de fazer instalação do Rio DS via CDN galera Lembrando que isso é interessante Apenas quando você tem um projeto rodando e você quer utilizar as funcionalidades do vídeo RS fora isso galera você vai desenvolver um projeto do zero é um projeto robusto utilizando as técnicas e tecnologias modernas e por isso que dessa forma a gente vai utilizar essa primeira opção aqui ó which builds tos que na verdade a gente vai utilizar toda a modernidade aí para trazer para gente não é para o nosso projeto essa essa robustez que a gente precisa né leitura de projetos é o TSE parado em Componentes era e para fazer isso aqui galera a gente vai utilizar esse carinha aqui ó viu viu se ele que é o cliente viu de essa então se você acessar essa página aqui você vai entender o que eu estou falando o cliente DVDs que vai possibilitar a gente criar projetos leve o direto utilizando linha de comando BA E é isso que o bilcliff está Tô aqui amor vai ver o dele que vai falar exatamente o que eu te disse de uma forma mais detalhada obviamente e tem a instalação dele muito simples a instalação você vai rodar o npm olhar de forma Global porque para poder o comando ver eu ficar disponível aí em todo todo todas as pastas aí do seu ambiente Tá certo então se eu rodar esse cara aqui ó pior Global ele vai como eu já testar lado ele vai passar super rápida vai identificar e já é desse aí para mim que eu tenho já instalada 78 certo se você tiver utilizando a empenho e você pode utilizar esse cara aqui sem problema nenhum o importante é que no final da instalação você pode Esse comando e eu veja que aí a gente vai saber se o meu cliente tá instalado tá lá instalado versão 5 a versão atual desse vídeo aqui beleza então deixa eu ver como é que eu tô aqui de pasta todo ele aposta Cole a massa gente tinha criado aqui o f g j s index conta HTML cara e agora eu vou criar aqui ó viu cliente pertence comando clientes que ele já vai dizer para gente aqui é algum lugar né Na próxima a próxima página por isso é logo é o nome do seu projeto agora já dá para a gente ir já dá para andar com as nossas próprias pernas então eu vou criar aqui o nosso bebe né chamado bem criativo e aí ele pede aqui Qual é o padrão que você quer ver o 3000/2000 três Claro meu jovem é curso de viu três E aí ele vai fazer instalação completa né vai baixar todos os pacotes 77 Porque eu acho que você também já está familiarizado a gente vai ver tudo isso aqui também né é a parte do novo the models e etc Então vamos esperar aí a instalação do GPS via CL ouviu klea beleza jovem finalizada aqui e você Observe que ele já deixa aqui no final a ser A CBF bom e olha esse comando irá servir a gente não vai rodar se comando ainda não eu quero dar uma olhada nas coisas aqui dentro antes de você rodar Esse comando a gente vai ver que tem um montão de arquivos aqui beleza vamos lá dar uma olhada nesses arquivo então como eu queria esse projetinho dentro aqui da mesma pasta eu tenho acesso aqui o meu pega a pessoal já apareceu até e foi a parte que a gente criou Vamos lá olha só não de modo que eu acho que você familiarizado com esse Você viu que ele já trouxe aqui ó vermelho ou seja não mexa nessa página aqui estão todas as dependências aqui do nosso projeto para poder fazer o nosso projeto funcionado em ambiente de desenvolvimento Tá certo não mecha aqui de hipótese alguma e se você quiser saber a lista cara baixa você vir aqui pet. de não acredito também que você seja familiarizado com esse cara mas se não esse cara que é onde vão te dar as diretrizes do projeto o nome do projeto versão tá aqui o novo projeto versão scripts etc etc a dependência só dependência do Projeto Rio de S em core-js a dependência desse projeto para desenvolvimento tem vários pacotes aqui tá certo as configurações do iis lente aqui se você não sabe que é excelente é uma forma de você organizar seu código então ele vai te dar instruções para você organizar seu código deixar o seu código padronizado de acordo com as regras que você determinar beleza inclusive aqui inscreva-se você tem 33 comandos para que você pode rodar que é o surf que a gente acabou de ver ali nas instruções O bild que é pra rodar lá no final quando você finaliza o projeto Você vai dar o bild vai compactar né vai compilar tudo em arquivo HTML CSS JavaScript e o link para você né organizar seu código eu não vou entrar muito no link que a galera se bagunça toda a galera se preocupa muito com isso daqui e entra em desespero Então vou cortar essa daqui não se preocupe com excelência porque ele é mais só para organização de código não é obrigada e o seu rosto Beleza então pronto esse aqui é o pectus. Já sou galera aqui tem a pasta pública vamos lá para as pastas na pasta pública é onde vão estar o que nos arquivos públicos público então aqui eu tenho arquivo index HTML nesse aqui no index HTML é o seu template é tudo que você quer colocar na sua base do HTML Tá certo então aqui você vê que o título ele já tenha em esquema para poder né o vídeo é essa introduzir o título dele aqui uma sala esse daqui né ele tem já aqui ó galera o ID é que a gente tinha visto lá no index HTML se lembra ele já traz aqui para gente se Lembrando que se você alterar o elemento lá você tem que alterar esse ideia aqui ou seja aquele elemento lá que a gente viu decide essa mãos mais F beleza dentro de blindex aqui tem que ser Mayer esqueci até de mudar Beleza então agora ele deve tá funcionando aqui ó belezura Ah beleza então chegando aqui em ainda em Black Calma calma e câmbio que a gente tem também aqui o padre com né fadico não sei como é que você quer para não será isso mas só arquivos públicos arquivos estáticos você vai jogar tudo dentro de obra que a gente beleza às vezes você tem uma imagem algum vídeo alguma coisa estática que você não quer que o bild mexa nele e joga logo aqui dentro de pobre tá certo é arquivo é acima não pasta src que a pasta só se né a fonte galera aqui é onde vão estar os arquivos do nosso projeto certo é aonde a gente vai colocar nossa mágica vai ser toda aqui dentro de src e gente olha só aqui tem um arquivo Man outro JS que é o arquivo de entrada do verde é tudo vai começar por aqui e se você observar É bem parecido com o que a gente quer brincar Do lado da no Script dhtml aqui eu estou importando o Chris ep né no pacote viu é que eu tô criando é e depois montando no elemento PEP o MDF mesma coisa de antes você a gente abre esse ep.

do JS que a gente quer criado então aqui eu tenho uma constante crentes apps e vendo viu e ouviu já está distanciado na verdade porque a gente importou via via CDM lembre-se disso né mas é basicamente a mesma coisa aí eu creio Thief passa aqui é o componente 77 cintura a gente vai ver com mais detalhes mais para frente Tá certo então ele passa aqui essa variável é aqui para dentro e esse aqui é já é de fato um componente viu DNS e aqui ao ponto de partida do nosso desenvolvimento galera eu vendi essa já traz para gente não viu ele na verdade já traz para gente esse template né com o arquivo o template HTML o arquivo não template HTML o script e o estádio a gente vai ver tudo isso aí não se preocupe estou apenas explicando para você o que é cada coisa já para você é familiarizado Beleza então saindo aqui nesses dois arquivos a gente tem acesso e componentes acesso do nome já diz que são os ativos né são os nossos assets imagem é vídeos CSS globais é tudo que a gente tiver né que não seja inscrito a gente vai jogar aqui dentro e aqui no componente galera vai estar o que os nossos componentes Claro os nossos componentes e eu ver o que lhe trouxe para a gente um exemplo aqui hello world né um exemplo de algum colega bem simples aqui e se você observar galera ele importou esse componente dentro de affliction a gente vai fazer muito isso tá vendo e postou aqui é louco outro declarou aqui compromisso e aí usou no template acesso já vai-se familiarizando com isso porque a gente vai usar bastante importou é declarou aqui e usou Maravilha Simples então é feito e fora isso galera fora do src agência eu fiz aqui não se preocupe No momento não vou nem abordar muito isso para não confundir a sua cabeça mais um aqui importante aqui é o meu.