NgSysV.Memasang Sveltekit dan mencipta aplikasi web semua HTML yang mudah

Siri siaran ini diindeks di NgateSystems.com. Anda akan temui kemudahan carian kata kunci yang sangat berguna di sana juga.

Semakan terakhir: Nov '24

1. Pengenalan

Siaran ini direka bentuk untuk memberi anda rasa pertama tentang realiti kehidupan sebagai pembangun aplikasi web. Ia diakhiri dengan aplikasi web yang berfungsi mudah tetapi mesti bermula dengan tugas "pemasangan" rumit yang anda mesti berunding untuk sampai ke tahap di mana anda boleh menjalankan ini.

Walaupun perkara ini menggangu, tetap dengannya. Sebaik sahaja anda menyelesaikan masalah ini, anda akan berpeluang menggunakan editor VSCode Microsoft untuk membina sekeping kecil HTML. Akhir sekali, anda akan menggunakan sesi terminal VSCode untuk melancarkan ini dalam penyemak imbas melalui pelayan setempat Sveltekit.

Adakah bunyi ini bagus? Kemudian baca.

2. Pemasangan

Pemula mutlak mungkin mendapati bahagian ini rumit kerana ia melibatkan penggunaan beberapa prosedur yang tidak begitu mesra pengguna. Tetapi ia tidak mengambil masa yang lama dan anda akan mengambil beberapa kemahiran asas yang akan anda gunakan berulang kali pada masa hadapan. Inilah perkara yang anda akan lakukan:

1. Buat Projek
2. Pasang VSCode dan buka Projek anda di dalamnya
3. Buka sesi terminal
4. Pasang Node.js dan npm
5. Pasang SvelteKit.

2.1 Mencipta Projek

Langkah pertama anda ialah menggunakan alat Windows File Explorer untuk mencipta projek baharu. Anda perlu memilih nama untuk ini. Saya cadangkan anda menggunakan huruf kecil dan sempang dan pastikan nama itu pendek. Sesuatu seperti svelte-dev mungkin idea yang bagus. Anda juga harus mengelak daripada mencari folder anda dalam storan versi Dropbox atau OneDrive. Projek Webapp cenderung menjadi agak besar dan bertanggungjawab untuk mengatasi sistem versi tujuan umum. Walau apa pun, VSCode dan Git akan menyediakan semua versi yang anda perlukan.

2.2 Memasang VSCode dan menambah Projek anda pada "ruang kerja"nya

Ikuti arahan di Bermula dengan Kod Visual Studio untuk memasang perisian pada peranti anda. Lancarkannya menggunakan ikon desktopnya dan perhatikan entri "Fail" dalam bar menu di bahagian atas skrin VSCode. Klik ini, pilih "Tambah Folder ke Ruang Kerja", navigasi ke lokasi folder projek anda dan pilih/tambahkannya.

Pada ketika ini, skrin VSCode akan memaparkan tiga lajur maklumat di bawah bar menunya: bar alat, panel "penjelajah" yang menunjukkan butiran kandungan "ruang kerja" dan kawasan kosong yang besar menunggu anda untuk mengedit fail ruang kerja.

Anda mungkin tertanya-tanya mengapa VSCode membebankan anda dengan konsep "ruang kerja" sedangkan anda hanya mempunyai satu projek. Ini kerana, dari masa ke masa, anda akan mengumpul banyak projek dan mendapati bahawa anda ingin berkongsi kod antara mereka. "Ruang kerja" membolehkan anda mengendalikan sekumpulan projek. Anda boleh mengalih keluar projek daripada ruang kerja dengan mengklik kanan padanya dan memilih "Alih Keluar Folder daripada Ruang Kerja". Jika anda menutup dan memulakan semula VSCode, anda akan mendapati ia telah mengingati tetapan kandungan ruang kerja anda sebelum ini dan akan mengembalikannya.

Memandangkan anda akan banyak menggunakan VSCode, anda mungkin mempertimbangkan untuk "menyemat" VSCode pada bar alat desktop anda. Ambil perhatian bahawa, setelah anda menambahkan projek pada ruang kerja, VSCode akan bergantung padanya antara dimulakan semula sehingga anda secara eksplisit mengalih keluar folder itu dengan r-klik perintah "alih keluar folder dari ruang kerja".

2.3 Membuka sesi terminal dalam VSCode

Anda boleh membuka sesi terminal baharu pada projek anda dengan memilih "Terminal -> Terminal Baharu" pada menu VSCode dan kemudian mengklik entri projek anda dalam senarai yang muncul. Jika pilihan "Terminal" tidak kelihatan pada bar menu, anda akan menemuinya dalam "..." kawasan tumpahan berlebihan.

"Terminal" sepatutnya muncul sebagai tetingkap kecil di bahagian bawah kawasan pengeditan di sebelah kanan skrin VSCode. Ketinggian dan lebarnya boleh diubah saiznya dengan mengklik dan menyeret pada sempadan atas dan kiri. Anda akan mendapati bahawa anda juga boleh menghidupkan atau mematikannya menggunakan helah pintasan ctrl sekali lagi. Pada masa ini, ia kini sedang menunggu untuk anda memasukkan arahan "sesi terminal" pada baris yang didahului dengan alamat penuh folder projek anda.

Jika pengalaman IT anda sehingga kini sepenuhnya melalui penggunaan "klik dan titik" pada skrin Windows (Microsoft) dan iOS (Mac), pergantungan berat dalam siaran ini pada penggunaan sesi "terminal" mungkin datang sebagai kejutan yang tidak diingini.

Perkataan "terminal" di sini membawa anda kembali ke zaman awal pengkomputeran, jauh sebelum kemunculan "antara muka pengguna grafik" yang kami gunakan hari ini. Pembangun kemudian menggunakan peranti "terminal" seperti teletaip atau unit paparan visual "VDU" untuk mengeluarkan arahan sistem pengendalian dengan menaip "perintah" dan bukannya dengan mengklik butang. Antara muka "command shell" ini masih mempunyai kelebihan besar untuk pengaturcara sistem kerana ia mudah disediakan dan sangat fleksibel. Oleh itu, sesi terminal terus digunakan secara meluas dalam proses pembangunan. Sememangnya, jika anda telah didedahkan tentang antara muka "titik dan klik", anda akan melihatnya sebagai langkah ke belakang. Tetapi anda akan segera mendapati bahawa ia berfungsi dengan baik dan akan, dalam apa jua keadaan, menambah satu lagi blok binaan yang berguna kepada rangkaian kemahiran pembangunan anda yang semakin meningkat.

Seseorang boleh menulis buku tentang arahan terminal tetapi, buat masa ini, anda hanya perlu mengetahui beberapa fakta asas. Mula-mula, anda akan mendapati ia tidak boleh menggunakan tetikus untuk mengedit arahan terminal. Jika anda melihat ralat di tengah-tengah arahan, anda mesti menggunakan kekunci "Backspace" untuk mengalih keluar kandungan berikutnya dan menaipnya semula. Tetapi ketidakselesaan ini diimbangi oleh fakta bahawa sesi terminal Powershell lalai yang digunakan dalam VSCode menyimpan sejarah arahan yang anda gunakan dan membolehkan anda merujuk arahan sebelumnya dengan menekan kekunci anak panah atas berulang kali sehingga yang anda mahu muncul. Kekunci anak panah ke bawah membalikkan proses.

2.4 Memasang Node.js dan npm

Anda mungkin sudah berasa sedikit letih, tetapi tetap dengannya. Anda hampir berada pada tahap di mana anda boleh mula menggunakan SvelteKit.

"Masalahnya" ialah SvelteKit diedarkan melalui Internet sebagai "pakej". Pemasangan pakej SvelteKit memerlukan "pengurus pakej". Apakah pakej dan apakah pengurus pakej?

"Pakej" ialah koleksi fail kod yang digabungkan dengan kemas yang dicop dengan nombor versi dengan teliti dan disertakan dengan butiran pergantungannya pada pakej lain. Amalan pembangunan perisian moden menggunakan hierarki pakej untuk berkongsi komponen kod yang berguna.

"pengurus pakej" ialah alat yang membolehkan anda "memasang" pakej ke dalam projek dengan membongkar kandungan kodnya dan menyalinnya ke dalam folder projek. Pengurus pakej menyemak keserasian dengan mana-mana pakej lain yang mungkin telah dipasang.

Pengurus pakej yang anda akan gunakan di sini dipanggil npm (Pengurus Pakej Node). Pengurusan pakej adalah menuntut, jadi pengurus alternatif tersedia untuk memenuhi situasi pakar. Tetapi pengurus pakej npm adalah pilihan standard dan disyorkan di sini. Anda akan menggunakan npm berulang kali semasa pembangunan projek kerana anda mendapati keperluan untuk memasukkan komponen tambahan.

Melompat ke hadapan sedikit, setelah pengurus pakej npm dan persekitaran masa jalannya telah dipasang, anda boleh menggunakannya untuk memasang pakej "pakej saya" ke dalam projek anda. Anda melakukan ini dengan melancarkan arahan seperti npm create my-package dalam sesi terminal VSCode. Ini memuat turun fail perpustakaan "pakej saya" ke dalam folder modul nod projek anda.

Tetapi terdapat halangan - npm memerlukan "persekitaran masa jalan Node.js". Jadi, ini juga mesti dipasang.

Berita baiknya ialah, untuk pengguna Windows sekurang-kurangnya, Node.js dipasang dengan memuat turun dan membuka fail msi (Pemasangan Microsoft) standard. Lebih baik lagi, prosedur pemasangan yang dilancarkan itu membolehkan anda memasang npm juga.

Namun, menjalankan prosedur ini agak mencabar bagi seorang pemula. Susunan muat turun asas didokumenkan di https://nodejs.org/en di Run JavaScript Everywhere tetapi ini sangat ringan pada arahan pengendalian. Anda mungkin mendapati ia berguna untuk menyemak arahan yang lebih terperinci di Cara Memasang Node.js dan NPM pada Windows. Luangkan masa anda dengan ini. Jika berlaku kesilapan, anda hanya perlu menyahpasang Node.js dan mulakan semula. Nasihat terbaik yang boleh saya berikan kepada anda ialah menggunakan tetapan lalai standard yang ditawarkan oleh prosedur - penggantian adalah untuk pakar sahaja.

2.5 Memasang SvelteKit

Akhirnya, anda berada dalam kedudukan untuk membuat sedikit kemajuan! Apabila anda melengkapkan peringkat ini, anda akan diberi ganjaran melalui halaman demo SvelteKit yang berjalan dalam penyemak imbas anda.

1. Buka sesi terminal dalam VSCode untuk projek anda, seperti sebelum ini, dan jalankan arahan npx berikut:

npx sv create 

*Sebagai tambahan, npx ialah alat "pelari pakej" yang dibenamkan dalam npm - ia dipasang secara automatik dengan npm

Sehingga November 2024, ini melancarkan dialog SvelteKit untuk membantu anda melalui prosedur untuk mengkonfigurasi projek anda dengan Svelte 5.

Selain itu, yakinlah bahawa jika berlaku masalah dengan prosedur ini dan anda ingin memulakan semula, anda hanya perlu memadamkan keseluruhan kandungan folder projek anda dan cuba lagi. Ambil perhatian juga bahawa pemasangan npm sering memaparkan senarai mesej amaran yang membimbangkan semasa mereka menyemak kemungkinan ketidakserasian dalam fail yang mereka bina ke dalam projek anda. Sangat tidak mungkin perkara ini berkaitan dengan anda sebagai pemula jadi saya cadangkan anda abaikan sahaja.

Soalan pertama Svelte ialah "Di mana kami harus membuat projek anda?". Memandangkan sesi terminal anda sudah dibuka dalam folder projek anda, anda hanya boleh menekan kekunci kembali di sini.

Sekarang Svelte ingin tahu gaya projek yang harus dibuatnya. Saya ingin anda memilih "minimum" di sini. Prosedur untuk melakukan ini dalam sesi terminal agak janggal kerana anda tidak boleh menggunakan tetikus untuk menogol kotak semak seperti yang anda lakukan pada halaman web. Anda menunjukkan keutamaan anda di sini dengan menggunakan kekunci anak panah ke bawah untuk meletakkan diri anda pada baris "minimum" dan kemudian menekan kekunci kembali

Kini Svelte ingin tahu sama ada anda mahu menggunakan ciri semak TypeScript. Sambungan Javascript lanjutan ini akan menjadi penting kepada anda apabila anda mengusahakan aplikasi web gred pengeluaran yang kompleks (ia mengawal penggunaan jenis pembolehubah anda dalam Javascript dan memastikan konsistensi). Tetapi anda tidak memerlukan ini di sini dan keluk pembelajaran anda sudah menjadi eksponen, jadi saya cadangkan anda memilih "Tidak" dengan menekan anak panah ke bawah dua kali dan kemudian menekan kekunci kembali.

Kemudian, Svelte tertanya-tanya jika anda ingin memasukkan "pilihan tambahan". Alat semakan sintaks ESLint yang ditunjukkan di bahagian atas senarai yang dibentangkan boleh membantu. Ini kadangkala boleh menjadi gangguan "bising", memberi amaran kepada anda tentang isu yang anda tidak berminat. Tetapi, secara seimbang, saya cadangkan anda menerimanya di sini dengan menekan bar ruang dan kekunci kembali.

Akhir sekali, Svelte bertanya pengurus pakej yang anda mahu gunakan. Pilih npm

Anda mungkin boleh mengabaikan sebarang pilihan lain yang mungkin dikemukakan.

Svelte kini bersedia untuk membina projek anda. Anda memberikannya kebenaran, apabila diminta, dengan memasukkan arahan berikut ke dalam sesi terminal anda:

npx sv create 

Paparan ingin tahu yang kini anda lihat dimainkan pada skrin anda mungkin merupakan pandangan pertama anda untuk npm memuat turun fail pakej ke dalam projek. Anda mungkin mendapati ia memberi pengajaran untuk ambil perhatian bahawa folder svelte-dev dalam tetingkap ruang kerja anda telah tiba-tiba berkembang dengan paparan kandungan sub-folder yang mengagumkan. Ini ialah kod yang mewakili projek SvelteKit "minimum" anda.

Tidak selalunya perisian pakej berakhir dalam projek anda. Apabila anda memasang alat yang mungkin berguna dikongsi dengan projek lain, anda boleh meminta alat itu dipasang "secara global". Anda melakukan ini dengan menambahkan "-g" "medan bendera" pada arahan npm anda. Anda akan melihat medan bendera digunakan secara meluas dalam arahan terminal. Buat masa ini, walaupun, biarkan perisian pemasang anda untuk memberi anda panduan tentang penggunaannya. Minta chatGPT untuk memberi anda tutorial tentang perkara ini sekali-sekala.

Pemasang Svelte kini meminta anda menjalankan npm run dev -- --open. Cubalah:

npm install

Ini melancarkan pelayan tempatan SvelteKit dan menjalankan projek anda di dalamnya. Pelayan tempatan mempunyai tugas mencipta halaman "host tempatan" pada port 5173 dalam penyemak imbas anda. Jika ayat ini tidak masuk akal kepada anda, anda kini akan lihat apa maksudnya kerana bit "-- --open" bagi arahan npm secara automatik menyerahkan kawalan kepada penyemak imbas anda dan memberi anda demonstrasi. Skrin anda sepatutnya kelihatan seperti gambar di bawah:

Ini ialah apl web yang dikodkan dengan jenis HTML yang sama seperti yang anda lihat dalam Post 1.1. Perbezaannya ialah kandungannya sedang dipantau oleh rangka kerja SVelteKit. Kod itu sedang diletakkan dalam projek VSCode svelte-dev baharu anda. Mari cari bit yang memaparkan sepanduk "Selamat Datang ke SvelteKit" pada skrin penyemak imbas anda, ubahnya dan lihat apa yang berlaku.

Kembali dalam VSCode, dengan projek anda kelihatan dalam "ruang kerja", gunakan hierarki folder/failnya untuk menavigasi kandungannya sama seperti yang anda lakukan dalam Windows Explorer. Anda akan mendapati bahawa projek itu telah memperoleh koleksi kod yang agak mengagumkan! Sebagai contoh, kini terdapat folder node_modules yang penuh dengan fail kecil. Di sinilah semua fail yang dimuat turun semasa kerja pemasangan npm anda pergi. Sekarang cari fail page.svelte yang anda akan dapati dalam folder src/routes dan klik padanya. (Kepentingan nama dan lokasinya dalam folder src akan dijelaskan dalam siaran akan datang - katakan buat masa ini bahawa nama "page.svelte" agak penting). Anda kini akan melihat kandungan src/routes/ page.svelte dipaparkan dalam tetingkap edit VSCode pada RHS skrin.

Selamat Datang ke SvelteKit

baris di sini sepatutnya kelihatan biasa - ya ini adalah sedikit HTML yang memaparkan tajuk. Sekarang tukar baris untuk membaca

Hello

Simpan fail (menggunakan pintasan ctrl S biasa) dan lihat penyemak imbas anda sekali lagi. Wah, mesej "Selamat Datang ke SvelteKit" telah digantikan dengan mesej "Hello there" anda.

Oleh kerana pelayan SvelteKit yang anda mulakan dengan npm run dev telah memantau folder projek anda, setiap kali anda menukar fail, pelayan secara automatik menghantar perubahan kepada aplikasi aktif dalam penyemak imbas.

Ini akan menjadikan pembangunan sangat menyeronokkan!

3. Rumusan

Sekiranya anda telah bertahan dengan siaran ini, berikan diri anda bintang emas. Anda telah berjaya menjalankan apl web SvelteKit dalam mod pembangunan dan, sama pentingnya, telah mencipta "perancah" VSCode, npm dan Node.js yang akan membolehkan setiap projek SvelteKit pada masa hadapan bermula.

Siaran seterusnya dalam siri ini akan menunjukkan kepada anda cara menggunakan Javascript dan "bahasa" Svelte untuk menambah kecerdasan pada apl web anda.

Postscript 1: Apabila berlaku masalah

Tidak sukar untuk menjadi kucar-kacir dengan perkara ini - pembangun yang paling berpengalaman kadangkala akan tersalah taip nama teg HTML dan membanjiri skrin mereka dengan mesej ralat yang menakutkan. Perbezaannya ialah mereka telah melihat semuanya sebelum ini dan tidak tahu untuk panik! Sebagai seorang pemula, apabila anda melihat perkara seperti ini, anda mungkin akan fikir anda telah merosakkan komputer anda sepenuhnya dan kini mesti membeli yang baharu. bertenang. Anda boleh mengisih ini.

Ralat akan ditunjukkan dalam pelbagai cara. Ralat sintaks dalam fail .js (javascript) yang dibuka dalam VSCode akan dibenderakan dalam tetingkap edit. Dalam contoh di bawah, saya sengaja melumpuhkan kod HTML untuk mesej pengepala dalam projek "minimum" dengan menjatuhkan penutup > daripada

tag.

Perhatikan bahawa:

• Fail ralat dan folder induknya semuanya telah diserlahkan dengan warna merah dalam hierarki folder. Ini bermakna kod itu rosak dan akan membuang mesej ralat jika anda menjalankannya. Cuba ini - anda akan mendapati halaman localhost untuk apl web anda akan memaparkan "500 Ralat Dalaman" apabila anda memuat semulanya. Kembali dalam tetingkap terminal VSCode anda, banyak butiran ralat juga akan dijana oleh pelayan SvelteKit apabila anda menyimpan fail yang ralat.
• Kedudukan "ralat" telah digariskan dalam tetingkap edit. Apabila anda mengarahkan tetikus ke atas ini, anda akan mendapat petua alat yang memberikan anda butiran ralat
• "kiraan" daripada jumlah ralat dan amaran dalam projek svelte-dev anda dipaparkan dalam bar "status" biru di bahagian bawah halaman VSCode.

Ini ialah contoh sempurna mengapa anda perlu kekal tenang. Di sebalik semua kekacauan ini terdapat kesilapan yang sangat remeh

Pertama-tama, anda akan melihat bahawa ini tidak semuanya bertambah. Sistem salah menyerlahkan penutup

tag sebagai punca ralat. Masalah sebenar terletak pada bukaan yang rosak

tag. Sebaik sahaja anda melihat ini beberapa kali, anda secara automatik akan berfikir "Oh, ada sesuatu yang tidak kena dengan corak teg". Belajar lepas tangan. Sekurang-kurangnya sistem mengenal pasti talian yang betul.

Amalan umum saya ialah, apabila berlaku masalah dengan kod saya, saya mulakan dengan mula menyelesaikan masalah yang diserlahkan oleh editor. Tetapi ada akan masa apabila VSCode sangat gembira tetapi penyemak imbas anda memaparkan ralat. Pada masa inilah anda mesti melihat mesej ralat yang dipaparkan dalam sesi terminal anda. Kesilapan ini akan menjadi lebih serius dan nasihat saya ialah tarik nafas panjang, baca mesej dengan teliti dan cuba fikirkan apa yang cuba disampaikan kepada anda. Jika anda masih buntu, tampalkan mesej ralat ke dalam chatGPT dan minta nasihat. Carian Google yang memetik Stackoverflow juga merupakan sumber yang baik.

Jika anda masih buntu, berehat, berjalan-jalan dan menghirup udara segar. Itu boleh membuat perbezaan yang besar. Perkara yang menarik tentang pengkomputeran ialah, apabila berlaku masalah, sentiasa ada sebab. Lebih baik lagi, apabila anda menemui sebab itu dan membetulkannya, ia kekal tetap. Pertimbangkan diri anda bertuah - anda mungkin cuba menyelesaikan masalah yang melibatkan orang, yang sebaliknya berlaku! Berani, mon berani. Anda akan menemui masalah pengekodan itu dan menyelesaikannya, sudah pasti.

Postskrip 2: Bekerja dengan VSCode

Panel Edit VSCode mungkin berasa sedikit terhad apabila VSCode turut memaparkan panel Explorer. Anda mungkin ingin tahu bahawa anda boleh menogol panel Penjelajah dimatikan dan dihidupkan dengan mengklik ikon Penjelajah di bahagian atas sebelah kiri lajur bar alat.

Begitu juga, ingat bahawa apabila panel Edit ditindih oleh sesi terminal, anda boleh mematikan ini dengan cepat menggunakan pintasan "ctrl '".

Akhir sekali, anda akan mendapati ia berguna untuk mengetahui bahawa berbilang tetingkap terminal boleh aktif secara serentak. Dalam kes ini, bar menu tetingkap terminal memaparkan senarai terminal aktif dan membolehkan anda menukar antaranya dengan mengklik pada entri senarai. Ikon "tong sampah" di sini juga membolehkan anda mematikan tetingkap, walaupun ini mungkin hanya kelihatan jika anda telah menjadikan tetingkap terminal cukup besar- ruang sentiasa pada premium dalam VSCode.

Atas ialah kandungan terperinci NgSysV.Memasang Sveltekit dan mencipta aplikasi web semua HTML yang mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!