Vue3 Frontend Development And Integration

1. Development Flow

2. Key Areas

Area	Focus
Route and menu	Keep backend menu route, frontend component path, and permission identifier consistent.
API request	Confirm base URL, method, parameter format, and response structure.
Permission	Validate menu, button, and backend annotations together.
Data scope	Test with administrator and ordinary tenant users.
Form validation	Keep frontend validation aligned with backend validation.
E2E or smoke test	Verify list, add, edit, delete, export, and detail flows.

3. Local Debugging

Item	Notes
Backend address	Configure proxy or environment variable according to the local backend.
Login token	Clear old tokens after switching environments.
API errors	Check request URL, permission code, and backend logs.
Menu cache	Log out or clear cache after modifying menu routes.
Generated pages	After using the generator, verify route path, API path, and permission code.

4. Integration Checklist

1. Page route can be opened from the menu.
2. List query and pagination work.
3. Add, edit, delete, detail, export, and import actions match permission.
4. Form validation and backend validation are consistent.
5. Ordinary users cannot access unauthorized data.
6. Build succeeds and browser console has no blocking errors.

Related Docs

• Backend Module Map
• Data Model Map
• Code Generator