Como criar componentes na vue cli
Pré -requisitos
Antes de começar com isso, existem alguns pré -requisitos que você deve ter:
- Conhecimento básico de HTML, CSS e JavaScript.
- Nó.JS instalado em seu sistema operacional.
Verifique a instalação da CLI da VUE
Primeiro de tudo, verifique se você tem a mais recente CLI VUE instalada em seu sistema. Você pode verificar o Vue CLI está instalado ou não em nosso sistema digitando o comando abaixo:
$ vue -versão
Se estiver instalado, você terá a versão mais recente da vue cli impressa no terminal. Caso contrário, se não estiver instalado, você poderá usar o NPM Package Manager ou o Yarn Package Manager para instalar a VUE CLI. Para instalá -lo usando o NPM Package Manager, você precisa digitar o comando dado abaixo no terminal:
$ npm install -g @vue/cli
No comando acima, o -g A bandeira é usada para instalar a vue cli globalmente em seu sistema.
Depois que a CLI da VUE estiver completamente instalada, você pode verificar digitando o comando dado abaixo:
$ vue -versão
Você terá a versão mais recente da Vue CLI na saída.
Criação do projeto
Agora, suponha que você vai configurar todo o projeto Vue por conta própria. Nesse caso, não é uma boa opção reinventar a roda; O projeto Vue pode ser criado usando o Vue Comando no terminal porque a CLI da VUE fornece os modelos já gerados para começar com o projeto Vue.
Para criar o aplicativo VUE, basta digitar o comando dado abaixo no terminal:
$ vue crie o nome do projeto
Certifique -se de substituir o Nome do Projeto com o nome do projeto desejado e o golpe Digitar.
Depois de alguns segundos, ele solicitará a seleção da predefinição padrão ou a seleção de alguns recursos manualmente.
Se você quiser ter alguns recursos personalizados, selecione “Selecione manualmente recursos” Pressione Enter, e você será solicitado com algumas opções, como selecionar a versão Vue, adicionar Vuex ou roteador. Selecione a opção desejada e pressione Digitar.
Responda a algumas perguntas de configuração necessárias e salve a predefinição para projetos futuros.
O Projeto Vue será criado há algum tempo usando a CLI da Vue, e você poderá iniciar o desenvolvimento em Vue.JS.
Iniciando o aplicativo Vue
Depois que o projeto Vue for criado, você pode iniciar o projeto navegando pela primeira vez no diretório do projeto usando o comando CD no terminal:
$ CD Project-Name
No diretório do projeto, inicie o aplicativo VUE digitando o comando abaixo no terminal:
$ NPM Run Service
Após a ignição do aplicativo Vue, visite o http: // localhost: 8080 na barra de endereços do seu navegador favorito:
Você terá a tela de boas -vindas do vue.Projeto JS.
Criação de um componente em vue
Para criar um componente no projeto Vue, crie um .Vue arquivo no componentes pasta e forneça o nome de sua escolha.
Agora, neste recém -criado .Vue Arquivo, você pode escrever HTML, JavaScript e CSS no, e tags, respectivamente.
Abra o .Vue Arquive e escreva o código que deseja escrever. Por exemplo:
Um novo componente
Este é um texto dentro do recém -componente.
Depois de terminar com a parte HTML, dê a este componente um nome na tag, como mostrado no snippet de código abaixo:
Depois de criar com sucesso o componente, vamos ver como importá -lo e usá -lo em outra página ou componente.
Importação de um componente em Vue
A sintaxe de importação para importar um componente em qualquer outro componente do Vue é bastante simples e fácil; Você só precisa importar o componente dentro da tag de script usando a sintaxe ES6, como mostrado no snippet de código abaixo:
Depois de importar o componente com sucesso, tudo o que você precisa fazer é criar um objeto com o nome de componentes e fornecer o nome no componentes objeto como mostrado abaixo:
Agora, você pode usá -lo em qualquer lugar dentro da etiqueta do componente. Por exemplo, se queremos importá -lo para o Aplicativo.Vue, A sintaxe seria assim:
Depois de concluir toda essa configuração, salve cada arquivo que você mudou e volte para o navegador
Você pode testemunhar na captura de tela anexada que o componente é importado com sucesso e perfeitamente bem na página da web.
Conclusão
Criando, importar e usar um componente dentro de qualquer outro componente de vue.JS é tão fácil como dizer isso. Neste post, passamos por todo o processo de criação, adição e uso de um componente em Vue.JS.