为什么要引入
一开始我想的是，可能多人多项目开发，把组件展示出来，避免重复造轮子
但后来想想，好像除了展示，没什么其他用处
两个项目如果要用同一个样式的组件，如果没有单独抽出组件库，还是得复制粘贴，用处不大
只能说做组件库的同学用这个比较好用。
还有一个自动化测试的好处（不过我从来没写过测试，暂时还无法体会这个好处）
还有其他用处的话，麻烦老哥们留言区告诉我
如何引入
1
2
| cd 项目目录下
npx -p @storybook/cli sb init
|
会拉一些依赖，并新建两个文件夹
启动
一些问题
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)
|
