Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Primeros pasos

3/26
Recursos

Aportes 35

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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
_

Dejo algunos apuntes de la clase

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

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

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.

Estoy viendo esto en el 2022 y estoy usando vite en lugar de rollup

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

Estoy cursando esta tecnolog铆a en junio 2023, vengo del curso de Frameworks. Por su velocidad al crear un archivo por cada componente con sus propias @mediaqueries Es una manera incre铆ble de crear visuales.

En caso de que las necesidades del producto incluyan robusto, aprender茅 Angular. Abrazos comunidad.

Comando que yo use para descargar la 煤ltima vers贸n de un proyecto Svelte.

npm create svelte@latest name__project

recomiendo usar VITE para esta era

Mi c贸digo no aparecia con colores, tuve que instalar la extensi贸n de Svelte en VS Code.

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

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