Open zhuanghaixin opened 3 years ago
vue create vue-storybook
npx sb init
vue add tailwind
`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.stories.js
import { storiesOf } from "@storybook/vue";
storiesOf("测试组件/Cool", module).add("With Text", () => ({
template: "<h2>Vue Component</h2>",
}));
初始化
安装
1. 安装vue
2. 安装storybook
3. 安装tailwind
3.1 在
config/storybook/preview.js
中引入taiilwind.css
更改story的配置
config/storybook/main.js