StoryBook展示组件接入Vue项目示例

WhatStorybook官网隔离UI组件，支持独立调试测试，统一展示项目组件库。Why项目中抽取了很多组件，但并不是集中展示，而是分布在各个业务场景中。对于刚接触项目的开发者来说，业务场景不明确，考虑复用组件不是很直观。怎么最新的构建计划(2020.12.30)官方README连接storybook的组件示例1.三行命令快速启动示例页面npx-p@storybook/clisbinit#startnpmrunstorybook#启动报错提示发现找不到这个安装包后，启动npminstall@vue/babel-preset-app--save-dev成功启动：相比老版本，自动生成文件中的demo更完整，更容易上手.2.在package.json中添加Script{"scripts":{"storybook":"start-storybook-p6006","build-storybook":"build-storybook-o./docs"}}./docs是输出静态文件夹，未指定默认为storybook-static。老版本构建方案（@storybook/vuev5.3.x），参考官方指南，选择Manualsetup1。添加依赖$cnpminstall@storybook/vue-S$cnpminstallvue-loadervue-template-compiler@babel/corebabel-loaderbabel-preset-vue-AddscriptstoS2.package.json{"scripts":{"storybook":"start-storybook"}}3.添加less-loader并注入全局less变量//.storybook/main.jsconstpath=require('path')module.exports={webpackFinal:async(config,{configType})=>{//`configType`的值为'DEVELOPMENT'或'PRODUCTION'//您可以基于此更改配置。//'PRODUCTION'在构建故事书的静态版本时使用。//进行任何你需要的细粒度更改config.module.rules.push({test:/\.less/,use:['style-loader','css-loader','less-loader',{loader:'style-resources-loader',options:{patterns:[path.resolve(__dirname,'../src/assets/styles/variable.less')]}}],include:path.resolve(__dirname,'../')})returnconfig}}4.添加路径别名//.storybook/main.jsconfig.resolve.alias={...config.resolve.alias,'@':path.resolve(__dirname,'../src'),'@com':path.resolve(__dirname,'../src/components')}5.开始$npmrunstorybook最小版本组件项目结构//.storybook/config.jsimport{configure}from'@storybook/vue'configure(require.context('./stories',true,/\.stories\.js$/),module)//.storybook/stories/global.stories.jsimportVuefrom'vue'importTogglefrom'./../../src/components/toggle/index.vue'Vue.component('Toggle',Toggle)exportconsttoggle=()=>``exportdefault{title:'Global'}最低版本结束~接下来把所有的组件写成故事就大功告成了~小插曲几天后，npmrunstorybook无法启动，一直报错，缺少依赖。只需rimrafnode_modules/re-npmi即可完成~AddonsKnobs动态交互显示组件属性安装cnpminstall@storybook/addon-knobs-Sin在.storybook/main.js中导入插件module.exports={addons:['@storybook/addon-knobs/register']}使用//.storybook/stories/panel.stories.jsimport{storiesOf}from'@storybook/vue'从'@storybook/addon-knobs'导入{withKnobs，布尔值，文本}从'@com/jhl-dialog-detail/index.vue'导入JhlDialogDetail'导出默认{标题：'面板'，装饰器：[withKnobs]}exportconstegJhlDialogDetail=()=>({components:{JhlDialogDetail},props:{visible:{default:boolean('visible',true)},title:{default:text('Text','title')},dlgWidth:{default:text('dlgWidth','66%')}},data(){return{data:[{label:'基本信息',children:[{label:'中文名',prop:'labelNameCn',span:8},{label:'英文名',prop:'labelNameEn',span:8},{label:'entity',prop:'entityName',span:8},{label:'一级主题',prop:'firstThemeName',span:8},{label:'二级主题',prop:'seconddThemeName',span:8},{label:'三级主题',prop:'thirdThemeName',span:8}]},{label:'处理信息',children:[{label:'更新时间',prop:'labelModifiedTime',span:8},{label:'企业主',prop:'businessOwnerErp',span:16,render:'erp'},{label:'calibre',prop:'processDesc',跨度:24,render:'html'}]},{label:'customarea',slot:'quality'}],detail:{'labelNameCn':'zmTest','labelNameEn':'zmTest','entityName':'user','firstThemeName':'人口属性','secondThemeName':'自然属性','thirdThemeName':'年龄','labelModifiedTime':'2020-05-1400:00:00','businessOwnerErp':'zhaozimu','processDesc':'

213来自X表，源表关联字段X，标签过滤规则为XX，时间窗口近X天，标签处理逻辑为XX，标签覆盖为X，标签更新周期为XX