Using Storybook with Quasar Storybook core-js

最新推荐文章于 2022-06-27 22:31:16 发布

qq_22266149

最新推荐文章于 2022-06-27 22:31:16 发布

阅读量250

点赞数 1

本文链接：https://blog.csdn.net/qq_22266149/article/details/113251809

版权

一、故事书是一种工具快速开发防弹组件与组件分离到的目录部分用例实现,展示他们的外表,行为和功能的工具来轻松前端工程师与设计师沟通,用户体验和UI专家和PO。你可以开发独立的组件，就像Sketch设计组件一样。

二、为了解释如何集成它们，我将使用@quasar/cli命令Quasar create创建一个简单的Quasar应用程序:

quasar create storybook-quasar

三、并继续使用默认值，因为这只是一个示例。我建议使用yarn作为包管理器。在本例中，我将使用yarn作为包管理器。

正在上传…重新上传取消

四、导航到新创建的目录。

cd storybook-quasar

五、让我们把Storybook整合到我们的类星体项目中。

但有一个问题，在编写本文时，这两者在一起安装时存在一个小问题:它们使用不同版本的core-js

六、问题是Storybook使用core-js@3和Quasar仍然使用core-js@2，这两个有破坏性的变化，所以，由于Storybook有明确的内部依赖core-js@3，不会受到上层范围core-js版本的影响，安装core-js@2为Quasar可用:

npm install --dev core-js@^2.0.0

七、你应该看到这个完美的安装信息。

正在上传…重新上传取消

八、然后，您可以按照storybookjs文档页面上有用的vue指南中的建议继续添加Storybook。

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

九、您应该会看到许多警告和大量已安装的依赖项的依赖项列表。

十、正如故事书安装程序所说:现在你可以用自己的方式编故事书了。

npm run storybook

十一、经过一些编译、加载和检测之后，应该会在浏览器上打开http://localhost:6006。

十二、它甚至有一个简单的例子故事来炫耀:

正在上传…重新上传取消

十三、但是你会注意到，类星体的样式和功能并没有出现在故事中。我们需要将Quasar导入到我们的故事环境中，以使其发挥作用，因为Quasar无法运行故事并注入它所有的魔力。

所以打开你的首选编辑器(我的是VSCode)，让我们改变Storybook设置，添加类星体到其中。

由于相同的设置将在./quasar.conf.js文件和./.storybook/main.js文件之间共享，所以我强烈建议您将公共逻辑提取到分离的文件中以导入这些文件

因此，我创建了一个。/webpack-config.js文件，导出webpack配置函数:

// ./webpack-config.js

module.exports = cfg => {
  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    options: {
      formatter: require('eslint').CLIEngine.getFormatter('stylish')
    }
  })
}

十四、并将其导入到./.storybook/main.js文件中，如下所示:

// ./.storybook/main.js

const webpackFinal = require('../webpack-config.js');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal
};

十五、在故事书的配置对象中，webpackFinal是通过它的配置来扩展webpack功能的函数名。在./quasar.conf.js文件中也应该做类似的修改。导入顶部的函数，并在第69行的build属性中更改extendWebpack。

// ./quasar.conf.js

const extendWebpack = require('../webpack-config.js')

[...]

十六、你的./quasar.conf.js更改应该像这样:

正在上传…重新上传取消

十七、这些更改将使Storybook能够在没有错误的情况下加载vue和js文件。如果你使用sass或其他风格的预处理器，像这样添加到webpack-config中:

// ./webpack-config.js
const path = require('path')

module.exports = cfg => {
  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    options: {
      formatter: require('eslint')
        .CLIEngine
        .getFormatter('stylish')
    }
  })
  cfg.module.rules.push({
    test: /\.s(c|a)ss$/,
    use: ['css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../'),
  })
  return cfg
}

十八、如果你在你的组件上使用别名，最好把这个列表也提取到一个函数上的。/alias .js文件:

const { resolve } = require('path')

const resolveAlias = (rootRelativePath, aliases) => {
  return (accumulator, name) => {
    const aliasPath = aliases[name]

    const resolvedPath = resolve(...rootRelativePath, ...aliasPath)

    return {
      ...accumulator,
      [name]: resolvedPath
    }
  }
}

const aliases = {
  '@': ['src'],
  src: ['src'],
  components: ['src', 'components'],
  tools: ['src', 'tools'],
  mixins: ['src', 'mixins'],
  store: ['src', 'store']
}

module.exports = (...dir) => Object.keys(aliases)
  .reduce(resolveAlias(dir, aliases), {})

十九、然后我们会有我们的别名类星体和故事书。在那之后，你需要在一个新创建的文件中导入类星体框架特性。该文件将导入类星体文件，以在故事书预览iframes中注入。

// ./.storybook/preview.js

// Setup context for Storybook here
import 'quasar/dist/quasar.min.css'
import '@quasar/extras/roboto-font/roboto-font.css'
import '@quasar/extras/material-icons/material-icons.css'
import '@quasar/extras/material-icons-outlined/material-icons-outlined.css'

import 'quasar/dist/quasar.css'
// import 'src/css/app.scss' // if you have an app.scss|sass|styl main file

import Vue from 'vue';
import Quasar from 'quasar';

Vue.use(Quasar, { config: {}, directives: {} });

// run needed boot plugins files down here like `bootFile({ Vue })`

二十、然后重新启动storybook实例，确保它会重新加载:yarn storybook中的所有内容，并检查所有内容是否运行正常。当它在浏览器中打开后，你会注意到Quasar样式接管了它。

二十一、现在你可以用Quasar magic创建一个新的故事来开发你的全新组件:

// ./stories/2-Quasar.stories.js

import { QLayout, QPageContainer, QPage, QSelect, QBtn } from 'quasar'

export default {
  title: 'Quasar'
}

export const Components = () => ({
  title: 'QuasarComponents',
  components: { QLayout, QPageContainer, QPage, QSelect, QBtn },
  template: `<q-layout>
    <q-page-container>
      <q-page class="full-height full-width justify-center items-center q-pa-xl">
        <div class="col-auto">
          <q-input v-model="name" label="Full name" />
          <q-select v-model="role" :options="options" label="User Role" />
        </div>
      </q-page>
    </q-page-container>
  </q-layout>`,
  data () {
    return {
      name: null,
      role: 'User',
      options: ['Admin', 'Supervisor', 'User']
    }
  }
})

二十二、你应该看到这个组件是用Quasar组件渲染的，它的风格令人惊叹。