vue3-project-standard
Vue 3 + TypeScript 项目的完整工程规范，涵盖项目结构、组件设计、Composables、路由、Pinia 状态管理、API 层、错误处理、测试和性能优化。当用户在 Vue 项目中创建、修改组件或模块，涉及架构设计、代码编写时自动激活。
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/bovinphang/vue3-project-standardVue 3 项目规范
适用于使用 Vue 3 + TypeScript 的仓库。
项目结构
以下为中大型 Vue 3 项目的业界最佳实践结构，按项目实际情况裁剪：
src/
├── app/ # 应用入口与全局配置
│ ├── App.vue # 根组件
│ ├── main.ts # 应用启动入口
│ └── router.ts # 路由实例与配置
│
├── pages/ # 页面组件（与路由一一对应）
│ ├── Dashboard/
│ │ ├── DashboardPage.vue
│ │ ├── components/ # 页面私有组件
│ │ └── composables/ # 页面私有 composables
│ ├── UserList/
│ └── Settings/
│
├── layouts/ # 布局组件
│ ├── MainLayout.vue # 主布局（侧边栏 + 顶栏 + 内容区）
│ ├── AuthLayout.vue # 登录/注册页布局
│ └── BlankLayout.vue # 空白布局（错误页等）
│
├── features/ # 功能模块（按业务领域划分）
│ ├── auth/
│ │ ├── components/ # 模块组件
│ │ ├── composables/ # 模块 composables
│ │ ├── api.ts # 模块 API 调用
│ │ ├── types.ts # 模块类型定义
│ │ ├── constants.ts # 模块常量
│ │ └── index.ts # 模块公开导出
│ └── order/
│
├── components/ # 全局共享 UI 组件
│ ├── AppButton/
│ │ ├── AppButton.vue
│ │ └── __tests__/
│ ├── AppModal/
│ ├── AppForm/
│ └── AppErrorBoundary/
│
├── composables/ # 全局共享 composables
│ ├── useAuth.ts
│ ├── useDebounce.ts
│ └── useMediaQuery.ts
│
├── services/ # API 基础层
│ ├── request.ts # Axios/fetch 实例与拦截器
│ └── endpoints/ # API 端点定义（如按领域拆分）
│
├── stores/ # Pinia 状态管理
│ ├── authStore.ts
│ └── uiStore.ts
│
├── locales/ # 国际化语言包
│ ├── zh-CN.json # 中文
│ ├── en-US.json # 英文
│ └── index.ts # i18n 实例初始化（vue-i18n）
│
├── assets/ # 静态资源
│ ├── images/ # 图片（PNG、JPG、WebP）
│ ├── icons/ # SVG 图标
│ └── fonts/ # 自定义字体
│
├── config/ # 应用配置
│ ├── env.ts # 环境变量类型化封装
│ └── features.ts # Feature Flags 管理
│
├── types/ # 全局共享类型
│ ├── api.ts # API 响应/请求通用类型
│ ├── models.ts # 业务实体类型
│ └── global.d.ts # 全局类型扩展（组件类型、模块声明等）
│
├── utils/ # 纯工具函数
│ ├── format.ts # 日期、数字、货币格式化
│ ├── validators.ts # 表单校验规则
│ └── storage.ts # LocalStorage / SessionStorage 封装
│
├── directives/ # 自定义指令
│ ├── vPermission.ts # 权限指令
│ └── vClickOutside.ts # 点击外部关闭
│
├── plugins/ # Vue 插件注册
│ ├── i18n.ts # vue-i18n 插件配置
│ └── index.ts # 插件统一注册入口
│
├── styles/ # 全局样式与主题
│ ├── global.css # 全局基础样式（reset / normalize）
│ ├── variables.css # CSS 变量（颜色、间距、字号）
│ ├── breakpoints.ts # 响应式断点常量
│ └── themes/ # 主题定义
│ ├── light.css # 亮色主题变量
│ ├── dark.css # 暗色主题变量
│ └── index.ts...
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-bovinphang-vue3-project-standard": {
"enabled": true,
"auto_update": true
}
}
}Related Skills
frontend-code-review
从架构、可维护性、类型安全、可访问性、样式一致性、性能和可测试性等角度审查前端代码，并将报告保存为 Markdown 文件。当用户要求代码审查、Review、评审代码质量时自动激活。
legacy-web-standard
针对 JavaScript + jQuery + HTML/CSS 传统前端项目的开发与维护规范。当用户在非框架项目中工作，涉及 jQuery、原生 JS、传统多页面应用（MPA）、模板引擎渲染页面、或维护遗留代码时自动激活。
accessibility-check
审查或改进前端 UI 的语义结构、键盘支持、焦点管理、标签以及常见的 WCAG 相关问题，并将报告保存为 Markdown 文件。当用户提到无障碍、accessibility、a11y、WCAG，或在实现交互组件时自动激活。
security-review
前端代码安全审查，检测 XSS、CSRF、敏感数据泄露、不安全的用户输入处理和依赖风险，并将报告保存为 Markdown 文件。当用户要求安全检查、安全审查，或代码涉及用户输入、认证、支付、文件上传等敏感操作时自动激活。
nextjs-project-standard
Next.js 14+ 项目规范，涵盖 App Router、SSR/SSG、流式渲染、路由与布局、数据获取、中间件、元数据与 SEO。当用户在 Next.js 项目中创建、修改页面或模块时自动激活。