ManivaBlog

Introdução ao Vue.js e Criação do Primeiro Aplicativo

26/02/2024 - Categorias: featuredjavascriptprogramacaotutoriaisvue
Créditos: https://digitalya.co/blog/vue-js-methods/

Por que ler este artigo?

Este artigo explora os principais recursos que o framework Vue.js pode oferecer para projetos de aplicação web, com foco no front-end. Você aprenderá a instalar, configurar e utilizar os recursos essenciais do Vue.js enquanto construímos uma aplicação de listagem de livros.

O que é o Vue.js?

O Vue.js é um framework JavaScript que permite criar interfaces de usuário interativas e reativas. Ele é flexível, leve e adequado tanto para prototipagem rápida quanto para o desenvolvimento de aplicações web complexas.
Vamos começar!

Passo 1: Configuração do Ambiente

Antes de tudo, você precisa ter o Node.js instalado em seu computador. Se você ainda não o tem, faça o download e instale-o através desse link.
Em seguida, abra o terminal e execute o seguinte comando para instalar o Vue CLI (Command Line Interface):
npm install -g @vue/cli

Passo 2: Criando um Novo Projeto Vue

Agora que temos o Vue CLI instalado, crie um novo projeto Vue.js. No terminal, execute o seguinte comando:
vue create meu-primeiro-app
Siga as instruções para escolher as configurações desejadas. O Vue CLI criará a estrutura básica do seu projeto.

Passo 3: Explorando o Projeto

Navegue até a pasta do seu projeto:
cd meu-primeiro-app
Abra o projeto em seu editor de código favorito. Você verá uma estrutura de pastas com arquivos como src, public, e package.json.

Passo 4: Criando um Componente

Vamos criar nosso primeiro componente Vue. Na pasta src, crie um novo arquivo chamado LivroLista.vue. Dentro desse arquivo, defina o seguinte componente:
<template>
  <div>
    <h1>Lista de Livros</h1>
    <ul>
      <li v-for="livro in livros" :key="livro.id">{{ livro.titulo }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      livros: [
        { id: 1, titulo: 'Dom Quixote' },
        { id: 2, titulo: 'Cem Anos de Solidão' },
        { id: 3, titulo: '1984' }
      ]
    };
  }
};
</script>

Passo 5: Usando o Componente

Agora, vamos usar nosso componente LivroListana página principal. Abra o arquivo src/App.vuee adicione o seguinte código:
<template>
  <div id="app">
    <LivroLista />
  </div>
</template>

<script>
import LivroLista from './LivroLista.vue';

export default {
  components: {
    LivroLista
  }
};
</script>

Passo 6: Rodando o Aplicativo

No terminal, execute o seguinte comando para iniciar o servidor de desenvolvimento:
npm run serve
Acesse o aplicativo em seu navegador em http://localhost:8080. Você verá a lista de livros renderizada!

Conclusão

Parabéns! Você criou seu primeiro aplicativo Vue.js. Agora você está pronto para explorar mais recursos e construir aplicações incríveis com Vue.js. 🎉
Lembre-se de consultar a documentação oficial do Vue.js para aprender mais e aprofundar seus conhecimentos. Divirta-se codificando! 😊

Veja também