開始使用 Qwik

Qwik 是一種 可恢復的新型框架 (無 JS 以及 無 hydration),專為邊緣而構建 , 為 React 開發人員所熟悉.

先決條件

使用 CLI 建立一個應用程式

第一步是建立一個應用程式。 Qwik自帶的CLI方便於我們建立一個應用程式架構。我們將使用CLI來建立一個全新的啟動程式,這樣您就可以快速熟悉它。

在你的 Shell 運行 Qwik CLI

npm create qwik@latest

CLI將引導您通過一個交互式選單來設定專案名稱並選擇其中一個啟動器:

當應用程式成功建立後,您將在終端機上看到如下輸出:

💫 Let's create a Qwik app 💫

✔ Project name … qwik-app
✔ Select a starter › Basic

🦄  Success!  Project created in portfolio directory

🐰 Next steps:
   cd qwik-app
   npm install
   npm start

💬 Integration? Add Netlify, Cloudflare, Tailwind...:
   npm run qwik add

💬 Questions? Start the conversation at:
   https://qwik.builder.io/chat
   https://twitter.com/QwikDev

📺 Presentations, Podcasts and Videos:
   https://qwik.builder.io/media/

此時,您將擁有目錄名稱為 qwik-app 的檔案了! 當然,該目錄中也具備了啟動程式。

在開發模式上運行Qwik

下載應用程式後.

  1. 將目錄切換到由 npm create qwik@latest 所建立的目錄。
cd qwik-app
  1. 安裝 NPM 模組:
npm install
  1. 啟動專案
npm start
  1. 接著,您應該會看到與您的待辦事項應用程式一起運行的伺服器

  VITE v3.1.1  ready in 140 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose

  1. 請訪問 http://localhost:5174/ ,開始探索 Qwik。

指令

下列是一些您可能會使用到的指令,完整清單請參考 package.json.

  • npm start: 別名為 npm run dev (目前默認運行 SSR)。
  • npm run preview: 生產建構和啟動預覽伺服器。
  • npm run build: 建構用於生產模式的應用程式。
  • npm run qwik add: 選擇需要添加的整合。
Made with ❤️ by