vue-component-dev

What problem does it solve?

This Skill provides standardized guidelines for developing Vue 3 components for the vehicle insurance data analysis platform. It covers component structure, communication, Pinia state management, ECharts integration, and performance optimization, ensuring consistent, maintainable, and high-quality frontend development.

Core Features & Use Cases

• Standard Component Template: Offers a ready-to-use template for new Vue components, including <script setup>, Props, Emits, and lifecycle hooks.
• Component Communication: Guides on using Props for parent-to-child data, Emits for child-to-parent events, and Pinia for cross-component state sharing.
• Pinia Store Usage: Defines three core Pinia stores (appStore, filterStore, dataStore) with clear responsibilities and usage规范.
• ECharts Integration: Provides a standard ECharts component template, emphasizing responsive handling, data updates, and adherence to eye-care color palettes.
• Performance Optimization: Offers tips on choosing between computed vs watch, v-show vs v-if, and avoiding complex template expressions.
• Use Case: A developer needs to create a new dashboard widget that displays data from the dataStore and allows user interaction. This skill provides the component template, Pinia integration pattern, and styling guidelines to build it efficiently and correctly.

Quick Start

Create a new Vue 3 component 'SalesOverview.vue' that fetches data from the dataStore and displays it using an ECharts bar chart.