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

2,158 阅读1分钟

为什么要引入

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

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

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

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

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

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

如何引入

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)