svelte

Pilnīgs izvietošanas ceļvedis svelte uz NStrim

Pārskats

Svelte ir moderns JavaScript ietvars, kas pārceļ darbu no pārlūkprogrammas uz kompilācijas laiku, radot ļoti optimizētu JavaScript kodu. Kopā ar SvelteKit tas nodrošina pilnu steka ietvaru ātru un efektīvu tīmekļa lietojumprogrammu izveidei.

Pirms sākat

Pārliecinieties, ka jums ir atvērts informācijas panelis - jums būs nepieciešami tur parādītie Git akreditācijas dati. Šī veidne ietver Tailwind CSS 4 stilizēšanai un izmanto Svelte 5 ar runes.

Ātrais sākums

Izveidojiet repozitoriju no veidnes

Savā vadības panelī atveriet cilni Tools & Deployment. Noklikšķiniet uz pogas "New Repository", izvēlieties Svelte veidni no nolaižamā saraksta, ievadiet repozitorija nosaukumu un apakšdomēnu, un noklikšķiniet "Create Repository".

Klonējiet savu repozitoriju

git clone https://<git-server>/<username>/<repo-name>.git
cd <repo-name>

Instalējiet atkarības

npm install

Palaidiet izstrādes serveri

npm run dev

Atveriet http://localhost:4200 savā pārlūkprogrammā.

Būvējiet un augšupielādējiet

npm run build
git add .
git commit -m "Initial setup"
git push origin main

Katra augšupielāde Git automātiski izvieto jūsu lietojumprogrammu. Pārbaudiet sava moduļa darba URL informācijas panelī, lai redzētu savu tiešsaistes vietni.

Lokālā izstrāde ar Docker

Ja jums nav lokāli instalēts Node.js, varat izmantot Docker, lai palaistu Svelte komandas. Projektā ir iekļauts Dockerfile produkcijas būvējumiem.

Kas ir Docker?

Docker izveido izolētus "konteinerus" ar visu nepieciešamo programmatūru (Node.js, npm), neinstalējot to jūsu datorā. Iedomājieties to kā vieglu virtuālo mašīnu.

Priekšnoteikumi

Instalējiet Docker Desktop savai operētājsistēmai (Windows, Mac vai Linux).

Komandu palaišana ar Docker

# Palaist npm install
docker run --rm -v $(pwd):/app -w /app node:20-alpine npm install

# Palaist izstrādes serveri (pieejams localhost:4200)
docker run --rm -v $(pwd):/app -w /app -p 4200:4200 node:20-alpine npm run dev

# Būvēt produkcijai
docker run --rm -v $(pwd):/app -w /app node:20-alpine npm run build

Piezīme

Docker ir neobligāts lokālai izstrādei. NStrim platforma automātiski apstrādā izvietošanu - Docker ir nepieciešams tikai tad, ja vēlaties palaist komandas lokāli bez instalēta Node.js.

Projekta struktūra

Izpratne par failu atrašanās vietām:

├── src/
│   ├── routes/
│   │   ├── +page.svelte          # Sākumlapas komponente
│   │   └── +layout.svelte        # Saknes izkārtojums (aptver visas lapas)
│   ├── lib/
│   │   ├── index.js              # Koplietojamie eksporti
│   │   └── assets/               # Statiskie resursi (attēli utt.)
│   ├── app.html                  # HTML veidne
│   └── app.css                   # Globālie stili (Tailwind)
├── static/                       # Publiskie statiskie faili
├── svelte.config.js              # SvelteKit konfigurācija
├── vite.config.js                # Vite būvējuma konfigurācija
├── package.json                  # Atkarības un skripti
└── Dockerfile                    # Docker būvējuma konfigurācija

Bieži veicamie uzdevumi

Jaunas lapas izveide

Izveidojiet jaunu mapi src/routes/ ar +page.svelte failu:

# Izveidot "about" lapu /about
mkdir src/routes/about
touch src/routes/about/+page.svelte

Mapes nosaukums automātiski kļūst par URL ceļu.

Komponentes izveide

Izveidojiet .svelte failus src/lib/ atkārtoti lietojamām komponentēm:

<!-- src/lib/Button.svelte -->
<script>
  let { label, onclick } = $props();
</script>

<button class="bg-blue-500 text-white px-4 py-2 rounded" {onclick}>
  {label}
</button>

Komponentu importēšana

Izmantojiet $lib aizstājvārdu, lai importētu no lib mapes:

<script>
  import Button from '$lib/Button.svelte';
</script>

<Button label="Click me" onclick={() => alert('Hello!')} />

Tailwind CSS izmantošana

Tailwind CSS 4 ir iepriekš konfigurēts. Izmantojiet klases tieši savās komponentēs:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  Hello Tailwind!
</div>

Stāvokļa pārvaldība ar Runes (Svelte 5)

Svelte 5 izmanto runes reaktivitātei:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Count: {count} (doubled: {doubled})
</button>

Noderīgas komandas

npm run dev Palaist izstrādes serveri (ports 4200)

npm run build Būvēt produkcijai

npm run preview Priekšskatīt produkcijas būvējumu lokāli

npm test Palaist vienību testus ar Vitest

npm run format Formatēt kodu ar Prettier

npm run lint Pārbaudīt koda stilu un kļūdas

Problēmu novēršana

npm install neizdodas ar atļauju kļūdām

Cēlonis: Atļauju problēmas ar npm kešatmiņu vai node_modules.

Risinājums: Izdzēsiet node_modules mapi un package-lock.json, pēc tam palaidiet npm install vēlreiz.

Ports 4200 jau tiek izmantots

Cēlonis: Cits process izmanto portu 4200.

Risinājums: Izmantojiet citu portu: npm run dev -- --port 3000 vai apturiet citu procesu.

Modulis nav atrasts kļūdas

Cēlonis: Atkarības nav instalētas vai ir bojātas.

Risinājums: Palaidiet npm install, lai instalētu visas atkarības.

$state vai $derived nedarbojas

Cēlonis: Tiek izmantota Svelte 4 sintakse Svelte 5 projektā.

Risinājums: Svelte 5 izmanto runes. Aizstājiet let count = 0 ar let count = $state(0) reaktīvam stāvoklim.

Būvējums neizdodas pēc izvietošanas

Cēlonis: Būvējuma kļūdas vai trūkstošas atkarības.

Risinājums: Vispirms palaidiet npm run build lokāli, lai pārbaudītu kļūdas pirms augšupielādes.

Izvietošanas darbplūsma

Katru reizi, kad augšupielādējat kodu Git, jūsu lietojumprogramma tiek automātiski būvēta un izvietota:

Koda izmaiņas git push npm run build Izvietot statiskos failus Tiešraidē!

Jūsu izvietotās lietojumprogrammas URL seko šādam formātam:

https://<your-subdomain>-<repo-name>.<session-domain>

Piemērs: https://student01-module-a.demo.nstrim.app

Lai iegūtu vairāk informācijas, apmeklējiet oficiālo SvelteKit dokumentāciju.