Vue 3 + TypeScript + Pinia + Vue Router 项目

这是一个集成了 vuejs-ai/skills 的 Vue 3 项目，提供了 AI 驱动的 Vue 开发最佳实践指导。

项目特性

• ✅ Vue 3 + Composition API
• ✅ TypeScript 支持
• ✅ Vue Router 4 路由管理
• ✅ Pinia 状态管理
• ✅ 集成 Vue AI Skills 最佳实践指导

已安装的 Vue Skills

🎯 核心技能

• vue-best-practices - Vue 3 + Composition API + TypeScript 最佳实践
• vue-pinia-best-practices - Pinia 状态管理最佳实践
• vue-router-best-practices - Vue Router 4 路由最佳实践
• vue-jsx-best-practices - Vue JSX 语法最佳实践
• create-adaptable-composable - 创建可复用组合式函数的最佳实践

💡 技能使用提示

在与 AI 交互时，使用以下前缀获得最佳结果：

Use vue skill, [你的问题或需求]

例如：

• Use vue skill, 创建一个用户管理的页面
• Use vue skill, 优化这个组件的性能
• Use vue skill, 添加表单验证

Recommended IDE Setup

VS Code + Vue (Official) (and disable Vetur).

Recommended Browser Setup

• Chromium-based browsers (Chrome, Edge, Brave, etc.):
  • Vue.js devtools
  • Turn on Custom Object Formatter in Chrome DevTools
• Firefox:
  • Vue.js devtools
  • Turn on Custom Object Formatter in Firefox DevTools

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build