search

zhuanghaixin / Interview

8 stars 0 forks source link

[storybook] storybook使用指南 #119

Open zhuanghaixin opened 3 years ago

zhuanghaixin commented 3 years ago

初始化

安装

1. 安装vue

vue create vue-storybook

2. 安装storybook

vue add storybook

image

3. 安装tailwind

vue add tailwind

3.1 在config/storybook/preview.js中引入taiilwind.css

import "../../src/assets/tailwind.css";

更改story的配置

config/storybook/main.js

module.exports = {
  stories: ['../../src/components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-links']
}
zhuanghaixin commented 3 years ago

初始化(二）

安装

1. 安装vue

vue create vue-storybook

2. 安装storybook

npx sb init

3. 安装tailwind

vue add tailwind
zhuanghaixin commented 3 years ago

安装插件

安装 Storybook Controls Addon

zhuanghaixin commented 3 years ago

story书写方式

Component Story Format(推荐）

`limitedInput.stories.js

import LimitedInput from './LimitedInput'

// 左侧栏 标题
export default {
    title: '测试组件/LimitedInput'
}
// 还可以导入Limited组件 jsx
export const Simple = () => ({
    render() {
        return <LimitedInput/>
    }
})
// template形式
export const SimpleWithTemplate = () => ({
    components:{LimitedInput},
    template:'<LimitedInput/>'
})
// 还可以导入Limited组件 jsx 传值
export const WithValue = () => ({
    render() {
        return <LimitedInput value="test" />
    }
})

// 还可以导入Limited组件 jsx 传值
export const WithValueLong = () => ({
    render() {
        return <LimitedInput value="test xxx xxx" />
    }
})
// 组件模版 template写法
export const vueComponent = () => ({
    template: "<h2>Vue component</h2>"
})
// 纯文本写法
export const pureComponent = () => "<h2>Pure component</h2>"

// jsx写法

export const renderFunctionJSX = () => ({
    render() {
        return <h2>In JSX</h2>
    }
})

Legacy Format (兼容）

legacy.stories.js

import { storiesOf } from "@storybook/vue";

storiesOf("测试组件/Cool", module).add("With Text", () => ({
  template: "<h2>Vue Component</h2>",
}));