贡献
关于贡献 Nuxt UI 的综合指南,包括项目结构、开发流程和最佳实践。
Nuxt UI 得益于其出色的社区,蓬勃发展 ❤️。我们欢迎所有贡献,包括错误报告、拉取请求和反馈,以帮助使这个库变得更好。
项目结构
以下是 Nuxt UI 项目结构中关键目录和文件的概述
文档
文档位于 docs
文件夹中,作为一个 Nuxt 应用,使用 @nuxt/content
从 Markdown 文件生成页面。有关其工作原理的详细信息,请参阅Nuxt Content 文档。以下是其结构的细分
├── app/
│ ├── assets/
│ ├── components/
│ │ └── content/
│ │ └── examples # Components used in documentation as examples
│ ├── composables/
│ └── ...
├── content/
│ ├── 1.getting-started
│ ├── 2.composables
│ └── 3.components # Components documentation
模块
模块代码位于 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
│ └── ...
└── module.ts
CLI
为了简化开发,我们创建了一个 CLI,您可以使用它来生成组件和 locale。您可以使用 nuxt-ui make
命令访问它。
首先,您需要将 CLI 链接到您的全局环境
npm link
组件
您可以使用以下命令创建新组件
nuxt-ui make component <name> [options]
可用选项
--primitive
创建一个基本组件--prose
创建一个 prose 组件--content
创建一个 content 组件--template
仅生成特定模板(可用模板:playground
、docs
、test
、theme
、component
)
示例
# Create a basic component
nuxt-ui make component my-component
# Create a prose component
nuxt-ui make component heading --prose
# Create a content component
nuxt-ui make component block --content
# Generate only documentation template
nuxt-ui make component my-component --template=docs
在创建新组件时,CLI 会自动生成所有必要的文件,例如组件本身、主题、测试和文档。
Locales
您可以使用以下命令创建新的 locale
nuxt-ui make locale --code <code> --name <name>
提交拉取请求 (PR)
开始之前,请检查是否已有描述您正在处理的问题或功能请求的 issue。如果有,请在该 issue 上发表评论,告知我们您正在处理它。
如果没有,请创建一个新的 issue 来讨论问题或功能。
本地开发
要开始本地开发,请按照以下步骤操作
将 nuxt/ui
仓库克隆到您的本地机器
git clone -b v4 https://github.com/nuxt/ui.git
启用 Corepack
corepack enable
安装依赖项
pnpm install
生成类型存根
pnpm run dev:prepare
开始开发
- 要处理位于
docs
文件夹中的文档,请运行
pnpm run docs
- 要使用 playground 测试 Nuxt 组件,请运行
pnpm run dev
- 要使用 playground 测试 Vue 组件,请运行
pnpm run dev:vue
IDE 设置
我们建议使用 VSCode 和ESLint 扩展。您可以启用保存代码时自动修复和格式化。方法如下
{
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
}
}
由于 ESLint 已配置为格式化代码,因此无需与 Prettier 重复功能。如果您已在其编辑器中安装了它,我们建议禁用它以避免冲突。
Linting
您可以使用 lint
命令检查 linting 错误
pnpm run lint # check for linting errors
pnpm run lint:fix # fix linting errors
类型检查
我们使用 TypeScript 进行类型检查。您可以使用 typecheck
命令检查类型错误
pnpm run typecheck
测试
在提交 PR 之前,请确保您运行 nuxt
和 vue
的测试
pnpm run test # for Nuxt
pnpm run test:vue # for Vue
如果您需要更新快照,请在测试运行完成后按
u
。提交约定
我们使用Conventional Commits作为提交消息,这允许根据提交自动生成更改日志。请阅读指南,如果您还不熟悉的话。
- 使用
fix
和feat
进行影响功能或逻辑的代码更改 - 使用
docs
进行文档更改,使用chore
进行维护任务
创建拉取请求
- 在创建 PR 时,请遵循说明提供的
- 确保您的 PR 标题符合Conventional Commits,因为它将在代码合并后使用。
- 多个提交是可以的;无需 rebase 或 force push。合并时我们将使用
Squash and Merge
。 - 在提交 PR 之前,请确保
lint
、typecheck
和tests
正常工作。避免进行不相关的更改。
我们将及时进行审查。如果分配给维护者,他们将仔细审查。忽略红色文本;它仅用于跟踪目的。
谢谢
再次感谢您对这个项目的兴趣!您真是太棒了!❤️