vue-best-practices

仓库创建 2026年1月28日最近提交 1 个月前SkillHot 收录 20 天前

▸ 精选理由

为团队/Agent 提供一致的 Vue 开发约定

这个 Skill 做什么

Vue 3 最佳实践指南，推荐 Composition API 与 TypeScript 等规范化开发流程。

Vue 项目开发的实战规范：强烈推荐在 Vue 3 中用 Composition API（<script setup>）和 TypeScript，覆盖 SSR、Volar、vue-tsc 等工具链细节。凡是和 .vue 文件、Vue Router、Pinia、Vite 相关的任务都应按这套最佳实践来做，除非项目明确要求 Options API。特别强调把状态和数据流理清、拆小组件、用 TypeScript 提升可维护性与可重构性。

▸ 展开 SKILL.md 英文原文

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

开发编程Vue 3最佳实践TypeScript通用

5.7k

Stars

314

Forks

仓库内 Skill

+173

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/antfu/skills/main/skills/vue-best-practices/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Vue Best Practices Workflow

Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.

## Core Principles
- **Keep state predictable:** one source of truth, derive everything else.
- **Make data flow explicit:** Props down, Events up for most cases.
- **Favor small, focused components:** easier to test, reuse, and maintain.
- **Avoid unnecessary re-renders:** use computed properties and watchers wisely.
- **Readability counts:** write clear, self-documenting code.

## 1) Confirm architecture before coding (required)

- Default stack: Vue 3 + Composition API + `<script setup lang="ts">`.
- If the project explicitly uses Option

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有