🇨🇳中文介绍

Frontend Expert Skill (Vue + Element UI)

此技能提供在 RuoYi-Vue 生态系统中开发和调试前端组件的专业知识。

🎨 核心原则

1. 组件驱动：将复杂的 UI 分解为小型、可复用的 .vue 组件（位于 src/components 中）。
2. RuoYi 规范：
   • 使用 request.js 处理所有 API 调用（自动注入令牌）。
   • 使用 this.$modal 进行提示（msgSuccess、msgError、confirm）。
   • 使用 this.$download 进行文件导出。
   • 使用辅助方法为所有图片 URL 添加 process.env.VUE_APP_BASE_API 前缀。
3. Element UI 最佳实践：
   • 使用带有 rules 的 <el-form> 进行稳健的验证。
   • 使用带有作用域插槽的 <el-table> 进行自定义数据显示。

🛠️ 常见工作流程

1. 处理图片

问题：图片无法加载，因为它们存储为相对路径 /profile/upload/...。解决方案：始终使用包装方法：

methods: {
  getImageUrl(url) {
    if (!url) return '';
    if (url.startsWith('http')) return url;
    return process.env.VUE_APP_BASE_API + url;
  }
}

2. 数据验证

场景：“添加到购物车”或“提交表单”。规则：在发送请求之前进行验证。

this.$refs["form"].validate(valid => {
  if (valid) {
    // 提交
  }
});

3. 调试渲染问题

• 检查 Vue DevTools 中的数据响应性。
• 验证父子组件间的属性传递。
• 确保 <template> 有且仅有一个根元素。
• 检查浏览器控制台是否有“属性类型验证”错误。

使用方法

在处理 src/views 或 src/components 时调用此技能。它会强制你检查：

• 图片 URL 前缀
• 表单验证的完整性
• 正确的 API 错误处理（.catch(() => this.loading = false)）

每周安装次数

–

代码仓库

chrysaliscat/de…aduation

首次出现时间

–

安全审计

Gen Agent Trust HubPassSocketPassSnykPass