Descubra como começar a usar um elegante aplicativo Svelte.

Os frameworks da Web vêm e vão, mas um dos mais promissores é o Svelte. O Svelte é uma ótima alternativa ao React e, embora já tenha uma grande comunidade, é definitivamente um framework a ser observado. O Svelte facilita o estilo de seus aplicativos, com várias abordagens disponíveis.

Estilizando aplicações Svelte

Toda biblioteca ou estrutura de interface do usuário requer um método para estilizar seus componentes. A maioria das estruturas baseadas em componentes oferece suporte ao método tradicional de estilizar componentes: basta importar o arquivo CSS e pronto. Svelte não é exceção. No Svelte, existem três maneiras principais de estilizar seus aplicativos, cada uma com suas próprias vantagens e desvantagens.

Configurando seu projeto Svelte

Para instalar o Svelte, você pode usar o Ferramenta de construção de front-end ViteJS. Para configurar as coisas, certifique-se de que o Tempo de execução do Node.js e o gerenciador de pacotes de nós (NPM)

instagram viewer
estão corretamente instalados em seu computador. Você pode verificar a disponibilidade de Node.js e NPM executando o seguinte comando no terminal:

node -v

Depois de verificar se o Node está em execução, abra o terminal e execute o seguinte:

npm create vite

Ou:

yarn create vite

Isso deve servir de base para um novo projeto do Vite. Defina o nome do projeto como quiser, a estrutura deve ser "Svelte" e a variante deve ser JavaScript (mas você pode usar TypeScript se estiver confortável com isso). Agora, mude para o diretório do projeto com o cd e execute o seguinte comando para instalar as dependências necessárias:

npm install

Ou:

yarn

Depois de instalar as dependências, você pode iniciar o servidor de desenvolvimento executando:

npm run dev

Ou:

yarn dev

Definindo a Marcação do Projeto

Abra o projeto em qualquer editor de código de sua escolha e exclua o ativos e lib pasta. Além disso, certifique-se de limpar o conteúdo do app.css arquivo e o App.svelte arquivo. Abra o main.js arquivo e substitua o conteúdo pelo seguinte:

import App from'./App.svelte'
const app = new App({
 target: document.getElementById('app'),
})
exportdefault app

A seguir, abra o App.svelte arquivo e no roteiro tag e crie um array que conterá links diferentes, como este: