创建你的第一个模块

创建模块

我们建议您使用我们提供的入门模板:

npm create nuxt -- -t module my-module

yarn create nuxt -t module my-module

pnpm create nuxt -t module my-module

bun create nuxt --template=module my-module

来开始您的 Nuxt 模块之旅。这将创建一个包含开发和发布模块所需所有样板文件的 my-module 项目。

后续步骤

1. 在您选择的 IDE 中打开 my-module
2. 使用您最喜欢的包管理器安装依赖项
3. 使用 npm run dev:prepare 为开发准备本地文件
4. 阅读本文档以了解更多关于 Nuxt 模块的信息

使用入门模板

学习如何使用模块启动器执行基本任务。

开发您的模块

虽然您的模块源代码位于 src 目录中，但开发模块时通常需要一个 Nuxt 应用程序来进行测试。这就是 playground 目录的作用。它是一个已经配置好并可与您的模块一起运行的 Nuxt 应用程序，您可以对其进行调试。

您可以像使用任何 Nuxt 应用程序一样与 playground 进行交互。

• 使用 npm run dev 启动其开发服务器，当您在 src 目录中对模块进行更改时，它应该会自动重新加载。
• 使用 npm run dev:build 进行构建。

运行测试

模块启动器自带了一个基础的测试套件

• 由以下工具驱动的 linter（代码检查器）ESLint，使用 npm run lint 运行它。
• 由以下工具驱动的测试运行器Vitest，使用 npm run test 或 npm run test:watch 运行它。

构建您的模块

Nuxt 模块自带由@nuxt/module-builder提供的构建工具。此构建工具无需您进行任何配置，支持 TypeScript，并确保您的资源被正确打包以分发给其他 Nuxt 应用程序。

您可以通过运行 npm run prepack 来构建您的模块。

发布到 npm

虽然您可以通过提升版本号并使用 npm publish 命令来发布模块，但模块启动器附带了一个发布脚本，可帮助您确保发布的是模块的可工作版本，并完成其他相关操作。

要使用发布脚本，首先提交所有更改（我们建议您遵循Conventional Commits规范，以便利用自动版本更新和更新日志生成），然后使用 npm run release 运行发布脚本。

运行发布脚本时，会发生以下操作：

• 首先，它将通过以下步骤运行您的测试套件：
  • 运行 linter（npm run lint）
  • 运行单元、集成和 e2e 测试（npm run test）
  • 构建模块（npm run prepack）
• 然后，如果测试套件运行顺利，它将继续通过以下步骤发布您的模块：
  • 根据您的“约定式提交（Conventional Commits）”提升模块版本并生成更新日志
  • 将模块发布到 npm（为此，模块将被再次构建，以确保发布的产品包中包含了更新后的版本号）
  • 将代表新发布版本的 git 标签推送到您的 git 远程源（origin）