我的GitHub
0%

无星的前端之旅(六)—— Vue引入Storybook(一)

为什么要引入

一开始我想的是,可能多人多项目开发,把组件展示出来,避免重复造轮子

但后来想想,好像除了展示,没什么其他用处

两个项目如果要用同一个样式的组件,如果没有单独抽出组件库,还是得复制粘贴,用处不大

只能说做组件库的同学用这个比较好用。

还有一个自动化测试的好处(不过我从来没写过测试,暂时还无法体会这个好处)

还有其他用处的话,麻烦老哥们留言区告诉我

如何引入

1
2
cd 项目目录下
npx -p @storybook/cli sb init

会拉一些依赖,并新建两个文件夹

1
2
.storybook
stories/xxx

启动

1
npm run storybook

一些问题

1.项目中有alias重命名了目录怎么办?

例如:

1
2
3
4
5
6
7
8
9
10
11
//vue.config.js
module.exports = {
//省略
....
configureWebpack: {
resolve: {
alias: {
'@': resolve('src'),
},
},
},

在.storybook/main.js中一样新增即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//.storybook/main.js
const path = require('path')
module.exports = {
//省略
.......
webpackFinal: async (config) => {
config.resolve = {
...config.resolve,
alias: {
...config.resolve.alias,
'@': path.join(__dirname, '../src'),
}
}
//省略
.......
return config
}
};

2.项目中用到了less/scss等怎么办?

因为基于vue.cli4版本的项目,脚手架内置了cssloader,因此什么都不用做。
但是storybook还是需要手动处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//.storybook/main.js
module.exports = {
//省略
....
webpackFinal: async (config) => {
//省略
......
//这里只写less的,scss同理改一下配置即可
config.module.rules.push({
test: /\.less$/,
loaders: ["style-loader", "css-loader", "less-loader"],
include: path.resolve(__dirname, '../')
});
//省略
......
return config
}
};

3.Vue项目中引入了element-ui,大量组件基于element-ui封装的,怎么让storybook能够读取到element-ui的组件?

在.storybook文件夹下新建一个config.js文件,引入即可

1
2
3
4
5
//.storybook/config.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
我是阿星,阿星的阿,阿星的星!