安装 histoire
1
| pnpm i -D histoire @histoire/plugin-vue
|
创建 histoire.config.ts 配置文件
1
2
3
4
5
6
| import { defineConfig } from "histoire"
import { HstVue } from "@histoire/plugin-vue"
export default defineConfig({
plugins: [HstVue()],
})
|
添加启动命令
histoire dev 开发环境启动histoire build 打包histoire preview 打包并预览打包结果
1
2
3
4
5
6
7
| {
"scripts": {
"story:dev": "histoire dev",
"story:build": "histoire build",
"story:preview": "histoire preview"
}
}
|
编写 story
使用.story.vue 结尾的文件会被 histoire 自动识别为 story 组件，该文件中只需要再根节点使用 Story 标签即可
1
2
3
4
5
6
7
8
9
| <script lang="ts" setup>
import HelloWorld from "./HelloWorld.vue"
</script>
<template>
<Story>
<HelloWorld msg="Hello Vue 3 + Vite" />
</Story>
</template>
|
