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.