Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Primeros pasos

3/26
Recursos

Aportes 31

Preguntas 7

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Les comparto unos enlaces que generará más gusto por aprender:

Y sobre todo, el sitio del profesor @gndx

Aunque ya para este curso debes saber JS, por si acaso, npx viene en el paquete de NodeJS. Instala NodeJS https://nodejs.org. Una vez que tengas instalado node y npx, instala degit con:

npm install -g degit

y entonces ya podrías instalar Svelte como lo menciona el prof. Óscar.

npx degit sveltejs/template svelte
cd svelte
npm install

Este es el plugin de VS Code para que los archivos .svelte se vean con color en las etiquetas. y este es el repo en github

Hola chicos, solo por si les interesa, para que los iconos se vean igual de cool como se ven en el Visual de Oscar, la extensión se llama Material Icon, me gustó cuando lo vi y lo busqué, de pronto a alguien le pueda gustar

Baby steps
_

Este es el comando para crear el proyecto

npx degit sveltejs/template "nombre del proyecto"

Con este comando instalan Svelte usando WebPack, aunque no esta de mas aprender a usar otro empaquetador 😃

npx degit sveltejs/template-webpack svelte-app

Dejo algunos apuntes de la clase

Si quieren formatear el código, con Ctrl + shift + p
buscan formato y listo.

toso lo que se trabaje con svelte esta en un mismo archivo

Usando WSL, no recargaba la página, pero era porque la dirección del proyecto estaba en /mnt

Volví a crear el proyecto usando root /~ como raiz, y funciona sin problema.

Encuentro similitudes entre svelte y vue (en cuestión de como luce un archivo .svelte y uno .vue). Pero a nivel interno son bastante diferentes

Like si esperar ansioso la llegada de SvelteKit SvelteKit

Una duda, podria trabajar svelte colocando en el archivo este orden?

  • Vista (HTML)
  • Estilos (CSS)
  • Lógica (JS)

Son costumbres que tengo de trabajar con Vue jej

Genial! Creo que me está gustando micho Svelte! y solo llevo tres clases. Increible la verdad.

Wauuu se ve un código más limpio.

Instalen la extension de svelte para el editor que estén usando.

¿qué extensión instalaste para el formateo autómatico al guardar tus cambios?
Saludos.

Buenas tardes.
Para aquellas personas que puedan tener problema al ejecutar

npx degit sveltejs/template svelte

la solución puede ser instalar git, en Ubuntu solo basta con sudo apt install git y luego intentar ejecutar la instalación de svelte, de acuerdo con el video.
Gracias 😄

Me gusta porque los archivos son como Vue, general el HTML, CSS y JavaScript en un documento y parece que es fácil pasar valores entre archivos.

Bueno en mi caso la estructura de App.svelte era diferente. Primero está el script, luego el html y al final los styles.

Les comparto un problema que me apareció cuando intenté correr el proyecto con pm run dev.

EN un principio, me salió un mensaje de error y usé los siguientes comandos:

npm cache clean --force
rm -rf node_modules
npm install
git init
npm run dev

y funcionó

espero que les sirva

TIP: Si quieres un format elegante de tu código y usas VSCode, te recomiendo instalar estas extensiones:

Y en tu settings.json añade esta configuración:

{
"editor.formatOnSave": true,
  // Svelte
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

al momento de usar el comando npm run dev lo realiza bien en la terminal pero no logra cargar el link aparece problema para conectar con el servidor por lo que no puedo ver los cambios que haga 😦

Al fin un curso donde la versión está al día! 🎉🎉🎉

.
vamos por mas