frontend-vue-development

Frontend Vue Development

Applicable Scenarios

• Develop or modify Vue components
• Handle Vuex state, routing, and page interactions
• Call backend APIs and render page data
• Organize styles and component structure according to project conventions

Inapplicable Scenarios

• Backend API design and implementation
• Go Agent or backend service development
• Only modifying ordinary documents or skills

Quick Guidance

1. This skill focuses on BK-CI frontend page development conventions, not a general Vue tutorial.
2. First keep component responsibilities single; do not mix page state and API calls into an unmaintainable large component.
3. Consistency matters more in the project: naming, indentation, component order, API call methods, and error handling patterns must be unified.
4. During component development, prioritize clarifying three things: data sources, interaction state, and whom it communicates with.
5. If the requirement is essentially a backend contract change, first look in coordination at api-interface-design and backend-microservice-development。

High-Signal Rules

• Page logic, API calls, and display state must have clear boundaries
• The closer a component is to business interactions, the more it must avoid implicit side effects
• When interacting with the backend, error states and loading states must be designed together

Key Pitfalls

• Piling API requests, complex state, and display details all into one component
• Only handling the success path, without handling empty states, failure states, and permission states
• Bypassing existing conventions because of schedule pressure, causing style fragmentation

Further Reading

• If you are changing the API contract: also see api-interface-design
• If you are changing the backend implementation: also see backend-microservice-development