使用storybook搭建私有組件庫

時間 2019-12-04

標籤使用 storybook 搭建私有組件简体版

原文原文鏈接

（一）私有組件庫搭建

彙總既有項目中的通用組件

項目地址css

爲何搭建私有組件庫

可複用跨項目能夠使用同一套私有組件庫
方便維護如需組件調整只須要修改組件庫不須要跨項目重複修改

添加新組件原則

組件應先存在於具體項目中，通過重複驗證後再抽象、沉澱到本組件庫中
不涉及國際化、ajax 請求等業務邏輯

項目構建

1.新建 package.json

cd XXX[項目名]
npm init

2.Storybook for Vue

參考文檔Storybook for Vuevue

能夠選擇自動搭建 storybook 項目也能夠使用手動搭建node

自動搭建

npx -p @storybook/cli sb init --type vue

手動搭建

安裝依賴

# 安裝storybook
npm install @storybook/vue --save-dev

# 安裝vue 以及須要的loader
npm install vue --save
npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

在 package.json 添加啓動項

{
  "scripts": {
    "storybook": "start-storybook"
  }
}

建立 storybook 的配置文件

import { configure } from '@storybook/vue'

function loadStories() {
  require('../stories/index.js')
  // You can require as many stories as you need.
}

configure(loadStories, module)

建立測試文件 ./stories/elButton.stories.js

// 引入了 element-ui 能夠針對 el-button 組件測試項目是否正常
import Vue from 'vue'
import { storiesOf } from '@storybook/vue'

storiesOf('elButton', module)
  .add('with text', () => '<el-button>with text</el-button>')
  .add('with emoji', () => '<el-button>😀 😎 👍 💯</el-button>')
  .add('as a component', () => ({
    template: '<el-button :disabled="true">rounded</el-button>'
  }))

運行查看效果

npm run storybook

提取私有組件

建立測試文件 ./stories/changeTime.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="400px"
    class="change-time-dialog"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form :model="form" ref="form" style="margin-bottom:30px">
      <el-form-item style="margin-bottom:0px !important">
        <el-date-picker
          type="date"
          size="medium"
          value-format="yyyy-MM-dd"
          :placeholder="`請選擇${title}`"
          v-model="form.time"
          style="width:94%"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="handleConfirm('form')"
        :disabled="disable"
        >肯定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      form: {
        time: ''
      },
      disable: false
    }
  },

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    time: {
      type: String,
      default: ''
    },
    typeTime: {
      type: String,
      default: 'start'
    },
    title: {
      type: String,
      default: ''
    },
    referTime: {
      // 參考時間
      type: [Date, String],
      default: ''
    }
  },

  mounted() {
    this.show = this.visible
    this.form.time = this.time
  },

  methods: {
    handleClose() {
      this.$refs.form.resetFields()
      this.show = false
      this.$emit('update:visible', false)
      this.$emit('update:time', '')
    },

    handleConfirm() {
      if (this.typeTime === 'start') {
        if (
          new Date(this.form.time).getTime() >
          new Date(this.referTime).getTime()
        ) {
          this.$message.warning('起租時間必須小於等於退租時間')
          return
        }
      }
      if (this.typeTime === 'end') {
        if (
          new Date(this.form.time).getTime() <
          new Date(this.referTime).getTime()
        ) {
          this.$message.warning('退租時間必須大於等於起租時間')
          return
        }
      }
      this.$emit('changeTime', this.typeTime, this.form.time, this.clearData)
    },

    clearData() {
      this.show = false
      this.disable = false
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
div.el-form-item__error {
  top: 80% !important;
}
.change-time-dialog /deep/ .el-dialog__body {
  padding-bottom: 0px !important;
}
</style>

建立測試文件 ./stories/changeTime.stories.js

import Vue from 'vue'
import { storiesOf } from '@storybook/vue'
import changeTime from './changeTime'

storiesOf('changeTime', module).add('修改時間', () => ({
  components: { changeTime },
  template: `<div>
  <h4>選擇時間：{{ curTime }}</h4>
  <el-button @click="handleChangeTime">選擇起租時間</el-button>
  <change-time :title="changeTimeTitle"
  :time.sync="curTime"
  v-if="changeTimeVisiable"
  :typeTime="changeTimeType"
  :referTime="referTime"
  ref="changeTime"
  :visible.sync="changeTimeVisiable"
  @changeTime="changeTime" />
  </div>`,
  data() {
    return {
      changeTimeTitle: '起租時間',
      curTime: '2019-06-25',
      changeTimeType: 'start',
      changeTimeVisiable: false,
      referTime: ''
    }
  },
  methods: {
    changeTime(type, time, fn) {
      this.curTime = time
      fn()
    },
    handleChangeTime() {
      this.changeTimeVisiable = true
    }
  }
}))

scss 報錯，es6 語法報錯

解決 css 問題

// 安裝相關loader
npm i -D node-sass less-loader css-loader style-loader

配置 webpack.config.jswebpack

const path = require('path')

const pathResolve = p => path.resolve(__dirname, '../', p)

module.exports = ({ config, mode }) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': pathResolve('stories'),
    '~': pathResolve('node_modules')
  }
  config.module.rules.push({
    test: /\.scss$/,
    include: path.resolve(__dirname, '../stories'),
    use: ['style-loader', 'css-loader', 'sass-loader']
  })
  config.module.rules.push({
    test: /\.less$/,
    include: path.resolve(__dirname, '../stories'),
    use: ['style-loader', 'css-loader', 'less-loader']
  })
  if (process.env.NODE_ENV === 'production') {
    config.output.filename = 'bundle.[name].js'
    config.optimization.splitChunks.automaticNameDelimiter = '.'
    config.optimization.runtimeChunk = {
      name: entrypoint => `runtime.${entrypoint.name}`
    }
  }
  // console.log(config);
  return config
}