# Ferramentas para SFC

# Playgrounds Online

Você não precisa instalar nada em sua máquina para experimentar SFCs do Vue - existem muitos playgrounds online que permitem que você faça isso diretamente no navegador:

Também é recomendável usar esses playgrounds online para fornecer reproduções ao relatar bugs.

# Andaimes de Projeto

# Vite

Vite (opens new window) é uma ferramenta de compilação leve e rápida com suporte a Vue SFC de primeira classe. Ele foi criado por Evan You, que também é o autor do próprio Vue! Para começar com o Vite + Vue, basta executar:

npm init vite@latest
1

Em seguida, selecione o template Vue e siga as instruções.

O SFC Playground (opens new window) também suporta o download dos arquivos como um projeto Vite.

# Vue CLI

Vue CLI (opens new window) é a ferramenta oficial de compilação baseada em webpack para projetos Vue. Para começar com Vue CLI:

npm install -g @vue/cli
vue create hello-vue
1
2

# Vite ou Vue CLI?

Recomendamos iniciar novos projetos com o Vite, pois oferece uma experiência de desenvolvimento significativamente melhor em termos de inicialização do servidor dev e desempenho de atualização em HMR (detalhes (opens new window)). Use o Vue CLI apenas se você confiar em recursos específicos do webpack (ex.: Federação de Módulos).

Se você é um usuário do Rollup (opens new window), pode adotar o Vite com segurança, pois ele usa o Rollup para compilações de produção e oferece suporte a um sistema de plug-ins compatível com Rollup. Até o mantenedor do Rollup recomenda o Vite como O wrapper de desenvolvimento web para o Rollup (opens new window).

# Suporte de IDE

A configuração de IDE recomendada é VSCode (opens new window) + a extensão Volar (opens new window). O Volar fornece realce de sintaxe e IntelliSense avançado para expressões de template, props de componentes e até validação de slots. Recomendamos fortemente esta configuração se você deseja obter a melhor experiência possível com Vue SFCs, especialmente se você também estiver usando TypeScript.

WebStorm (opens new window) também fornece suporte decente para Vue SFCs. No entanto, observe que o suporte para <script setup> ainda está em andamento (opens new window).

A maioria dos outros editores tem suporte a realce de sintaxe criado pela comunidade para Vue, mas não possui o mesmo nível de IntelliSense de código. A longo prazo, esperamos poder estender o alcance do suporte de editor aproveitando o Language Service Protocol (opens new window) já que a lógica central do Volar é implementada como um servidor de linguagem padrão.

# Suporte a Testes

# Integração de Blocos Customizados

Blocos customizados são compilados em importações para o mesmo arquivo Vue com diferentes consultas de solicitação. Cabe à ferramenta de compilação subjacente lidar com essas solicitações de importação.

  • Se estiver usando o Vite, um plug-in personalizado do Vite deve ser usado para transformar blocos customizados correspondentes em JavaScript executável. [Exemplo (opens new window)]

  • Se estiver usando Vue CLI ou webpack puro, um carregador do webpack deve ser configurado para transformar os blocos correspondentes. [Exemplo (opens new window)]

# Ferramentas de Nível Inferior

# @vue/compiler-sfc

Este pacote faz parte do monorepo principal do Vue e é sempre publicado com a mesma versão do pacote principal vue. Normalmente, ele será listado como uma dependência par do vue em um projeto. Para garantir o comportamento correto, sua versão deve sempre ser mantida em sincronia com vue - ou seja, sempre que você atualizar a versão de vue, você também deve atualizar @vue/compiler-sfc para corresponder a ela.

O próprio pacote fornece utilitários de nível inferior para processar Vue SFCs e destina-se apenas a autores de ferramentas que precisam oferecer suporte a Vue SFCs em ferramentas personalizadas.

# @vitejs/plugin-vue

Plugin oficial que fornece suporte a Vue SFC no Vite.

# vue-loader

O carregador oficial que fornece suporte a Vue SFC no webpack. Se você estiver usando o Vue CLI, consulte também documentação sobre como modificar as opções do vue-loader no Vue CLI (opens new window).