Svelte 入門指南 - 簡短教程

如何開始使用 Svelte 自從我開始使用 Hugo 作為靜態網站生成器創建網站以來,我喜歡這種在網絡上發布的方式,相對於使用動態生成頁面的 CMS,這是我過去習慣的方式。 Svelte 是一個 JavaScript 框架,它給我一種相同的感覺。與 React、Vue、Angular 和其他框架相比,使用 Svelte 構建的應用是事先編譯的,您的網站訪問者不需要網絡中的框架和庫代碼,結果是體驗更順暢,消耗帶寬更少,一切都感覺更快和更輕量級。 就像 Hugo 一樣,在部署時,Svelte 消失了,你只得到純 JavaScript。 但讓我們跳轉到文章的主要內容。如何開始使用 Svelte。 需要安裝 Node.js。如果你還沒有安裝,請參考我的如何安裝 Node.js文章! 並確保它是最新版本的(如何更新 Node.js)。 Node 安裝了npx命令,這是一種運行 Node 命令的便捷方式。特別是我們將運行以下命令: npx degit sveltejs/template firstapp 這將下載並運行degit 命令,它接下來會下載位於https://github.com/sveltejs/template的 Svelte 項目模板的最新代碼到firstapp文件夾中。 現在進入 firstapp 文件夾,運行 npm install 下載模板的其他依賴項。在撰寫本文時,這些依賴項如下: "npm-run-all" "rollup" "rollup-plugin-commonjs" "rollup-plugin-livereload" "rollup-plugin-node-resolve" "rollup-plugin-svelte" "rollup-plugin-terser" "svelte" 如您所見,其中包括 Svelte 核心,還有 Rollup(一個替代 Webpack 的工具)及其一些插件。此外還有 npm-run-all,它是一個用於並行或串行運行多個 npm 腳本的 CLI 工具。 現在,我們可以運行開發模式下的 Svelte 網站,運行以下命令: npm run dev 這將在默認情況下在 localhost 的 5000 端口啟動應用程序:...

介紹 Electron

了解 Electron,這是由 GitHub 開發的跨平台框架,用於建立創新且非常受歡迎的跨平台應用程式。 Electron 是一個使用 JS、HTML 和 CSS 來建立跨平台桌面應用程式的免費開源工具,由 GitHub 開發。 許多非常受歡迎且成功的應用程式都使用了 Electron,包括 VS Code、Slack、Discord 等等。 Electron 是一個宏大的專案,它革命性地改變了原生桌面應用程式的開發方式,使之成為可能以 JavaScript 為基礎的過程。 需要注意的是:在 Electron 出現之前,已經有其他工具可以用 JavaScript 來開發桌面應用程式,但 Electron 讓這種開發方式更加普及。 尤其是 Electron 可以用於建立跨平台的桌面應用程式。在此之前,沒有任何工具可以讓你在不同平台上運行相同的應用程式。 直到 2014 年,Electron 首次發布。 快速了解 Electron 的內部結構 Electron 基本上是將 Chromium 渲染庫和 Node.js 打包在一起(Chromium 是由 Google 開源的專案,用於構建 Chrome 瀏覽器)。 你既可以使用由 Chromium 提供的畫布,運行 V8 JavaScript 引擎,也可以使用任何 Node.js 套件並運行自己的 Node.js 代碼。 你可以把它想象成桌面版的 Node.js。它本身不提供任何 GUI 元素,而是讓你使用 HTML、CSS 和 JavaScript 來創建使用者界面。 Electron 旨在提供核心功能,同時保持速度快、體積小、精簡。這些核心功能可以滿足所有應用程式的需求。 你可以使用 Electron 創建哪些類型的應用程式 你可以創建各種不同類型的應用程式,包括:...

使用 Vite 創建新的 React 應用程式

當我需要創建React應用程式並需要後端時,我會首選使用 Next.js 框架。 Next.js 提供了許多內建功能,它非常受歡迎,遵循的約定也避免了我在分析和決策方面的困惑。 但有時我只想創建一個單純的 React 應用程式,也許是為了進行演示或開始一個專案,而不需要 Next.js 提供的所有內容。 我不想擔心這些,我只想自由地進行 React 實驗。 我過去使用過 create-react-app,但現在我使用 Vite。 Vite 是一個現代化的工具,提供了開發伺服器,速度非常快,許多 JavaScript 社群的人認為它是最佳選擇。 此外,它並不是一個特定於 React 的工具,因此你學到的任何東西都可以應用到其他支援的框架,例如Svelte、Vue等。 要使用 Vite 創建一個項目,首先進入你存放所有專案的文件夾,例如我個人的案例中是在用戶的主文件夾中的 dev 文件夾下。 然後運行 npm create [[email protected]](/cdn-cgi/l/email-protection)。 為項目選擇一個名稱,該名稱也將是項目的文件夾名稱。在這個案例中,我選擇 “test”: 現在可以選擇一個框架,選擇 “React”。 然後選擇 JavaScript 或 TypeScript,依照個人喜好選擇。你也可以選擇使用 SWC。 完成! 現在進入新建立的專案資料夾: cd test 運行以下指令安裝相依套件: npm install 然後運行以下指令開始應用程式: npm run dev 應用程式應該會在 http://localhost:5173 運行(如果該埠口已被使用,則可能會不同)。 現在你已經準備好在此應用程式上工作了! 以下是在 VS Code 中打開的應用程式資料夾。 你可以看到,Vite 已經創建了一個基本的應用程式,現在你可以打開 src/App.jsx 開始在其中進行開發工作。 這樣的工具之美在於,現在你可以新增文件,Vite 會自動識別它們,而無需像我們以前需要在 Node.js 專案中那樣重啟 npm run dev。...