기여도

Nuxt UI는 놀라운 커뮤니티 덕분에 번성합니다.️ 버그 보고서, pull requests, feedback을 통해 모든 기여를 환영하며, 이 라이브러리를 더욱 개선하는 데 도움이 됩니다.

AI 도움말

Xph014xAGENTS.md](https://github.com/nuxt/ui/blob/v4/AGENTS.md)를 통해 AI 도우미가 Nuxt UI에 기여하는 데 도움이 되는 기여 지침을 제공합니다. 이 지침은 구성 요소 구조, 테마 패턴, 테스트 규칙 및 문서 지침을 통해 모든 AI 코딩 에이전트와 가이드에 의해 자동으로 선택됩니다.

프로젝트 구조

다음은 Nuxt UI 프로젝트 구조의 키 디렉토리 및 파일에 대한 개요입니다.

문서

이 문서는 docs 폴더에 있는 Nuxt 응용 프로그램으로 @nuxt/content를 사용하여 Markdown 파일에서 페이지를 생성합니다. 작동 방식에 대한 자세한 내용은 Nuxt Content documentation 를 참조하십시오. 구조에 대한 요약은 다음과 같습니다.

├── app/
│   ├── assets/
│   ├── components/
│   │   └── content/
│   │       └── examples   # Components used in documentation as examples
│   ├── composables/
│   └── ...
├── content/
│   ├── blog/
│   ├── docs/
│   │   ├── 1.getting-started
│   │   ├── 2.components   # Components documentation
│   │   ├── 3.composables
│   │   └── 4.typography
│   └── ...            # Landing pages (index.yml, showcase.yml...)

Module 모듈

모듈 코드는 src 폴더에 있습니다. 다음은 해당 구조에 대한 분석입니다.

├── plugins/
├── runtime/
│   ├── components/        # Where all the components are located
│   │   ├── Accordion.vue
│   │   ├── Alert.vue
│   │   └── ...
│   ├── composables/
│   ├── locale/
│   ├── plugins/
│   ├── types/
│   ├── utils/
│   └── vue/
│       ├── components/
│       └── plugins/
├── theme/                 # This where the theme for each component is located
│   ├── accordion.ts       # Theme for Accordion component
│   ├── alert.ts
│   └── ...
├── utils/
└── module.ts

CLI

쉽게 개발하기 위해 구성 요소와 로케일을 생성하는 데 사용할 수 있는 CLI를 만들었습니다. pnpm cli make 명령을 사용하여 액세스할 수 있습니다.

구성 요소

다음 명령을 사용하여 새 구성요소를 생성할 수 있습니다.

pnpm cli make component <name> [options]

사용 가능한 옵션:

• --primitive 기본체 구성요소 작성
• --prose 산문 구성 요소 만들기
• --content 컨텐츠 구성 요소 만들기
• --template 특정 템플릿만 생성 (사용 가능한 템플릿: playground, docs, test, theme, component)

예를 들면 다음과 같습니다.

# Create a basic component
pnpm cli make component my-component

# Create a prose component
pnpm cli make component heading --prose

# Create a content component
pnpm cli make component block --content

# Generate only documentation template
pnpm cli make component my-component --template=docs

Locales 로캘

다음 명령을 사용하여 새 로켈을 만들 수 있습니다.

pnpm cli make locale --code <code>

로케일 이름 및 방향은 CLDR에서 채워지며 코드는 이와 비교하여 검증됩니다. --name 및 --dir 플래그로 재정의할 수 있습니다.

메시지를 번역한 후에는 다음을 실행하여 로케일이 다른 것들과 일치하는지 확인할 수 있습니다(메시지 키, 자리 표시자, 이름 및 방향).

pnpm test locale --run

Pull Request (PR) 제출

시작하기 전에 현재 진행 중인 문제나 기능 요청을 설명하는 기존 문제가 있는지 확인하십시오. 문제가 있으면 문제에 대한 의견을 남겨 주시고 문제에 대해 작업 중이라는 것을 알려 주십시오.

문제가 없는 경우 새 문제를 열어 문제 또는 기능에 대해 논의합니다.

로컬 개발

로컬 개발을 시작하려면 다음 단계를 수행하십시오.

git clone -b v4 https://github.com/nuxt/ui.git

corepack enable

pnpm install

pnpm run dev:prepare

pnpm run docs

pnpm run dev

pnpm run dev:vue

IDE 설정

VSCode를 ESLint extension와 함께 사용하는 것이 좋습니다. 코드를 저장할 때 자동 수정 및 서식 지정을 활성화할 수 있습니다. 다음 방법은 다음과 같습니다.

{
  "editor.codeActionsOnSave": {
    "source.fixAll": "never",
    "source.fixAll.eslint": "explicit"
  },
  "prettier.enable": false
}

Linting 연결

lint 명령을 사용하여 linting 오류를 확인할 수 있습니다.

pnpm run lint # check for linting errors
pnpm run lint:fix # fix linting errors

Type 검사

TypeScript를 사용하여 유형 검사를 수행합니다. typecheck 명령을 사용하여 유형 오류를 확인할 수 있습니다.

pnpm run typecheck

테스트 중

PR을 제출하기 전에, 테스트를 실행해야 합니다.

pnpm run test

커밋 규칙

커밋 메시지에 Conventional Commits를 사용하여 변경 로그를 커밋에 따라 자동으로 생성할 수 있습니다. guidu를 잘 모르시면 읽어 주십시오.

• xfix 및 feat를 사용하여 기능이나 논리에 영향을 미치는 코드 변경 사항
• 문서 변경에는 docs, 유지 관리 작업에는 chore 사용

Pull Request 요청 작성

• PR을 생성할 때 제공되는 Instructions를 따라 따릅니다.
• PR의 제목이 Conventional Commiss를 준수하는지 확인하십시오. 코드가 병합되면 사용됩니다.
• 여러 커밋은 괜찮습니다; 재베이스 또는 강제 푸시가 필요하지 않습니다. 병합 시 Squash and Merge를 사용합니다.
• PR을 제출하기 전에 lint, typecheck 및 tests가 작동하는지 확인하십시오. 관련 없는 변경을 피하십시오.

즉시 검토할 것입니다. 관리자에게 할당되면 신중하게 검토할 것입니다. 빨간색 텍스트는 무시하십시오. 추적 목적으로 작성됩니다.

감사합니다.

이 프로젝트에 관심을 가져 주셔서 다시 한번 감사드립니다! 정말 대단하십니다!️