Vue AI 正式上线!免费使用!

作者:互联网

2026-03-24

AI模型库

以后 Vue 开发者可以解放双手了!因为

Vue AI 发布啦!Vue 技术大佬 SerKo 开发的,受到了尤雨溪的大力推荐(转发)

图片图片

Github 上已有仓库:

图片图片

https://github.com/vuejs-ai/skills

安装

npx skills add vuejs-ai/skills
  • 1.

Claude Code 应用市场(专属方式)

Claude Code 用户可通过以下方式使用:

# 添加技能市场源
/plugin marketplace add vuejs-ai/skills

# 安装单个技能
/plugin install create-adaptable-composable@vue-skills

# 批量安装多个技能
/plugin install create-adaptable-composable@vue-skills vue-best-practices@vue-skills
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

使用方式

为确保最佳效果,请在提示词开头添加固定前缀:

Use vue skill, <你的具体需求>
  • 1.

该前缀会显式触发对应技能,确保 AI 严格遵循文档约定的开发范式。若省略前缀,技能触发效果可能不稳定(取决于你的提示词与技能描述关键词的匹配度)。

可用技能列表

图片

示例

1. vue-best-practices 技能示例

需求提示词

Use vue skill, create a todo app
  • 1.

? 查看完整示例输出

使用技能后的优化点

  • 代码可读性显著提升
  • 组件按职责拆分更合理
  • 状态逻辑抽离至独立组合式函数(useTodos.ts)
  • 基础类型响应式数据使用 shallowRef 优化性能(参考响应式 API 文档)

2. create-adaptable-composable 技能示例

(衍生自 serkodev/vue-skills 仓库的 create-agnostic-composable 技能)

需求提示词

Use vue skill, create a reusable composable for controlling hidden for a element
  • 1.

? 查看完整示例输出

使用技能后的优化点

  • 输入参数采用 MaybeRef 和 MaybeRefOrGetter 类型,兼顾响应式灵活性
export interface UseHiddenOptions {
  hidden?: MaybeRef // 支持响应式/非响应式布尔值
  initialHidden?: MaybeRefOrGetter // 支持 getter 函数/响应式/普通值
  syncAria?: boolean // 是否同步 aria-hidden 属性
}

export function useHidden(
  target?: MaybeRefOrGetter, // 元素引用支持多类型输入
  options: UseHiddenOptions = {},
) {
  // 组合式函数逻辑...
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.


相关标签:

AI 大模型 资讯