安裝

了解如何在您的本機環境中安裝 Toolpad Core。

手動安裝

使用您偏好的套件管理器在您的專案中安裝 @toolpad/core

npm install @toolpad/core

Toolpad Core 套件相依於 @mui/material 和 @mui/icons-material。如果您尚未在專案中使用這些套件，您可以使用以下方式安裝它們

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

自動安裝

1. 執行以下命令以啟動 Toolpad Core

npx create-toolpad-app@latest

2. 系統將會詢問您偏好的框架 (Next.js/Vite)、路由器和身份驗證提供者。安裝完成後，執行

cd <project-name>
npm run dev

3. 在瀏覽器中訪問 http://localhost:3000/ 以開啟應用程式。

4. 使用 Next.js App router 的範例目錄結構如下

   無需身份驗證

   ├── app
   │   ├── (dashboard)
   │   │   ├── layout.tsx
   │   │   ├── page.tsx
   │   │   └── orders
   │   │       └── page.tsx
   │   └── layout.tsx
   ├── .env
   ├── .env.local
   ├── .eslintrc.json
   ├── .gitignore
   ├── next.config.js
   ├── package.json
   ├── README.md
   └── tsconfig.json
   

   複製已複製(或 $keyC)

   需要身份驗證

   ├── app
   │   ├── auth
   │   │   └── signin
   │   │       └── page.tsx
   │   ├── api
   │   │   └── auth
   │   │       └── [...nextauth]
   │   │           └── route.ts
   │   ├── (dashboard)
   │   │   ├── layout.tsx
   │   │   ├── page.tsx
   │   │   └── orders
   │   │       └── page.tsx
   │   └── layout.tsx
   ├── .env
   ├── .env.local
   ├── .eslintrc.json
   ├── .gitignore
   ├── next.config.js
   ├── package.json
   ├── README.md
   └── tsconfig.json
   

   複製已複製(或 $keyC)

5. 安裝完成！透過編輯 (dashboard)/page.tsx 開始建構您的專案。若要了解如何運用 Toolpad Core 快速建構儀表板，請參閱詳細教學。

6. 如果您選擇了身份驗證，您需要為已建立的 .env 檔案提供值。請參閱 與身份驗證函式庫搭配使用章節 以取得更多資訊。