Exercício – Criar um aplicativo usando o Vue.js

  • 5 minutos

Nesta unidade, você cria um aplicativo inicial Vue usando um arquivo HTML. O arquivo é vinculado à biblioteca principal do Vue e a um arquivo JavaScript externo que contém os detalhes do aplicativo. Você definirá uma variável de dados do Vue e a exibirá dinamicamente na página HTML.

Clonar o repositório inicial

O site inicial do aplicativo inclui imagens e um estilo base. Comece clonando o repositório e abrindo-o no Visual Studio Code.

Abra um terminal ou uma janela Comando e execute os comandos a seguir.

git clone https://github.com/MicrosoftDocs/mslearn-vue-get-started/
cd mslearn-vue-get-started/start
code .

Você instalará o Vue.js da CDN (Rede de Distribuição de Conteúdo).

  1. No Visual Studio Code, abra index.html.

  2. Instale o Vue.js vinculando-o à biblioteca principal do Vue. No arquivo inicial index.html, abaixo do comentário TODO: Import Vue.js core library, cole a marca de script a seguir.

    <!-- TODO: Import Vue.js core library -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Criar um arquivo JavaScript para seu aplicativo Vue

Você poderá começar escrevendo um script Vue dentro do arquivo HTML, se desejar. Mas, normalmente, você pode gerenciar seu aplicativo de maneira mais correta colocando o código em um arquivo JavaScript separado.

  1. Crie um arquivo chamado index.js.

  2. Crie o aplicativo adicionando o código a seguir a index.js.

    const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later


        }
    },
});

    A função createApp() está disponível porque você importou a biblioteca Vue.js para a marca <head> da página HTML. Em seguida, transmita um argumento para essa função como um objeto com uma propriedade data. Esse objeto retorna outro objeto que você usa para armazenar seus dados.

Importar e montar o aplicativo

Agora que você criou o código JavaScript, importe e monte o aplicativo.

  1. Volte ao index.html.

  2. Abaixo do comentário TODO: Import Vue app, adicione o script a seguir.

    <script src="./index.js"></script>
<script>
    app.mount('#app');
</script>

Usar o aplicativo Vue

Agora que você criou e importou seu aplicativo Vue, crie a exibição para as informações.

No arquivo index.html, abaixo do comentário TODO: Add information display, adicione o HTML a seguir.

<div id="app">
    <h2>{{ productName }}</h2>
    <div>{{ productDescription }}</div>
</div>

Importante

A ordem das páginas é importante no processamento do Vue.js. Não é possível anexar o aplicativo ao DOM (Modelo de Objeto do Documento) até que a página HTML seja totalmente carregada. Portanto, importe o aplicativo Vue na parte inferior da página depois que todos os outros elementos HTML forem carregados no navegador. Geralmente, é uma boa ideia permitir que a página HTML seja carregada antes de chamar um arquivo de script externo destinado a alterar o conteúdo ou a estrutura do DOM.

Abrir a página usando o Live Server

A extensão Live Server para Visual Studio Code cria um servidor Web de desenvolvimento que atualiza automaticamente a página conforme as alterações são detectadas. Siga o link anterior para instalar a extensão. Depois, use-a para hospedar sua página.

  1. Salve todos os arquivos.

  2. Abra a paleta de comandos no Visual Studio Code selecionando CTRL + SHIFT + P. Em um Mac, selecione Cmd+Shift+P.

  3. Digite Live Server: Abrir com o Live Server.

    Na caixa de diálogo que será aberta, você verá que a página agora está hospedada em http://localhost:5500.

  4. Abra um navegador e acesse http://localhost:5500.

Você verá a página criada.

Captura de tela que mostra a página recém-criada.