浅尝histoire | 月空人

安装 histoire

shell

pnpm i -D histoire @histoire/plugin-vue

创建 histoire.config.ts 配置文件

import { HstVue } from "@histoire/plugin-vue"
import { defineConfig } from "histoire"

export default defineConfig({
    plugins: [HstVue()],
})

添加启动命令

histoire dev 开发环境启动
histoire build 打包
histoire preview 打包并预览打包结果

json

{
  "scripts": {
    "story:dev": "histoire dev",
    "story:build": "histoire build",
    "story:preview": "histoire preview",
  },
}

编写 story

使用.story.vue 结尾的文件会被 histoire 自动识别为 story 组件，该文件中只需要再根节点使用 Story 标签即可

html

<script lang="ts" setup>
import HelloWorld from "./HelloWorld.vue"
</script>

<template>
    <Story>
        <HelloWorld msg="Hello Vue 3 + Vite" />
    </Story>
</template>