Purple Admin UI 开源项目教程

Purple Admin UI 开源项目教程

purple-admin-uiNext.js와 Tailwind를 이용한 모-던 어드민 템플릿项目地址:https://gitcode.com/gh_mirrors/pu/purple-admin-ui

1. 项目的目录结构及介绍

Purple Admin UI 项目的目录结构如下：

purple-admin-ui/
├─ auth/                  # 인증 관련 코드
│   ├─ hooks/             # react hooks
│   └─ ...
├─ pages/                 # 페이지
├─ styles/                # 기본 스타일
├─ types/                 # 타입 정의
├─ public/                # 이미지 등 정적 파일
├─ src/
│   ├─ client/            # 각 컴포넌트에서 직접 fetch를 호출하지 않고 client 디렉토리에 정의한 함수를 사용
│   ├─ components/
│   │   ├─ layout/        # 레이아웃 정의
│   │   ├─ page/          # 특정 페이지에서만 사용하는 컴포넌트 정의
│   │   └─ shared/        # 공통으로 사용하는 컴포넌트 정의
│   ├─ fonts/             # 웹 폰트 저장
│   ├─ lib/
│   │   ├─ auth/          # 인증 관련 코드 정의
│   │   └─ hooks/         # 커스텀 훅 정의
│   └─ ...
└─ ...

2. 项目的启动文件介绍

项目的启动文件主要包括 pages/_app.js 和 pages/index.js。

• pages/_app.js: 这是 Next.js 应用的入口文件，负责初始化页面组件和全局样式。
• pages/index.js: 这是应用的首页文件，负责渲染首页内容。

3. 项目的配置文件介绍

项目的配置文件主要包括 .env 和 next.config.js。

• .env: 环境变量配置文件，包含一些敏感信息和应用配置，如数据库连接字符串、API 密钥等。
• next.config.js: Next.js 应用的配置文件，可以配置 webpack、路由、服务器等。

示例 .env 文件内容：

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=랜덤생성기 발급
GITHUB_CLIENT_ID=GitHub OAuth Client ID
GITHUB_CLIENT_SECRET=GitHub OAuth Client Secret

示例 next.config.js 文件内容：

module.exports = {
  reactStrictMode: true,
  env: {
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
  },
};

以上是 Purple Admin UI 开源项目的目录结构、启动文件和配置文件的介绍。希望这些信息能帮助你更好地理解和使用该项目。

purple-admin-uiNext.js와 Tailwind를 이용한 모-던 어드민 템플릿项目地址:https://gitcode.com/gh_mirrors/pu/purple-admin-ui