StorybookforVue介绍：storybook是一个可视化的组件展示平台，允许开发者独立创建可交互展示的UI组件，可组织高效构建UI组件。官网安装：npminstall@storybook/vue-S修改package.json，配置一个脚本。{"scripts":{"storybook":"start-storybook-p6006"//指定运行在6006端口}}修改目录结构：在项目根目录下新建.storybook文件夹，新建main.jsinsideFile|----.storybook|--main.js,....|----src|----package.json在main.js中写入内容：module.exports={stories:["../src/stories/**/*.stories.js","../src/stories/*.stories.js"],//在src下注册XXX.stories.js}在src中创建一个文件夹下新建故事，并创建对应的XXX.stories.js。一个文件夹代表一个大目录，可以创建一个小目录。//test.stories.jsimportTestfrom'../components/Test'exportdefault{title:'TestComponent'}//大目录名exportconsttoStorybook=()=>({components:{Test},//注册组件模板:''//调用})toStorybook.story={name:'Test'//组件目录名}运行：npmrunstorybook此时如果没有意外，storybook已经运行顺利，界面出现。addon-knobs插件-动态交互显示组件属性安装：npminstall@storybook/addon-knobs-Simport:addonsinmain.jsimportthispluginmodule.exports={stories:["../src/stories/**/*.stories.js","../src/stories/*.stories.js"],addons:['@storybook/addon-knobs/register']}使用：在test.stories.js中配置使用：import{withKnobs,text,color,boolean}from'@storybook/addon-knobs'import...exportdefault{title:'TestComponent',decorators:[withKnobs]}...组件调用：exportconsttoStorybook=()=>({components:{Test},//注册组件template:''//调用props:{text:{default:text('Text','HelloStorybook')},color:{default:color('color','#000')},show:{default:boolean('是否显示',true)}}})作用：此时界面下方或右侧会出现一个面板，可以在面板中动态配置修改相关属性和预览实时。addon-actions插件：显示事件触发效果，查看传递值。安装：npminstall@storybook/addon-actions-Simport:Addonsinmain.js引入这个插件：...addons:['@storybook/addon-knobs/register','@storybook/addon-actions/register']...使用：在XXX.stories.js中引入import{action}from'@storybook/addon-actions...exportconsttoStorybook=()=>({components:{Test},//注册组件模板:'',//调用方法:{showClick:action('showClick')}...})...效果：此时界面会在下方或上方出现一个操作面板，当showClick事件被触发时，操作面板会打印并显示传递的值内容。
