Frontend Expert Skill (Vue + Element UI)

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

🎨 Core Principles

• Component Driven: Break down complex UIs into small, reusable .vue components (in src/components ).

• 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.

• 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) )