无星的前端之旅（六）—— Vue引入Storybook（一）

为什么要引入

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

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

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

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

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

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

如何引入

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

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

.storybook
stories/xxx

启动

npm run storybook

一些问题

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

例如：

//vue.config.js
module.exports = {
//省略
....
configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
  },

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

//.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还是需要手动处理

//.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文件,引入即可

//.storybook/config.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)