Descubra cómo comenzar con una elegante aplicación Svelte.

Los marcos web van y vienen, pero uno de los más prometedores es Svelte. Svelte es una excelente alternativa a React y, aunque ya tiene una gran comunidad, definitivamente es un marco a tener en cuenta. Svelte facilita el estilo de sus aplicaciones, con varios enfoques disponibles.

Diseñar aplicaciones esbeltas

Cada biblioteca o marco de interfaz de usuario requiere un método para diseñar sus componentes. La mayoría de los marcos basados ​​en componentes admiten el método tradicional de diseño de componentes: simplemente importe el archivo CSS y listo. Esbelto no es una excepción. En Svelte, hay tres formas principales de diseñar sus aplicaciones, cada una con sus propias ventajas y desventajas.

Configuración de su proyecto Svelte

Para instalar Svelte, puede utilizar el Herramienta de compilación front-end de ViteJS. Para configurar las cosas, asegúrese de que el Tiempo de ejecución de Node.js y el administrador de paquetes de nodos (NPM)

instagram viewer
estén correctamente instalados en su computadora. Puede verificar la disponibilidad de Node.js y NPM ejecutando este siguiente comando de terminal:

node -v

Después de asegurarse de que Node se está ejecutando, abra la terminal y ejecute lo siguiente:

npm create vite

O:

yarn create vite

Esto debería servir de andamio para un nuevo proyecto de Vite. Establezca el nombre del proyecto como desee, el marco debe ser "Svelte" y la variante debe ser JavaScript (pero puede usar TypeScript si se siente cómodo con eso). Ahora, cambie al directorio del proyecto con el cd comando y ejecute el siguiente comando para instalar las dependencias necesarias:

npm install

O:

yarn

Después de instalar las dependencias, puede iniciar el servidor de desarrollo ejecutando:

npm run dev

O:

yarn dev

Definición del marcado del proyecto

Abra el proyecto en cualquier editor de código de su elección y elimine el activos y liberación carpeta. Además, asegúrese de borrar el contenido de la aplicación.css archivo y el App.esbelta archivo. Abre el principal.js archivo y reemplace el contenido con lo siguiente:

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

A continuación, abra el App.esbelta archivo y en el guion etiquete y cree una matriz que contendrá diferentes enlaces, como este: