name: nuxt-modules description: “用于创建Nuxt模块时使用:(1) 发布的npm模块(@nuxtjs/, nuxt-),(2) 本地项目模块(modules/ 目录),(3) 运行时扩展(组件、composables、插件),(4) 服务器扩展(API路由、中间件),(5) 发布/发布模块到npm,(6) 为模块设置CI/CD工作流。提供defineNuxtModule模式、Kit实用工具、钩子、E2E测试和发布自动化。” license: MIT
Nuxt模块开发
创建扩展框架功能的Nuxt模块的指南。
相关技能: nuxt(基础),vue(运行时模式)
快速开始
npx nuxi init -t module my-module
cd my-module && npm install
npm run dev # 启动开发环境
npm run dev:build # 在监视模式下构建
npm run test # 运行测试
可用指南
- references/development.md - 模块结构、defineNuxtModule、Kit实用工具、钩子
- references/testing-and-publishing.md - E2E测试、最佳实践、发布、发布
- references/ci-workflows.md - 可复制的CI/CD工作流模板
加载文件
根据任务考虑加载这些参考文件:
- [ ] references/development.md - 如果构建模块功能、使用defineNuxtModule或处理Kit实用工具
- [ ] references/testing-and-publishing.md - 如果编写E2E测试、发布到npm或遵循最佳实践
- [ ] references/ci-workflows.md - 如果为您的模块设置CI/CD工作流
不要一次性加载所有文件。 只加载与当前任务相关的文件。
模块类型
| 类型 | 位置 | 用例 |
|---|---|---|
| 已发布 | npm包 | @nuxtjs/, nuxt- 分发 |
| 本地 | modules/ 目录 |
项目特定扩展 |
| 内联 | nuxt.config.ts |
简单的一次性钩子 |
项目结构
my-module/
├── src/
│ ├── module.ts # 入口点
│ └── runtime/ # 注入用户应用
│ ├── components/
│ ├── composables/
│ ├── plugins/
│ └── server/
├── playground/ # 开发测试
└── test/fixtures/ # E2E测试