Introdução à CLI e aos componentes personalizados do Vue

  • 1 minuto

Embora seja possível criar um aplicativo Vue.js inteiro em um só arquivo JavaScript, isso é gerenciável apenas para aplicativos muito pequenos. Para dar suporte à divisão do aplicativo em unidades menores, o Vue permite que você crie componentes. Os componentes são blocos de construção reutilizáveis com base nos quais você pode criar seu aplicativo.

Eles podem ser criados como arquivos JavaScript ou por meio de um componente de arquivo único com uma extensão .vue. Componentes de arquivo único usam uma sintaxe especializada que os navegadores não podem ler. Essa sintaxe precisa ser convertida no JavaScript, HTML e CSS apropriados. O processo de conversão de sintaxe especializada em algo que um navegador pode ler é chamado de agrupamento e requer ferramentas extras, como o webpack.

Felizmente, o Vue também fornece uma CLI (interface de linha de comando) que você pode usar para inicializar um aplicativo. A CLI configura todas as ferramentas necessárias, incluindo um agrupador e um servidor de desenvolvimento.

Neste módulo, exploraremos como:

  • Usar a CLI do Vue para criar um aplicativo.
  • Criar componentes de arquivo único.
  • Usar props para passar valores para componentes.

Pré-requisitos:

  • Noções básicas sobre o Vue.js
  • Conhecimento de HTML e CSS
  • Conhecimento de JavaScript
  • Familiaridade com as diretivas do Vue.js
  • Visual Studio Code
  • Node.js

Observação

Para obter o código de solução para este módulo, você pode clonar o repositório executando o seguinte comando em uma janela de terminal ou de comando:

git clone https://github.com/MicrosoftDocs/mslearn-vue-components
cd mslearn-vue-components/end
code .