Storybook: Frontend workshop for UI developmentstorybook.js.org/
Storybook 是一种开源工具，可帮助开发人员独立于应用程序的其余部分构建、测试和展示其组件。它提供了一个用户界面，允许您以交互方式开发和测试您的组件。在这篇博文中，我们将为您提供 Storybook 初学者指南，并向您展示如何使用它来开发您的组件。
为什么使用Storybook？
1、为每个组件提供一个独立的页面，可以快速展示或调试组件。
2、管理多个组件，按需展示和测试，帮助开发者更好地理解和组织组件库。
3、可以用各种状态（例如不同的props和事件触发）的快照测试组件，保证在不同状态下组件的正确性。
4、提供一些插件（如addon-knobs）可以方便地测试组件的可配置性。
5、可以将组件的使用文档集成在一起，让组件的使用者更好地理解组件的用法和API。
Storybook是一个非常实用的工具，它可以帮助前端开发者更好地管理和测试组件，同时提高开发效率和代码质量。
一、构建一个新项目安装 Storybook
构建一个新项目
node 16.20.0
npm 8.19.4
Vue create vue2-storybook-module
也可以直接使用 npx -p @storybook/cli sb init --type vue 来构建。
因为要安装vue2 版本，所有采用的是 Vue create vue2-storybook-module 安装。
进入项目目录
cd vue2-storybook-module
运行项目
npm run serve
关联git 仓库
git remote add origin 远程仓库链接地址
远程仓库链接地址在github上找。
本地编辑代码后提交至远程分支。
git push -u origin master
安装 Storybook
npx sb init
二、启动 Storybook
- 安装后项目目录后，项目多出两个文件夹.storybook和stories
├── .storybook // storybook配置相关文件
│ ├── main.js // 入口文件，配置插件，webpack等
│ └── preview.js // 其他配置信息
│
└── src
└── stories // 组件story书写的核心位置
启动项目
npm run storybook
打包项目
npm run build-storybook
三、组件封装
注册组件
因为我们可能会封装多个组件，所以在src下面新建一个package.js来注册要封装的组件。
storybook 安装后官网已经给准备了几个示例组件，直接写路径就行。
// 引入封装好的组件
import MyButton from "./stories/Button.vue";
import MyHeader from "./stories/Header.vue";
import MyPage from "./stories/Page.vue";
const coms = [MyButton,MyHeader,MyPage]; // 将来如果有其它组件,都可以写到这个数组里
// 批量组件注册
const install = function (Vue) {
coms.forEach((com) => {
Vue.component(com.name, com);
});
};
export default install; // 这个方法以后再使用的时候可以被use调用
组件打包
到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。
修改我们项目得package.json文件，配置打包命令：
"package": "vue-cli-service build --target lib ./src/package.js --name my-storybook-ui --dest my-storybook-ui"
打包命令解释：
--target lib 关键字 指定打包的目录
--name 打包后的文件名字
--dest 打包后的文件夹的名称
执行打包命令
npm run package
打包执行完成后我们项目目录下就会多出一个 my-storybook-ui 文件夹，存放的是打包后的文件。
四、发布到npm
初始化package.json
想要发布到 npm 仓库，我们还得在 my-storybook-ui 文件夹下初始化一个package.json文件。
进入my-storybook-ui 目录
cd my-storybook-ui
初始化配置
npm init -y
由于这里我们只是测试，所以我不需要更改package.json文件，如果是生产的话，最好加上版本描述和版本号等等，其中name字段便是我们上传到npm仓库后的名称。
发布到npm仓库
- 注册账号
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。
- 设置npm源
有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下：
npm config set registry=https://registry.npmjs.org
- 添加npm用户
进入 my-storybook-ui 目录，添加npm用户，执行命令：
npm adduser
这里会让你填写用户名等等，如果之前设置过即可跳过此步。
- 发布npm
在 my-storybook-ui 目录下执行命令：
npm publish
如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm光网上查看自己发布得npm包：
五、使用组件
安装组件
npm install my-storybook-ui --save-dev
注册组件
main.js 文件中注册全局组件
import MyStorybookUi from 'my-storybook-ui'
import 'my-storybook-ui/my-storybook-ui.css'
Vue.use(MyStorybookUi)
启动项目
npm run serve
六、源码
git 地址：github.com/you-hei-mi/…
组件地址：my-storybook-ui - npm (npmjs.com)
组件文档：Configure your project - Docs ⋅ Storybook (you-hei-mi.github.io)
以上是入门篇的所有内容，如果想进一步了解更多，可以查看进阶篇。↓↓↓
