vue3-development

分类: 开发与编程 | 上传者: SheakUI | 下载: 0 | 版本: v1.0（最新）

Vue3 开发技能，提供 Vue3 + Vite + TypeScript 项目开发指导

更新日志: Source: GitHub https://github.com/SheakUI/webease-tool-resources

目录结构

当前层级: .webease/skills/vue3-development/

📄 .webease-install 190 B
📄 SKILL.md 2.0 KB

SKILL.md

---
name: vue3-development
description: Vue3 开发技能，提供 Vue3 + Vite + TypeScript 项目开发指导
trigger:
  - vue3
  - vue
  - vite
  - component
  - 组件开发
  - vue 开发
license: MIT
---

# Vue3 开发技能

提供 Vue3 + Vite + TypeScript 项目开发指导。

## 技术栈

- Vue 3 (Composition API)
- Vite (构建工具)
- TypeScript (类型安全)
- Pinia (状态管理)
- Vue Router (路由)

## 核心原则

### 1. Composition API 优先

使用 `<script setup>` 语法糖，逻辑复用优先使用 composables。

```vue
<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  title: string
  count?: number
}>()

const emit = defineEmits<{
  update: [value: string]
}>()

const localCount = ref(props.count || 0)
</script>
```

### 2. 类型安全

- 组件 props 使用类型声明
- 事件 emit 使用类型化 emit
- 优先使用 TypeScript 而不是 prop-types

### 3. 组件设计

- 单一职责原则
- props 传递必要数据，避免隐式依赖
- 使用 slots 增加灵活性

## 项目结构

```
src/
├── components/     # 公共组件
├── views/          # 页面组件
├── composables/   # 组合式函数
├── stores/        # Pinia store
├── router/        # 路由配置
├── utils/         # 工具函数
├── types/         # 类型定义
└── assets/        # 静态资源
```

## 常用模式

### 异步数据加载

```ts
// composables/useAsync.ts
export function useAsync<T>(asyncFn: () => Promise<T>) {
  const data = ref<T | null>(null)
  const loading = ref(false)
  const error = ref<Error | null>(null)

  const execute = async () => {
    loading.value = true
    error.value = null
    try {
      data.value = await asyncFn()
    } catch (e) {
      error.value = e as Error
    } finally {
      loading.value = false
    }
  }

  return { data, loading, error, execute }
}
```

### 表单处理

```ts
// 使用 vee-validate 或 Vuelidate
import { useForm, useField } from 'vee-validate'
```

登录后下载/点赞/收藏 ❤ 3 | ★ 0

vue3-development

目录结构

SKILL.md

举报内容

提示