0Pricing
Vue Academy · บทเรียน

การตั้งค่า Storybook สำหรับ Vue 3

npx storybook@latest init, .storybook/config, main.js ไดเรกทอรี stories และการเรียกใช้งาน

การตั้งค่า Storybook สำหรับ Vue 3 เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

Storybook คืออะไร

Storybook คือเวิร์กช็อปสำหรับสร้างคอมโพเนนต์ส่วนติดต่อผู้ใช้แบบแยกอิสระ คุณสามารถเรนเดอร์คอมโพเนนต์แต่ละรายการในทุกสถานะนอกแอป จัดทำเอกสาร และทดสอบด้วยภาพได้ ทั้งหมดนี้ในแซนด์บ็อกซ์เบราว์เซอร์เฉพาะ

ทำไมจึงใช้ร่วมกับ Vue

การพัฒนาปุ่มหรือหน้าต่างโมดัลภายในหน้าที่มีโครงสร้างซับซ้อนนั้นใช้เวลานาน Storybook ช่วยให้คุณดูคอมโพเนนต์ได้โดยลำพัง เปลี่ยนพร็อพส์แบบเรียลไทม์ และตรวจพบความผิดเพี้ยนทางภาพก่อนที่จะไปถึงแอป

ติดตั้งด้วยคำสั่งเดียว

เรียกใช้คำสั่ง init ในโปรเจกต์ Vue 3 ที่มีอยู่ ระบบจะตรวจหา Vite ติดตั้งดีเพนเดนซี และสร้างโครง config กับเรื่องราวตัวอย่างให้

// terminal
// npx storybook@latest init

สิ่งที่ init สร้าง

ตัวเริ่มต้นจะเพิ่มโฟลเดอร์ config .storybook/ ไฟล์ *.stories.* ตัวอย่าง และสคริปต์ npm โดยจะตรวจหาการตั้งค่า Vue 3 + Vite โดยอัตโนมัติ

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

การกำหนดค่า main.ts

.storybook/main.ts คือ config หลัก ซึ่งกำหนดว่าเรื่องราวอยู่ที่ใด จะโหลดส่วนเสริมใดบ้าง และจะใช้กรอบงานใด สำหรับ 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

รูปแบบการค้นหาไฟล์ของเรื่องราว

อาร์เรย์ stories จะบอก Storybook ว่าควรค้นหาไฟล์เรื่องราวที่ใด โดยใช้รูปแบบการค้นหาไฟล์ คุณสามารถปรับให้ตรงกับโครงสร้างโฟลเดอร์ของคุณได้

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

กรอบงาน vue3-vite

แพ็กเกจกรอบงานจะเชื่อม Storybook เข้ากับ config Vite ที่มีอยู่ของคุณ ทำให้นามแฝง ปลั๊กอิน และการจัดการ CSS สอดคล้องกับการบิลด์แอปจริง

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

ไฟล์ preview.ts

.storybook/preview.ts ใช้กำหนดการตั้งค่าส่วนกลางที่มีผลกับเรื่องราวทุกรายการ เช่น ตัวตกแต่งส่วนกลาง พารามิเตอร์ และการนำเข้า 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

ตัวตกแต่งและปลั๊กอินส่วนกลาง

หากคอมโพเนนต์ต้องใช้เราเตอร์หรือ Pinia ให้ลงทะเบียนเพียงครั้งเดียวใน preview.ts ผ่าน setup เพื่อให้เรื่องราวทุกรายการเข้าถึงได้ โดยไม่ต้องเขียนโค้ดซ้ำในแต่ละเรื่องราว

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

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

เรียกใช้เซิร์ฟเวอร์สำหรับพัฒนา

เริ่มใช้ Storybook ในเครื่องด้วยคำสั่งสำหรับพัฒนา โดยทั่วไปจะใช้พอร์ต 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 สร้างโครง config และตัวอย่าง
  • .storybook/main.ts กำหนดรูปแบบค้นหา stories ส่วนเสริม และกรอบงาน @storybook/vue3-vite
  • .storybook/preview.ts จัดการการตั้งค่าส่วนกลาง (CSS ตัวตกแต่ง และปลั๊กอินอย่าง Pinia)
  • เรียกใช้ด้วย storybook dev -p 6006 และสร้างเว็บไซต์แบบสแตติกด้วย storybook build

คำถามที่พบบ่อย

บทเรียน “การตั้งค่า Storybook สำหรับ Vue 3” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การตั้งค่า Storybook สำหรับ Vue 3” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การตั้งค่า Storybook สำหรับ Vue 3”

npx storybook@latest init, .storybook/config, main.js ไดเรกทอรี stories และการเรียกใช้งาน คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การตั้งค่า Storybook สำหรับ Vue 3” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตั้งค่า Storybook สำหรับ Vue 3
  2. การเขียนเรื่องราวของคอมโพเนนต์
  3. Controls, Actions และ Args
  4. ส่วนเสริม Storybook และการทดสอบการเข้าถึง
← กลับไปที่ Vue Academy