VueUse 贡献说明 [给VueUse库提交必读]

109 阅读3分钟

(VueUse使用群体越来越大,包括element-plus 都在使用)

警告: ⚠️ 减缓新功能的引入

随着 VueUse 用户群体的不断壮大,我们收到了大量的功能请求和拉取请求,维护项目变得越来越具有挑战性,已经超出了我们的能力范围。因此,在不久的将来,我们可能需要减缓新功能的接受速度,并优先考虑现有功能的稳定性和质量。请注意,目前可能不会接受 VueUse 的新功能。 如果您有新的想法,建议您先将其整合到自己的代码库中,进行迭代以满足您的需求,并评估其通用性。如果您坚信您的想法对社区有益,可以提交一个拉取请求并附上您的使用案例,我们将很乐意进行审查和讨论。感谢您的理解。

开发

设置

将此仓库克隆到您的本地机器并安装依赖项。

【注意安装的使用源】

pnpm install 

// "packageManager": "pnpm@9.11.0", 注意对node、pnpm版本等要求

我们使用 VitePress 进行快速开发和文档编写。您可以通过以下命令在本地启动它

pnpm dev

贡献

现有功能

欢迎增强现有功能。请尽量不要引入破坏性更改。

新功能

添加新功能时请注意以下几点

  • 在开始工作之前,最好先打开一个 issue 进行讨论。
  • 实现应放置在 packages/core 下作为一个文件夹,并在 index.ts 中导出。
  • core 包中,尽量不要引入第三方依赖,因为这个包旨在尽可能轻量化。
  • 如果您想引入第三方依赖,请贡献到 @vueuse/integrations 或创建一个新的附加包。
  • 您可以在 packages/core/_template/ 下找到函数模板,详细信息在 Function Folder 部分中解释。
  • 在为您的函数编写文档时,<!--FOOTER_STARTS--><!--FOOTER_ENDS--> 将在构建时自动更新,因此不需要手动更新它们。

请注意,您不需要更新包的 index.ts。它们是自动生成的。

新附加组件

非常欢迎新的附加组件!

  • 在 下创建一个新文件夹packages/,并将其命名为您的附加组件名称。
  • 添加附加组件详细信息scripts/packages.ts
  • README.md在该文件夹下创建。
  • 像对核心包所做的那样添加功能。
  • 提交并以 PR 形式提交。

项目结构

Monorepo

我们使用 Monorepo 来管理多个包

packages
  shared/         - 各包共享的工具
  core/           - 核心包
  firebase/       - Firebase 附加包
  [...addons]/    - 其他附加包

函数文件夹

一个函数文件夹通常包含以下 4 个文件:

您可以在 packages/core/_template/ 下找到模板

index.ts            # 函数源代码
demo.vue            # 文档演示
index.test.ts       # vitest 单元测试
index.md            # 文档

对于 index.ts,您应该使用命名导出函数。

// DO
export { useMyFunction }

// DON'T
export default useMyFunction

对于 index.md,第一句话将显示为函数列表中的简短介绍,因此请尽量保持简洁明了。

# useMyFunction

这是介绍。详细描述...

对于 index.test.ts,可以使用 pnpm run test useToString 等命令进行单元测试,useToString 是你需要单元测试的use函数,不写则表示全部use函数。

阅读更多关于指南的信息。

代码风格

只要您安装了开发依赖项,就不必担心代码风格。Git hooks 会在提交时自动格式化和修复它们。

其他阅读资料