SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场vue-expert-js

vue-expert-js

前端与建站

查看项目

更新于 10-16 14:59

技能介绍

Vue Expert (JavaScript) 是一个由 @jeffallan 维护的 Vue 3 开发技能，定位为「高级 Vue 专家」，使用 JavaScript 与 JSDoc 类型标注而非 TypeScript 来构建 Vue 3 应用。

用途

该技能面向希望在不引入 TypeScript 的情况下获得类型安全收益的 Vue 3 项目，通过 JSDoc 注释提供完整的类型覆盖，同时保持纯 JavaScript 代码库。

主要能力

  • 创建 Vue 3 组件，使用 <script setup>（不带 lang="ts"），通过 JSDoc 为 props 与 emits 添加类型。
  • 构建原生 JavaScript composables，使用 @typedef、@param、@returns 进行标注。
  • 配置 Vite 项目，搭建路由与状态管理。
  • 使用 .mjs 扩展名组织 ES 模块。
  • 用 @typedef 定义跨文件共享的复杂对象结构。
  • 使用 eslint-plugin-jsdoc 校验 JSDoc 类型覆盖。
  • 使用 Vitest 以 JavaScript 文件进行测试。

核心工作流

  1. 设计架构：规划组件结构与 composables，并配以 JSDoc 类型注解。
  2. 实现：使用 <script setup>（不带 lang="ts"），必要时使用 .mjs 模块。
  3. 标注：添加完整的 JSDoc 注释（@typedef、@param、@returns、@type），然后运行带 JSDoc 插件的 ESLint 验证覆盖情况，修复缺失或格式错误的注解后再继续。
  4. 测试：使用 Vitest 与 JavaScript 文件验证，确认所有公共 API 的 JSDoc 覆盖；若测试失败，回到相关 composable 或组件，修正逻辑或注解并重新运行直至全部通过。

参考指南

技能按上下文提供详细参考文档：JSDoc Typing（references/jsdoc-typing.md，用于 JSDoc 类型、@typedef、@param、类型提示）、Composables（references/composables-patterns.md，用于自定义 composables、ref、reactive、生命周期钩子）、Components（references/component-architecture.md，用于 props、emits、slots、provide/inject）、State（references/state-management.md，用于 Pinia、stores、响应式状态）、Testing（references/testing-patterns.md，用于 Vitest、组件测试、mock）。共享 Vue 概念方面，则交由 vue-expert 的 references/composition-api.md、components.md、state-management.md 处理。

代码模式

技能给出组件示例：使用 defineProps 定义 name、age、isAdmin，并通过 @typedef UserCardProps 注解；使用 defineEmits 声明 select 事件，配合 @typedef UserCardEmits 与 @param 注解处理函数。composable 示例展示 useCounter.mjs，用 @typedef CounterState 描述 count、isPositive、increment、reset，并为函数提供 @param 与 @returns。类型文件示例展示 types/user.mjs 中定义 User 的 @typedef（id、name、email、role），其他文件通过 import('./types/user.mjs').User 引用。

约束

必须做：使用 Composition API 与 <script setup>；使用 JSDoc 注释记录类型；必要时使用 .mjs 扩展名表示 ES 模块；为每个公共函数标注 @param 与 @returns；使用 @typedef 描述跨文件共享的复杂对象；为响应式变量使用 @type 注解；遵循适配 JavaScript 的 vue-expert 模式。

禁止做：使用 TypeScript 语法（不得使用 <script setup lang="ts">）；使用 .ts 文件扩展名；跳过公共 API 的 JSDoc 类型；在 Vue 文件中使用 CommonJS require()；完全忽略类型安全；在同一组件中混用 TypeScript 与 JavaScript 文件。

输出模板

实现 JavaScript 版 Vue 功能时，输出包含：带 <script setup>（无 lang 属性）且 props/emits 有 JSDoc 类型的组件文件；用于复杂 prop 或状态结构的 @typedef 定义；带 @param 与 @returns 注解的 composable；以及关于类型覆盖情况的简要说明。

知识参考

涵盖 Vue 3 Composition API、JSDoc、ESM 模块、Pinia、Vue Router 4、Vite、VueUse、Vitest、Vue Test Utils、JavaScript ES2022+。

适用场景与限制

适用于坚持 JavaScript 技术栈、又希望保持类型文档与校验的 Vue 3 项目。限制方面：明确不涉及 TypeScript 相关能力；具体收费、价格等信息暂未提供。