# Vue开发技能

使用Vue框架进行前端应用开发，包括Vue组件开发、路由配置、状态管理和API对接。触发关键词：Vue、Vue组件、Vue开发、前端框架。

## 执行步骤

### 步骤1：读取相关常识知识
使用 `read_knowledge` 读取以下常识知识，了解领域规范和标准：
- 使用 `read_knowledge knowledge_name='naming_conventions'`
- 使用 `read_knowledge knowledge_name='color_system'`
- 使用 `read_knowledge knowledge_name='responsive_breakpoints'`
- 使用 `read_knowledge knowledge_name='mm_vue_api_consumption'`

### 步骤2：读取工作提示词
使用 `read_work` 读取以下工作提示词，按规范流程执行：
- 使用 `read_work work_name='vue_development'`

### 步骤3：搭建Vue项目
使用 `make_dir` 创建项目结构，使用 `write_text` 编写package.json和vite.config.js。

### 步骤4：开发Vue组件
使用 `write_text` 编写单文件组件(.vue)，包含template、script和style。

### 步骤5：配置路由
使用 `write_text` 编写router配置，定义页面路由和导航守卫。

### 步骤6：状态管理
使用 `write_text` 编写store模块，管理全局状态和数据流。

### 步骤7：API对接
编写API服务层，使用axios对接后端接口，处理请求响应。

### 步骤8：测试验证
使用 `exec_code` 测试组件渲染和交互功能。

## 输出成果
1. Vue组件代码
2. 路由配置
3. 状态管理模块
4. API服务层代码

## 失败处理
- 若组件渲染异常，检查props传递和响应式数据
- 若路由跳转失败，验证路由配置和导航守卫

## 禁止行为
- ❌ 禁止在多个组件中直接修改共享状态
- ❌ 禁止忽略组件的生命周期管理