安装

了解如何在本地环境中安装 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 文件提供值。有关更多信息，请参阅 与身份验证库一起使用部分。