close

Instalando o Vue.js e criando seu primeiro projeto

Para instalar o Vue.js, você pode seguir os passos abaixo:

Passo 1: Crie um novo diretório para o seu projeto e abra o terminal nesse diretório.

Passo 2: Use o npm para instalar o Vue CLI(Command Line Interface) executando o seguinte comando:

npm install -g @vue/cli


Etapa 3: Após a instalação bem-sucedida, você pode criar um novo projeto Vue usando o seguinte comando:

vue create my-vue-project


Etapa 4: Escolha as opções de configuração para o seu projeto, incluindo a instalação de pré-processadores Babel, ESLint e CSS(opcional).

Passo 5: Após a conclusão do processo de criação do projeto, navegue até o diretório do projeto usando o comando:

cd my-vue-project


Passo 6: Execute o seguinte comando para iniciar o projeto Vue:

npm run serve


Após a conclusão do processo de inicialização, você verá uma URL para acessar seu aplicativo Vue no navegador.

Um exemplo simples de Vue.js:

Vamos criar um novo arquivo HTML e nomeá-lo index.html `. Neste arquivo, adicione o seguinte código:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

Neste exemplo, criamos um aplicativo Vue simples com uma h1 tag e um botão. Quando o botão for clicado, a mensagem mudará.

Salve o index.html  arquivo e abra-o no navegador. Você verá a mensagem inicial como "Hello Vue.js!". Ao clicar no botão, a mensagem mudará para "Mensagem alterada com sucesso!".

Este é apenas um exemplo simples para você começar a usar o Vue.js. Você pode explorar muito mais recursos e capacidades poderosas do Vue.js enquanto desenvolve seus aplicativos.