参考文档： https://storybook.js.org/docs/vue/get-started/introductionhttps://www.jianshu.com/p/d4fd176531abhttps://www.bilibili.com/video/BV1wP4y1j7Ja

1. 在项目代码根目录执行安装vuestorybook npx sb init
2. 执行启动storybook npm run storybook
3. 打开项目代码，可以看到项目中增加了 .storybook -----> 增加一些全局配置，如改logo改背景色 src/stories -----> 在其中新建一个 "组件名.stories.js" 来把我们的组件引入到storybook两个文件夹
4. 改背景色： 在.storybook中新建manager.js 添加下段代码，改成黑色主题。

// .storybook/manager.js
import { addons } from'@storybook/addons';
import { themes } from'@storybook/theming';
addons.setConfig({
  theme:themes.dark,
});

5. 改logo 在您的.storybook目录中，创建一个名为的新文件YourTheme.js并添加以下内容：

// .storybook/YourTheme.js  
import { create } from '@storybook/theming';  
export default create({   
base: 'light',   
brandTitle: 'My custom storybook',   
brandUrl: 'https://example.com',   
brandImage: 'https://place-hold.it/350x150', 
});

6. 安装比较有用的插件 npm i @storybook/addon-storysource --dev 在.storybook/main.js addons部分添加"@storybook/addon-storysource" ：

module.exports = {  
 "stories": [     "../src/**/*.stories.mdx",     "../src/**/*.stories.@(js|jsx|ts|tsx)"   ],   
"addons": [    
 "@storybook/addon-links",     
"@storybook/addon-essentials",    
 "@storybook/addon-storysource" // 新增   
] }

7. 添加自定义的selectTree到storybook 新建selectTree.stories.js到src/stories下 内容如下

// 引用咱们自己的组件
import MySelectTree from'../components/tools/SelectTree.vue'; 
// 引用咱们自己的组件依赖的组件
import Antd from'ant-design-vue'
import'ant-design-vue/dist/antd.css';		
import Vue from"vue";						
Vue.use(Antd)				
// https://storybook.js.org/docs/vue/api/argtypes 
exportdefault { 
  title:'组件库/简单树',// 这里决定了左侧目录结构
  component:MySelectTree,
  argTypes:{
    //这里决定了组件props参数类型，并且storybook会自动在UI上匹配对应类型的输入控件
    arrayData: [],
    parentId: {
        type:"string"
        },//具体能加什么设置看这个
    nodeid:{type:"string"},
    alias:{type:"string"},
    jdCount:{
        type:'number'
    },
  }
};
//这个template，本质是一个vue组件，照猫画虎写就行，其中props参数需要跟arcTypes对应
constTemplate = (args, { argTypes }) => ({
  props:Object.keys(argTypes),
  components: { MySelectTree },
  template:
    `<my-select-tree 
    style="height:100%;width:100%;" 
    :arrayData="arrayData" 
    :parentId="parentId" 
    :nodeid="nodeid" 
    :alias="alias" 
    ></my-select-tree>`,
});
// 这个是左侧目录的子页，通过设置不同的args，展示不同场景\
//简单使用:
exportconst1 = Template.bind({});
exportconst1.args = {
    parentId:"groupname",
    nodeid:"name",
    alias:"alias",
.....
}
// 这个是左侧目录的子页，通过设置不同的args，展示不同场景
// 复杂使用
exportconst2 = Template.bind({});
exportconst2.args = {
    parentId:"metariltype",
    nodeid:"bm",
    alias:"mc",
.....
}

8. 将另一个自定义的querytable组件添加进来 发现，报错You may need an additional loader to handle the result of these loaders. 因querytable的style标记了less，storybook 兼容less需要做一些设置：
   参考博客 https://www.jianshu.com/p/d79b9ee6fed0
9. 关于argtype能加什么

const argTypes = { 
    label: { 	
        name: 'label', 
        type: { 
            name: 'string', 
            required: false 
        }, 
        defaultValue: 'Hello', 
        description: 'demo description', 
        table: { 
            type: {summary: 'string' }, 
            defaultValue: { summary: 'Hello' }, 
        }, 
        control: { type: 'text' } 
    } 
}