Vue Academy · درس

إعداد Storybook لـ Vue 3

‏npx storybook@latest init و.storybook/config وmain.js ومجلد stories، ثم تشغيله

إعداد Storybook لـ Vue 3 درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما Storybook؟

Storybook هو بيئة عمل لبناء مكونات واجهة المستخدم بمعزل عن التطبيق. تعرضون كل مكوّن في جميع حالاته خارج تطبيقكم، وتوثقونه، وتختبرونه بصريًا — كل ذلك داخل مساحة اختبار مخصصة في المتصفح.

لماذا تستخدمونه مع Vue؟

يكون تطوير زر أو نافذة منبثقة داخل صفحة عميقة بطيئًا. يتيح لكم Storybook رؤية المكوّن بمفرده، وتغيير خصائصه مباشرة، واكتشاف التراجعات البصرية قبل وصولها إلى التطبيق.

التثبيت بأمر واحد

شغّلوا أمر init في مشروع Vue 3 موجود. يكتشف Vite، ويثبّت الاعتماديات، وينشئ هيكل ملفات الإعداد وقصصًا نموذجية.

// terminal
// npx storybook@latest init

ما ينشئه init

يضيف المُهيّئ مجلد إعدادات .storybook/، وملفات *.stories.* نموذجية، ونصوص npm البرمجية. كما يكتشف تلقائيًا إعداد Vue 3 + Vite.

// .storybook/main.ts
// .storybook/preview.ts
// src/stories/*.stories.ts (examples)

إعداد main.ts

يمثل .storybook/main.ts الإعداد الأساسي: فهو يحدد مكان القصص، والإضافات التي تُحمّل، وإطار العمل المستخدم. وبالنسبة إلى Vue 3 + Vite، يكون إطار العمل هو @storybook/vue3-vite.

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite"

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|ts)"],
  addons: ["@storybook/addon-essentials"],
  framework: { name: "@storybook/vue3-vite", options: {} },
}
export default config

نمط glob للقصص

تحدد مصفوفة stories مكان العثور على ملفات القصص في Storybook باستخدام أنماط glob. عدّلوا هذه المصفوفة لتطابق بنية مجلداتكم.

stories: [
  "../src/**/*.stories.@(js|jsx|ts|tsx)",
]

إطار عمل vue3-vite

تربط حزمة إطار العمل Storybook بإعداد Vite الموجود لديكم، بحيث تتطابق الأسماء المستعارة، والإضافات، ومعالجة CSS مع عملية بناء تطبيقكم الفعلية.

framework: {
  name: "@storybook/vue3-vite",
  options: {},
}

ملف preview.ts

يضبط .storybook/preview.ts الإعداد العام الذي ينطبق على كل قصة: decorators العامة، والمعلمات، واستيراد CSS العام.

// .storybook/preview.ts
import type { Preview } from "@storybook/vue3"
import "../src/assets/main.css"

const preview: Preview = {
  parameters: {
    controls: { matchers: { color: /color/i } },
  },
}
export default preview

Decorators والإضافات العامة

إذا احتاجت المكونات إلى router أو Pinia، فسجّلوهما مرة واحدة في preview.ts عبر setup، حتى تتمكن كل قصة من الوصول إليهما — من دون تعليمات متكررة لكل قصة.

// .storybook/preview.ts
import { setup } from "@storybook/vue3"
import { createPinia } from "pinia"

setup((app) => {
  app.use(createPinia())
})

تشغيل خادم التطوير

شغّلوا Storybook محليًا باستخدام أمر dev. والمنفذ المتعارف عليه هو 6006.

// terminal
// npm run storybook
// or directly:
// storybook dev -p 6006

بناء Storybook ثابت

للنشر، ابنوا موقعًا ثابتًا يمكنكم استضافته في أي مكان. وغالبًا ما ينشر CI هذا الموقع لإجراء مراجعة التصميم.

// terminal
// storybook build
// outputs to storybook-static/

تحقق سريع

تحققوا من فهمكم لإعداد Storybook مع Vue 3.

مراجعة

لقد أعددتم Storybook لـ Vue 3:

ينشئ Storybook المكونات ويوثقها بمعزل عن التطبيق.
ينشئ npx storybook@latest init هيكل الإعدادات والأمثلة.
يحدد .storybook/main.ts نمط glob الخاص بـ stories، والإضافات، وإطار العمل @storybook/vue3-vite.
يتولى .storybook/preview.ts الإعداد العام، مثل CSS وdecorators والإضافات مثل Pinia.
شغّلوا Storybook باستخدام storybook dev -p 6006، وابنوا موقعًا ثابتًا باستخدام storybook build.

الأسئلة الشائعة

هل درس «إعداد Storybook لـ Vue 3» مجاني؟

نعم — نص درس «إعداد Storybook لـ Vue 3» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «إعداد Storybook لـ Vue 3»؟

‏npx storybook@latest init و.storybook/config وmain.js ومجلد stories، ثم تشغيله تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «إعداد Storybook لـ Vue 3»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy