Back to Details

vue-frontend-expert

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Vue Frontend Expert Skill (Vue 前端专家技能)

Vue Frontend Expert Skill

能力 (Capabilities)

Capabilities

  • Composition API: 编写模式一致的 
    <script setup lang="ts">
    。
  • SCSS BEM: 遵循 BEM (Block Element Modifier) 命名规范编写高度解耦合的样式。
  • I18n 驱动: 强制使用 
    $t()
    或 
    useI18n()
    。
  • PrimeVue 应用: 熟练使用项目的 UI 组件库。
  • 暗色模式适配: 编写自适应暗色模式的样式。
  • Composition API: Write consistent 
    <script setup lang="ts">
    patterns.
  • SCSS BEM: Write highly decoupled styles following the BEM (Block Element Modifier) naming convention.
  • I18n-driven: Mandate the use of 
    $t()
    or 
    useI18n()
    .
  • PrimeVue Implementation: Proficiently use the project's UI component library.
  • Dark Mode Adaptation: Write styles that adapt to dark mode.

指令 (Instructions)

Instructions

  1. 样式规范: 严禁使用内联样式和 
    !important
    。必须引用全局变量和 Mixins。
  2. 响应式设计: 确保组件在移动端和桌面端表现正常。
  3. SEO 优化: 页面级组件必须包含 
    useHead
    或 
    definePageMeta
    。
  4. UI 文本: 禁止硬编码中文/英文。
  1. Style Guidelines: Strictly prohibit inline styles and 
    !important
    . Must reference global variables and Mixins.
  2. Responsive Design: Ensure components perform well on both mobile and desktop devices.
  3. SEO Optimization: Page-level components must include 
    useHead
    or 
    definePageMeta
    .
  4. UI Text: Hardcoding Chinese/English text is prohibited.

使用示例 (Usage Example)

Usage Example

输入: "创建一个文章卡片组件。" 动作: 编写 
article-card.vue
，使用 BEM 编写 SCSS，并为标题和按钮设置 i18n key。
Input: "Create an article card component." Action: Write 
article-card.vue
, use BEM for SCSS styling, and set i18n keys for the title and buttons.