Tudo o que você precisa para começar a usar o Vue.js

Provavelmente, ao ler essas linhas, você já ouviu falar sobre a estrutura JavaScript chamada Vue . Se você estava tentando, mas não imaginava o que deveria começar, esse material foi escrito especialmente para você. O autor diz que quer falar sobre por que ele realmente gosta de Vue. Além disso, ele apresentará a todos 4 maneiras de escrever o primeiro aplicativo no Vue.

Visão geral do material

Normalmente, tento não falar sobre muitas maneiras de resolver os mesmos problemas para aqueles que estão apenas começando a aprender uma certa estrutura. Mas, neste caso, acredito que mostrar algumas maneiras de desenvolver o primeiro aplicativo Vue é muito importante. Talvez você goste de trabalhar com a linha de comando ou talvez com ferramentas equipadas com uma interface gráfica. Ambos são adequados para o desenvolvimento do Vue. Além disso, os aplicativos Vue podem ser gravados sem recorrer à linha de comando. Para fazer isso, basta adicionar uma tag à página HTML para carregar o script correspondente. E, finalmente, você pode não querer se preocupar em configurar seu ambiente de desenvolvimento. Em vez disso, você se esforça para experimentar o Vue o mais rápido possível, sem movimentos desnecessários. De fato, não importa qual estratégia você siga, aqui você encontrará algo para ajudá-lo a começar a usar o Vue.

No processo de leitura deste material, você encontrará links para recursos úteis. E quando você ler este artigo inteiro, eu vou lhe dizer em que você deve prestar atenção para um estudo mais aprofundado do Vue. Deve-se notar que aqui não vamos nos aprofundar nos meandros do Vue, não consideraremos todos os mecanismos possíveis dessa estrutura. Vamos lidar com o básico e chegar ao primeiro aplicativo de trabalho.

Primeiro, vamos falar sobre alguns recursos interessantes do Vue.

Vue Pontos Fortes

A força do Vue, na minha opinião, é o quão amigável essa estrutura é para iniciantes. A equipe de desenvolvimento do Vue fez um trabalho maravilhoso, tentando garantir que desenvolvedores de várias qualificações possam rapidamente começar a trabalhar produtivamente com a estrutura. Se você conhece HTML, CSS e JavaScript - isso significa que você está literalmente a um passo de desenvolver aplicativos bastante poderosos no Vue.

Também acredito que o Vue, entre as três principais ferramentas de desenvolvimento de front-end (Angular, React e Vue), possui as menores barreiras de entrada. Isso é verdade por vários motivos, mas, para mim, se resume a três características principais do Vue:

• Ótima documentação.
• Comunidade maravilhosa.
• Este é um quadro progressivo.

▍ Documentação

Se você conversar com desenvolvedores que gostam do Vue, acho que muitos deles falarão primeiro sobre a qualidade da documentação desse framework. Se você visitar o Vue.js, poderá achar que a documentação está dividida em várias seções:

• Liderança . Aqui você encontra tudo o que precisa para começar a usar o Vue.js. Esta seção é dividida em subseções fáceis de entender que apresentam ao leitor os conceitos necessários para começar a desenvolver aplicativos baseados em componentes.
• API Esta seção fornece uma descrição detalhada da API do Vue. Por exemplo, se você encontrar algum método sobre o qual não tenha certeza, a visita a esta seção ajudará a esclarecer a situação.
• Recomendações Aqui você pode encontrar recomendações maravilhosas, após as quais você pode evitar o aparecimento de erros. Essas recomendações podem alertar o desenvolvedor contra o uso de antipadrões. O importante é que é mais provável que não sejam regras difíceis, mas algo como um guia. Depois de se sentir confortável com o Vue, escreva alguns aplicativos, recomendo que você leia os materiais desta seção. Acredito que essa é uma fonte muito valiosa de conhecimento sobre o Vue.
• Exemplos . Aqui você pode encontrar exemplos de aplicativos desenvolvidos pela Vue. Em seu lugar, eu não teria procurado aqui até me acostumar um pouco com o desenvolvimento de componentes. Mas um pouco mais tarde, quando estiver pronto para aprender sobre como os aplicativos Vue completos são organizados, você deve estudar esta seção.
• Livro de receitas . Esta seção contém respostas para perguntas freqüentes sobre o Vue. Por exemplo, para essas perguntas: “Como executar a validação de formulário?”, “Como realizar testes de unidade de um componente?”. Esse é novamente um recurso valioso, mas o desenvolvimento de seus materiais deve ser adiado até o momento em que você tiver perguntas semelhantes às listadas acima.
• Ferramentas e bibliotecas principais. O Vue possui excelentes ferramentas e bibliotecas principais. Não entraremos em detalhes especiais sobre isso, pois precisamos começar a escrever o código o mais rápido possível. Vou dar aqui alguns links para materiais, cuja existência é útil saber. Portanto, entre as ferramentas do Vue, gostaria de observar o seguinte: ferramentas de desenvolvedor , Vue CLI , Vue Loader . Aqui estão os links para os materiais nas bibliotecas oficiais: Vue Router , Vuex , Vue Server Renderer .

▍ Comunidade

Como programador, me sinto envolvido em várias grandes comunidades. Um deles é a comunidade Vue. Seus membros são amigáveis, amigáveis, estão mais do que dispostos a ajudar aqueles que precisam. Eu recomendo seguir os seguintes membros da comunidade Vue no Twitter. Portanto, será mais fácil para você entender o que eles estão fazendo e descobrir o que eles vivem. Aqui estão os links:

• Evan você
• Chris fritz
• Sarah drasner
• Damian sulisz
• Divya sasidharan
• Guillaume chau
• Ben hong
• Sebastien chopin
• Natalia Tepluhina
• Edd yerburgh

UeVue é uma estrutura progressiva

Se você visitar a página inicial do Vue.js, poderá ver que ele é chamado lá: "Estrutura JavaScript progressiva". À primeira vista, isso pode parecer uma manobra de marketing comum, mas, com um pouco de compreensão da essência do Vue, você pode entender que isso não é verdade. Primeiro, vamos determinar o significado da palavra "progressivo". É algo acontecendo ou se desenvolvendo gradualmente ou em etapas; é algo que é realizado passo a passo.

Em breve, você verá que, ao desenvolver aplicativos Vue, você pode trabalhar introduzindo gradualmente os recursos dessa estrutura neles. Por exemplo, se você já possui um determinado projeto, pode equipá-lo com o suporte do Vue sem problemas. Você pode começar carregando o script Vue e escrevendo algumas linhas de código.

Se você deseja usar a CLI do Vue, a ferramenta de linha de comando do Vue, para implantar um novo projeto com os recursos necessários, isso também não é um problema. À medida que seu aplicativo cresce, e você precisa de alguns recursos bastante avançados, como roteamento ou gerenciamento de estado, o aplicativo não será difícil de equipar com esses recursos.

Como já mencionado, o Vue é uma estrutura acessível. Se você já conhece HTML, CSS e JavaScript, significa que está pronto para começar a usar o Vue. Por uma questão de fato, se você realmente deseja começar a escrever aplicativos Vue, proponho fazer isso.

Opção 1: script do Vue conectado à página

A primeira maneira de usar o Vue que estamos explorando é conectar um script do Vue à página usando a <script> . Se você já trabalhou com JavaScript, não haverá novidades para você. Ou seja, estamos falando sobre o fato de que há uma página HTML que precisa ser equipada com algumas funcionalidades implementadas em alguma biblioteca JS. Para isso, a biblioteca é conectada à página usando a <script> . Note-se que o método de uso do Vue considerado aqui não é apenas adequado para o desenvolvimento de um aplicativo de treinamento. Encontra aplicação em projetos reais.

Geralmente é bastante difícil introduzir novas ferramentas, bibliotecas ou estruturas em projetos reais, por exemplo, na organização em que o programador trabalha. Por exemplo, você realmente gosta de trabalhar com o Vue. Você vai às autoridades e pergunta se pode reescrever o projeto inteiro no Vue. Em resposta a essa pergunta, quase nenhuma opção será imediatamente recusada. Se você optar por usar o Vue em uma determinada página, cujo desenvolvimento você está envolvido atualmente, essa oferta poderá ser aceita.

No exemplo a seguir, desenvolveremos um aplicativo muito primitivo, o que é bom, pois será muito conveniente considerar alguns conceitos do Vue.

Hello "Olá, Vue!"

Nesta aplicação, vamos exibir o texto "Olá, Vue!", E abaixo do texto - a hora e a data atuais. Em seguida, escreveremos um código que mantém a data e a hora atualizadas. Como resultado, o usuário do aplicativo poderá usá-lo como um relógio regular, observando a passagem do tempo. Crie uma nova pasta, crie um arquivo index.html nela e adicione o seguinte código a esse arquivo:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Hello, Vue.js</title> </head> <body> </body> </html> 

Agora, temos o quadro da página, a base do futuro aplicativo. Portanto, nosso próximo passo será conectar o script Vue.js. a esta página. Adicione ao código da página, logo acima da </body> fechamento </body> , o seguinte:

 <!--             --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> </script> 

Preste atenção ao comentário. Ele aponta para uma coisa importante. Nomeadamente, agora conectamos a versão do Vue destinada ao desenvolvimento à página. Se uma determinada página se destina ao uso real, você precisa conectar a versão de produção do script. Detalhes sobre isso podem ser encontrados aqui .

Agora, depois de conectar o script, primeiro precisamos adicionar o elemento raiz à página à qual a instância do Vue será conectada:

 <div id="app"> </div> 

Depois disso, crie uma nova instância do Vue e informe a qual elemento raiz ele precisa se conectar:

 <script>  const app = new Vue({    el: '#app'  }) </script> 

Agora crie algumas variáveis. Eles irão armazenar os valores que usamos para exibir informações na página. Isso é feito declarando as propriedades do objeto de data :

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello, Vue!',      now: new Date()     }) </script> 

Agora que os dados estão prontos, estamos prontos para recorrer à capacidade do Vue de exibi-los na página. Isso é feito usando construções simples e fáceis de ler:

 <div id="app">  <h1>{{ message }}</h1>  <p>{{ now }}</p> </div> 

Agora você pode se felicitar por ter acabado de criar seu primeiro aplicativo Vue.js. Se você abrir o index.html em um navegador, deverá exibir uma página na qual "Olá, Vue!" Está escrito em letras grandes. Abaixo desta inscrição, deve haver uma linha que exibe a data e hora atuais. Durante o desenvolvimento e a pesquisa da minha versão do exemplo, usei o Visual Studio Code e a extensão do Live Server .

O que fizemos aqui não parece um projeto particularmente avançado. Mas nas entranhas de Vue, muitas coisas estão acontecendo que permitem que esse projeto funcione da maneira que precisamos. A estrutura estabeleceu a conexão entre o DOM e os dados, após os quais o aplicativo se tornou reativo. Como verificamos isso? Muito simples - basta abrir o console JS (diretamente na página do aplicativo) e escrever algo em app.message . Isso deve levar a uma alteração no rótulo exibido na página. Abaixo está o que pode parecer.


Pesquisa de aplicação

O Vue também oferece aos desenvolvedores a capacidade de criar manipuladores para eventos do ciclo de vida dos componentes. Isso significa que podemos ouvir eventos como created , mounted e destroyed . Quando um evento ocorre, você pode organizar a execução de algum código. Não entrarei em detalhes, pois o principal objetivo deste material é demonstrar vários métodos para criar aplicativos Vue, e não desmontar todos os meandros da estrutura. No entanto, agora ainda analisamos a aparência do processamento dos eventos do ciclo de vida dos componentes e terminamos o trabalho em nossa primeira aplicação.

Graças ao código a seguir, o valor da variável now será atualizado a cada segundo. Ao montar o Vue, usamos setInterval para configurar uma chamada de função a cada segundo para atualizar a data e a hora. Você pode criar manipuladores de eventos do ciclo de vida adicionando os métodos apropriados ao objeto de methods . Isso é muito parecido com o modo como trabalhamos com o objeto de data . Aqui está o código:

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello Vue!',      now: new Date()    },    methods: {      updateDate() {        this.now = new Date();      }    },    mounted() {      setInterval(() => {        this.updateDate();      }, 1000);    }  }) </script> 

Se você abrir esta página em um navegador, sua aparência não será alterada, mas a hora exibida nela será atualizada a cada segundo. Nesse caso, não precisamos atualizar o DOM manualmente. Vue vinculou dados ao DOM. Quando os dados mudam, o que é mostrado na página também muda.

Opção 2: CLI do Vue

Embora tenhamos criado o aplicativo simplesmente conectando o script Vue à página, essa abordagem não é muito escalável. Se você precisar desenvolver um aplicativo de página única completo (Aplicativo de Página Única, SPA) e, ao mesmo tempo, desejar usar as ferramentas auxiliares do Vue, é melhor recorrer à CLI do Vue.

Se você é um daqueles que realmente não gosta de trabalhar na linha de comando, pode usar uma ferramenta com recursos semelhantes que possuem uma interface gráfica (Vue UI).

▍Instalando o Vue CLI

Primeiro, precisamos instalar a CLI do Vue. Antes de fazer isso, você precisa obter o Node.js e o npm. Se você não trabalhou com Node.js e npm antes, reserve um tempo para conhecê-los e entendê-los um pouco. Aqui está o comando com o qual instalar a CLI do Vue:

 npm install -g @vue/cli 

Para criar um novo aplicativo, você pode usar o comando vue create . Você pode descobrir a lista de comandos que o vue suporta usando o comando vue -h .


Lista de comandos suportados pelo vue

O comando create aceita o nome do aplicativo. Crie um novo aplicativo Vue executando o seguinte comando:

 vue create hello-vue 

Durante esse comando, uma nova pasta hello-vue será criada no diretório atual. Uma descrição detalhada do processo de criação de um aplicativo usando o vue create digna de um artigo separado.

Por enquanto, basta concordar com as configurações padrão. Isso levará à criação de um novo aplicativo.


Criando um novo aplicativo usando a CLI do Vue

Agora vá para a pasta hello-vue , abra o arquivo localizado em src/components/HelloWorld.vue e substitua todo o seu conteúdo pelo seguinte código:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Observe que o valor do texto que aparece em msg é definido no src/App.vue .

Agora, na linha de comando ou no terminal incorporado ao seu editor, execute o seguinte comando:

 npm run serve 

Ele iniciará o servidor, após o qual fornecerá informações sobre como abrir a página inicial do aplicativo. Ou seja, é http: // localhost: 8080 / .


Aplicativo Vue no navegador

Aqui, examinamos o uso do Vue CLI apenas muito superficialmente. No entanto, espero que este exemplo tenha mostrado como é fácil usar o Vue CLI para criar novos aplicativos que são fornecidos com uma infraestrutura confiável e podem ser dimensionados de acordo com as crescentes necessidades de um projeto em desenvolvimento.

Opção 3: UI do Vue

Juntamente com a CLI do Vue, com a ferramenta de linha de comando, a ferramenta de interface do usuário do Vue também é instalada. Para iniciá-lo, use o seguinte comando:

 vue ui 

Durante sua execução, a página do novo aplicativo será aberta, localizada em http: // localhost: 8000 / dashboard .


Página da interface do usuário do Vue

Usando a interface do usuário do Vue, você pode criar um novo projeto que terá os mesmos recursos que um projeto criado usando ferramentas de linha de comando.


Criando um novo projeto na interface do usuário do Vue

Após a conclusão da configuração do projeto, você pode iniciá-lo diretamente da interface do usuário do Vue, acessando a seção Project tasks do Project tasks e clicando no botão correspondente.


Executando um aplicativo na UI do Vue

Opção 4: CodeSandbox

Embora as opções acima para criar o primeiro aplicativo Vue nos permitam alcançar nosso objetivo, elas exigem alguma configuração do ambiente de desenvolvimento. Talvez isso não lhe agrade e você ainda não criou seu primeiro aplicativo Vue. Nesse caso, agora veremos outra maneira de trabalhar com o Vue. Consiste no uso de ambientes de desenvolvimento online, um dos quais é o CodeSandbox .

Antes de criar projetos no CodeSandbox, você precisará se registrar no site ou fazer login usando uma conta do GitHub. Depois disso, você precisa criar uma nova “caixa de areia” (na estrutura do projeto, chamada de “caixa de areia”) e encontrar o Vue entre os modelos disponíveis (na guia Client templates Popular templates ou Client templates ).


Criando um novo projeto baseado em Vue no CodeSandbox

Depois disso, um novo aplicativo Vue estará à sua disposição. Na figura a seguir, você pode ver que, no painel esquerdo, pode trabalhar com arquivos de projeto, no centro está a janela do editor e, à direita, a área de visualização na qual o aplicativo de trabalho é exibido.


Trabalhar no aplicativo no CodeSandbox

Abra o arquivo src/components/HelloWorld.vue no editor e substitua seu conteúdo pelo seguinte código:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Depois disso, você verá o mesmo aplicativo em que já trabalhamos. Ao trabalhar em um projeto, pode ser necessário mostrá-lo a alguém. Por exemplo, para consultar sobre algo. O CodeSandbox permite fazer isso usando um link especial .


Trabalhar no aplicativo no CodeSandbox

Recursos úteis

Aqui estão os links para alguns dos meus recursos favoritos do Vue. Eles ajudarão você a avançar no desenvolvimento dessa estrutura. Por exemplo, aqui está a página Awesome Vue , visitando a qual você pode ter uma idéia da escala do ecossistema Vue. Encontre repositórios Vue aqui. Aqui está o blog oficial do projeto. Aqui está o site da comunidade de desenvolvedores do Vue. Lá vai você - Vue podcasts. Aqui estão as páginas de vários projetos baseados no Vue: VuePress , Nuxt , Gridsome .

O que vem a seguir?

Independentemente da estrutura usada para desenvolver o frontend, você precisa manter seu conhecimento sobre JavaScript em boas condições. Quanto mais tempo você dedicar à melhoria do seu conhecimento de JS, melhor. Se você conhece bem o JavaScript, significa que pode lidar com qualquer estrutura ou biblioteca com a qual possa precisar trabalhar.

Eu já falei sobre o manual do Vue na documentação oficial. Mas vale a pena mencionar novamente. Se eu fosse um desenvolvedor iniciante, eu tentaria lidar com este guia da maneira mais completa possível, lê-lo e relê-lo. Mas, ao mesmo tempo, não esqueceria de colocar em prática os exemplos de código encontrados lá. Não admira que eles digam que a repetição é a mãe da aprendizagem. A repetição desempenha um papel importante no processo de aprendizado de novas tecnologias, e você não pode prescindir dela.

Ao trabalhar com a documentação, você deve prestar especial atenção aos seguintes conceitos básicos do Vue:

• Os componentes
• Ligação de dados.
• Manipulação de eventos.
• Diretivas.
• Métodos
• Propriedades calculadas.
• Ciclo de vida dos componentes.
• Propriedades passadas para os componentes.

Não se esforce para criar aplicativos grandes por enquanto. Concentre-se em dominar as coisas básicas, e todo o resto virá com o tempo.

Sumário

Se você segue minhas postagens no Twitter, sabe que sou um grande fã do Vue. Eu gosto de criar aplicativos baseados em componentes. Acredito que o uso do Vue não apenas simplifica o trabalho, mas também torna o processo de escrever código uma experiência agradável e emocionante.

Caros leitores! Se você teve que estudar recentemente sua primeira estrutura de cliente, diga-nos como foi.