Contribución

Nuxt UI prospera gracias a su increíble comunidad ❤️ Damos la bienvenida a todas las contribuciones a través de informes de errores, solicitudes de extracción y comentarios para ayudar a mejorar esta biblioteca.

AI Asistencia

Proporcionamos pautas de contribución a través de AGENTS.md para que los asistentes de IA lo ayuden a contribuir a Nuxt UI. Todos los agentes y guías de codificación de IA lo recogen automáticamente a través de la estructura de componentes, patrones de tematización, convenciones de prueba y pautas de documentación.

Estructura del proyecto

Aquí hay una descripción general de los directorios y archivos clave en la estructura del proyecto de interfaz de usuario de Nuxt:

Documentación

La documentación se encuentra en la carpeta docs como una aplicación Nuxt que utiliza @nuxt/content para generar páginas a partir de archivos Markdown. Consulte la documentación de contenido de [Nuxt para obtener detalles sobre cómo funciona.

├── 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...)

@@40000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

El código del módulo reside en la carpeta src. Aquí hay un desglose de su estructura:

├── 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

@@pH067@cli

Para facilitar el desarrollo, hemos creado una CLI que se puede utilizar para generar componentes y locales. Puede acceder a ella utilizando el comando pnpm cli make.

@@pH069@@Componentes

Puede crear nuevos componentes usando el siguiente comando:

pnpm cli make component <name> [options]

Opciones disponibles:

• --primitive Crear un componente primitivo
• --prose Crear un componente de prosa
• --content Crear un componente de contenido
• --template Sólo generar plantillas específicas (plantillas disponibles: playground,docs,test,theme,component)

Ejemplo:

# 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

@099@@Localidad

Puede crear nuevas ubicaciones usando el siguiente comando:

pnpm cli make locale --code <code>

El nombre de la localidad y la dirección se rellenan desde CLDR y el código se valida contra él.

Una vez que haya traducido los mensajes, puede comprobar que su configuración regional se mantiene coherente con las demás (teclas de mensaje, marcadores de posición, nombre y dirección) ejecutando:

pnpm test locale --run

Enviar una solicitud de extracción (PR)

Antes de empezar, compruebe si hay un problema existente que describa el problema o la solicitud de función en la que está trabajando. Si lo hay, deje un comentario sobre el problema para hacernos saber que está trabajando en él.

Si no lo hay, abra un nuevo número para discutir el problema o la característica.

Desarrollo Local

Para comenzar el desarrollo local, siga estos pasos:

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

Configuraciones

Recomendamos usar VSCode junto con la extensión ESLint . Puede habilitar la corrección automática y el formato al guardar el código.

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

@175@Linting

Puede utilizar el comando lint para comprobar si hay errores de linting:

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

Tipo de verificación

Podemos utilizar TypeScript para la comprobación de tipos. Puede utilizar el comando typecheck para comprobar si hay errores de tipo:

pnpm run typecheck

@@ph186@Prueba de seguridad

Antes de enviar un PR, asegúrese de ejecutar las pruebas:

pnpm run test

Commit convenios

Usamos Conventional Commits para los mensajes de confirmación, lo que permite que un registro de cambios se genere automáticamente en función de los commits.Por favor, lea la guía a través de si aún no está familiarizado con ella.

• Use fix y feat para cambios de código que afectan la funcionalidad o la lógica
• Use docs para cambios en la documentación y chore para tareas de mantenimiento

Haciendo una solicitud de extracción

• Siga las instructions proporcionadas al crear un PR
• Asegúrese de que el título de su PR se adhiera a los Conventional Commits ya que se utilizará una vez que se fusione el código.
• Múltiples commits están bien; no hay necesidad de rebasar o forzar push.Usaremos Squash and Merge cuando fusionemos.
• Asegúrese de que lint,typecheck y tests trabajen antes de enviar la RP.

Lo revisaremos puntualmente. Si se asigna a un mantenedor, lo revisarán cuidadosamente. Ignore el texto rojo; es para fines de seguimiento.

@223@gracias

Gracias de nuevo por tu interés en este proyecto, eres genial!️