Crie aplicativos Vue modernos usando Create-Vue e Vite

create-vue é uma ferramenta de andaimes para aplicativos Vue. Ele substitui o Vue CLI como a maneira recomendada de criar Vue SPAs (Single Page Apps). Hoje vamos conferir o create-vue, ver como ele funciona e construir um aplicativo usando-o.

create-vue automatiza a criação de um novo aplicativo Vue 2 ou Vue 3 usando o Vite. Vite é uma ferramenta de construção extremamente rápida criada pela equipe Vue. Onde o Vue CLI tem seu próprio pipeline de construção baseado em Webpack, o create-vue apenas monta um aplicativo. Essa abordagem oferece mais flexibilidade, pois você pode usar qualquer plug-in e configuração que funcione com o Vite, mas ainda é muito simples de usar. Além disso, create-vue é muito mais rápido que Vue CLI devido à otimização do Vite. Sem mais delongas, vamos começar.

Criando um aplicativo com Create-Vue

Primeiro, certifique-se de ter o Node.js e o npm instalados. Você verifica fazer isso executando npm -v:

npm -v
8.19.1

Se você não tiver o Node.js, poderá instalá-lo acessando a página de download do Node.js. Depois de fazer isso, abra um terminal na pasta em que você deseja que o projeto esteja. Em seguida, execute npm init vue@3. Ele solicitará que você instale o create-vue. Então você terá que configurar algumas coisas, pelas quais eu o guiarei.

Primeiro, você precisa decidir um nome para seus projetos. coloquei o nome create-vue-examplemas você pode configurá-lo para o que quiser.

Em seguida, create-vue perguntará se você deseja usar o TypeScript. Este é apenas um exemplo básico, então vamos definir isso como não.

Em seguida, ele perguntará se você deseja adicionar JSX. Mais uma vez, porque este é um exemplo básico, vamos apenas dizer não.

Para o resto, selecione sim para Vue Router, ESLint e Prettier e selecione não para o resto. No final, seu terminal deve ficar assim:

Agora, como dizem as instruções, cd no diretório do projeto, instale suas dependências com npm install e corra npm run dev. Ele deve fornecer um link para um servidor local. Clique no link e você deverá ver algo assim:

Parabéns! Você acabou de criar seu primeiro aplicativo Vue com create-vue! Se você deseja construí-lo para implantação, você pode executar npm run build Agora, vamos mergulhar no código.

Explorando o código

Depois de terminar de configurar tudo, a estrutura do arquivo deve ficar assim:

A seguir, vamos dar uma olhada no src pasta:

Agora que analisamos os arquivos, vamos tentar personalizar o pipeline de compilação com plugins.

Personalizando o pipeline de construção com plugins

Os plugins podem ser muito úteis para desenvolver de forma mais eficiente. Por exemplo, digamos que você queira implementar uma fonte personalizada do Google Fonts. Você pode usar o link que o Google Fonts fornece em seu site para baixar automaticamente a fonte. No entanto, o Google Fonts pode ser bastante lento. Felizmente, existem soluções. Você pode hospedar a fonte usando algo como o Google Webfonts Helper, mas isso pode ser muito trabalhoso. Felizmente, os plugins vêm em socorro aqui. Usando vite-plugin-webfont-dl, você pode vincular a fontes no Google Fonts como faria normalmente e o plug-in lida com toda a transformação.

Como adicionar um plug-in

Adicionar um plugin é muito simples. Primeiro, precisamos instalá-lo executando npm install --save-dev plugin-name ou neste caso, npm install --save-dev vite-plugin-web-dl. Em seguida, precisamos adicioná-lo à configuração do Vite. Primeiro, vá para vite.config.js e importe o plugin assim:

import webfontDownload from 'vite-plugin-webfont-dl';

Em seguida, você precisará colocar o plugin no plugins matriz de sua configuração.

plugins: [vue(), webfontDownload()],

Agora, seu vite.config.js deve ficar algo assim:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import webfontDownload from 'vite-plugin-webfont-dl';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), webfontDownload()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Agora você pode carregar fontes simplesmente colando o HTML fornecido a você pelo Google Fonts, e elas serão otimizadas automaticamente!

Usando variáveis ​​de ambiente

Se você quiser acessar facilmente a configuração do seu código durante o processo de compilação, convém usar variáveis ​​de ambiente. O Vite permite carregar variáveis ​​do arquivo e substituir chamadas para a variável por seu valor durante o processo de compilação. Por exemplo, digamos que você queira configurar facilmente a URL do banco de dados que seu código usou. Você primeiro criaria um .env arquivo no diretório do seu projeto. Nesse arquivo, coloque algo assim:

VITE_DB_URL=https://url

O nome da variável não importa, desde que comece com VITE_. Agora, para acessar seu código, você precisa se referir a ele assim:

console.log(import.meta.env.VITE_DB_URL)

Então, quando o Vite compilar seu projeto, esse código será transformado em algo assim:

console.log("https://url")

O Vite também inclui algumas variáveis ​​de ambiente incorporadas, como import.meta.env.PROD.

if (import.meta.env.PROD) {
    // App is being compiled for deployment
} else {
    // App is in development mode
}

Conclusão

Agora você já conhece o create-vue e o Vite! Essas ferramentas nos permitem configurar facilmente um aplicativo Vue com desenvolvimento rápido e configuração poderosa. Se você quiser saber mais, confira a Documentação do Vite, e se quiser ver outras opções, confira o Vitepress e o Nuxt. Obrigado por ler!