Frontend Expert Skill (Vue + Element UI)

This skill provides specialized knowledge for developing and debugging frontend components in the RuoYi-Vue ecosystem.

🎨 Core Principles

1. Component Driven: Break down complex UIs into small, reusable .vue components (in src/components).
2. RuoYi Conventions:
   • Use request.js for all API calls (automatic token injection).
   • Use this.$modal for prompts (msgSuccess, msgError, confirm).
   • Use this.$download for file exports.
   • Prefix all image URLs with process.env.VUE_APP_BASE_API using a helper method.
3. Element UI Best Practices:
   • Use <el-form> with rules for robust validation.
   • Use <el-table> with scoped slots for custom data display.
   • Always handle loading states for buttons and tables.

🛠️ Common Workflows

1. Handling Images

Problem: Images don’t load because they are stored as relative paths /profile/upload/.... Solution: Always use a wrapper method:

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

2. Data Validation

Context: “Add to Cart” or “Submit Form”. Rule: Validate before sending a request.

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

3. Debugging Rendering Issues

• Check Vue DevTools for data reactivity.
• Verify parent-child prop passing.
• Ensure <template> has exactly one root element.
• Check browser console for “Prop type authentication” errors.

How to use

Invoke this skill when working on src/views or src/components. It forces you to check for:

• Image URL prefixes
• Form validation completeness
• Proper API error handling (.catch(() => this.loading = false))