Storybook: Vue:添加Vue3支持

创建于 2020-05-05  ·  61评论  ·  资料来源: storybookjs/storybook

我只是试图用Vue3(测试版)应用运行故事书,但出现了一些错误……一些我能够解决合并Webpack配置并推送Vue3加载器插件的问题:

const wltConfig = require('../apps/webpack-dev');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
    stories: ['../**/*.stories.[tj]s'],

    webpackFinal: (config, ...args) => {
        config.plugins.push(new VueLoaderPlugin());
        return { ...config, module: { ...config.module, rules: wltConfig().module.rules } };
    }
};

我仍然在外壳中收到警告和错误:

WARN   Failed to load preset: "/home/tobi/Projects/modul/portal/client/node_modules/@storybook/vue/dist/server/framework-preset-vue.js"
ERR! Error: Cannot find module 'vue-loader/lib/plugin'

–但是,故事书会构建并打开浏览器。 在那里,我陷入了此错误消息:

Uncaught TypeError: _vue.default is not a constructor
    at Object../node_modules/@storybook/vue/dist/client/preview/render.js (render.js:43)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object../node_modules/@storybook/vue/dist/client/preview/index.js (index.js:24)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)
    at Object.<anonymous> (index.js:55)
    at Object../node_modules/@storybook/vue/dist/client/index.js (index.js:59)
    at __webpack_require__ (bootstrap:848)
    at fn (bootstrap:150)

有没有比这更好的方法了? 我对故事书一共n00b,因此希望获得任何指教或帮助。 (我搜索了vue3的问题,但没有任何有意义的结果,至少据我所知。)

P1 vue feature request help wanted todo

最有用的评论

是的,希望它将在6.2中着陆。 还在寻找实现它的人!

所有61条评论

Automention:嘿@ backbone87 @pocka ,您已被标记! 你能帮忙吗?

嗯..我们可能需要做一个vue3预设

嗯..我们可能需要做一个vue3预设

我能提供帮助吗?

到目前为止我尝试过的操作(尽管仅在位于节点模块目录中的dist文件中):

vue / dist / server / framework-preset.js

  • VueLoaderPlugin现在是vue-loader的出口
  • vue-esm.js替换vue.esm-browser.js
11c11
< var _plugin = _interopRequireDefault(require("vue-loader/lib/plugin"));
---
> var _plugin = _interopRequireDefault(require("vue-loader").VueLoaderPlugin);
34c34
<         vue$: require.resolve('vue/dist/vue.esm.js')
---
>         vue$: require.resolve('vue/dist/vue.esm-browser.js')

vue / dist / client / preview / render.js

现在,应用程序组件已使用createApp()实例化,所有配置等都需要应用于实例

```差异
21c21

<var _vue = _interopRequireDefault(require(“ vue”));

var _vue = _interopRequireDefault(require(“ vue”)。createApp);
43c43

<var root = new _vue [“ default”]({

var root = _vue [“ default”]({
67c67

<_vue [“默认”] .config.errorHandler = showException;

root.config.errorHandler = showException;
88c88

<root。$ mount('#root');

root.mount('#root');

```

我现在坚持使用vue/dist/client/preview/index.js因为在那里需要应用程序实例,例如,定义extends属性–似乎只有通过适当的故事书构建才能实现……

Screenshot-2020-05-11-10:41:14

希望这些婴儿步骤会有所帮助。

嗨,大家好! 似乎最近在这个问题上没有发生太多事情。 如果仍有问题,意见或错误,请随时继续讨论。 不幸的是,我们没有时间解决每个问题。 我们随时欢迎捐款,因此,如果您想提供帮助,请向我们发送请求请求。 不活跃的问题将在30天后关闭。 谢谢!

磕碰

@pksunkara @graup @ Aaron-Pool有人有时间去研究这个吗? 如果发生了我们需要的重大更改,并且我们可以将其更改为6.0,那么现在是最佳时机!

在发布Vue3之后,我们仍然需要相当一段时间来支持Vue2。 我们需要检查的一件事是,我们是否可以以某种方式同时支持它们两者。

另外考虑到Vue3尚未超出Beta版,并且假设我们希望将故事书v6淘汰,我将vue3支持推迟到v6版本之后

我打算尽快进行调查,但无法提供预计到达时间。 还没有机会尝试Vue 3。

我同意@pksunkara的观点,这对于6.0来说并不紧急,因为它仍然是beta。

谢谢@graup。 我也同意这并不紧急-不应期望我们支持Storybook中未发布的软件。 我唯一关心的是,例如,我们在7月发布6.0,在8月发布Vue3,在9月支持它,并且发现需要进行重大更改。 没有十月份的主要版本颠簸,我们就无法获得突破性的变化,而应该在2021年6月发生。

我刚才只是想让不和谐的频道亮起一些声音,说明我该如何尝试使其与Vue 3配合使用,这将需要一个新的预设,因为引导框架的逻辑有些不同。认为vue文件夹中的当前代码可以与vue 3一起使用。

我明白@shilman。 让我澄清一点,因为看起来我并没有正确理解我的观点。

根据我对@ p3k的尝试和@milewski的评论的了解,我们不仅需要一个新的预设,而且还需要在@storybook/vue包中进行重大更改。

但是我们仍然需要相当长一段时间来支持Vue v2,并非所有人都会转向Vue v3。 因此,除非我们不想说不再支持Vue v2,否则最好创建一个新的@storybook/vue3软件包。

但是,如果我们决定取消对Vue v2的支持,那么可以,我同意我们应该在Storybook v6之前进行重大更改。

@pksunkara您提出的解决方案听起来很棒。 💯

我不认为我们会在短期内切断vue2支持,因此我们希望并行运行这两个软件包,并可能在将来的主要发行版(7.0?8.0?从不?)中进行全面转换。 在发布两个软件包之后,我们可以使用npm下载统计信息来确定何时才是删除Vue2支持的正确时间。 WDYT?

cc @ndelangen

我给了它一个镜头: https :

但是,有一段代码我不确定它应该做什么https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 -L58我以前从未真正使用过故事书。.我只是想现在就开始在vue3项目中使用它。

因此,据我所知,按照本指南中的说明,我可以成功地使用vue 3渲染了组件,从而使https://storybook.js.org/docs/guides/guide-vue/ ...关闭...也许需要使用某些特定的插件? 有人可以告诉我该代码对哪个config / addon / plugin有用吗? 因此我可以找到一种方法来解决此问题,并且有人可以从我的版本中获得启发并正确遵循代码过程以在此处发布新的预设?

很棒的工作@milewski-超级刺激!!!! 🚀

我弄清楚了该代码的作用..有必要应用旋钮提供的选项..我已经解决了..您可以尝试一下,因为您似乎使用故事书的时间更长了? @ p3k

您可以通过运行以下命令进行安装:

git clone --branch vue3 https://github.com/milewski/storybook.git
cd storybook
yarn bootstrap --core
yarn build (select vue)
cd app/vue
yarn link

then cd to your project and:

yarn link @storybook/vue

非常感谢您的努力@milewski –我只是尝试您的分支并在运行yarn bootstrap --core时出错:

…
$ node ../../scripts/prepare.js
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/mithril/dist/src/client/index.d.ts
Built: @storybook/[email protected]
lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna ERR! yarn run prepare stdout:
$ node ../../scripts/prepare.js
src/server/framework-preset-vue.ts(5,17): error TS4058: Return type of exported function has or is using name 'VueLoaderPlugin' from external module "/home/tobi/Projects/modul/storybook/app/vue/node_modules/vue-loader/dist/plugin" but cannot be named.
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/globals.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/types.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/render.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/util.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/preview/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/client/index.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/options.d.ts
TSFILE: /home/tobi/Projects/modul/storybook/app/vue/dist/server/build.d.ts
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :  
ERR! FAILED to compile ts: @storybook/[email protected] 
error Command failed with exit code 1.

lerna ERR! yarn run prepare exited 1 in '@storybook/vue'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

嗯打字稿出现问题。 我只是禁用ts进行检查..从我的分支中获取最新代码,然后重试

是的,现在命令运行没有错误。

re yarn build (select vue)我收到消息_storybook WARN build没什么可建的!_ –正确吗?

在出现的交互式菜单上,否,您需要按空格键进行选择

image

啊! 对不起,我不好,可以。

现在它运行良好,我可以使用第一个vue3组件运行精彩的故事书! 再次感谢@milewski

@milewski太好了! 刚刚测试,它似乎可以工作。

据我所知,唯一的重大突破是进口和createApp东西,对吗? 也许可以编写向后兼容的代码来检查已安装的vue版本并自动执行正确的操作? 然后,我们可以避免使用两个版本的预设。

我尝试更新我们的vue示例,但似乎那里使用的某些内容还没有vue3版本。 通常,似乎仍然有很多beta和不匹配的程序包,因此最好尝试一下后再尝试更新整个故事书的代码库,包括附加组件等。将有很多工作要做。

据我所知,最大的重大变化是导入和createApp的东西,对不对?

是的,我也会这么说。

从我最初尝试过的东西(请参阅我的初始评论)开始,我保留的只是配置合并-不再需要VueLoaderPlugin的推送了,由于@milewski的贡献,我认为:cat:

如文档所述,(重新)初始化故事书很简单: npm install @storybook/vue --save-dev ; 我什至不需要安装任何其他对等依赖项(可能是由于无论如何我们已经为我们的项目安装了它们)。

然后,我们可以避免使用两个版本的预设。

我认为那将是非常可取的,甚至可能使下一个故事书版本中的更改成为可能……?

关于vue示例,也许我可以帮助创建它们(某些)的vue3兼容版本? (不过,我不是Vue专家。)

@graup

据我所知,最大的重大变化是导入和createApp的东西,对不对? 也许可以编写向后兼容的代码来检查已安装的vue版本并自动执行正确的操作? 然后,我们可以避免使用两个版本的预设。

我也遇到了反应性问题,我尝试遵循当前版本设置/扩展对象的方式,但是vue3不再跟踪该类型对象的更改,特别是在render函数内部创建的对象,我不得不使用ref创建引用()或react()触发更新。

我尝试更新我们的vue示例,但似乎那里使用的某些内容还没有vue3版本。 通常,似乎仍然有很多beta和不匹配的程序包,因此最好尝试一下后再尝试更新整个故事书的代码库,包括附加组件等。将有很多工作要做。

我尝试以那个作为起点,但是即使您已经在packagejson上明确设置了版本,它也尝试安装vue2东西...如果安装了vue-template-compiler或旧的vue加载器,vue 3根本不起作用..那里可能有一些依赖关系正在导入那些

@ p3k

如文档所述,(重新)初始化故事书很简单:npm install @ storybook / vue --save-dev; 我什至不需要安装任何其他对等依赖项(可能是由于无论如何我们已经为我们的项目安装了它们)。

我认为这是因为我将vue3和vue-loader ^ 16包含在packages.json中

如果确实需要@storybook/vue3软件包,我会好的。

仅供参考,我刚刚修复了Storybook Vue2代码中的一个核心渲染错误: https :

这将导致addon-knobsaddon-controls使用“强制刷新行为”来实际强制刷新。 我不确定它是否对Vue3代码有影响,但是如果您正在测试,则仅供参考,请合并到该更新中。

也适用于分叉版本!

仅投入两分钱,看起来vite将成为vue 3的_defacto_工具,就像vue-cli用于vue 2一样。我们有几个用户在使用时必须两次进行所有配置设置有问题vue-cli带故事书,probalem @pksunkara用他的vue-cli故事书插件很好地解决了问题。 如果可能的话,我们应该确保我们设置的任何预设/程序包都能与vite完美无缝地协同工作。

编辑:我只是意识到这可能很棘手,因为Vite在后台使用汇总而不是webpack😬

我想我真的应该考虑看看Storybook是否可以只使用用户的webpack / build系统,而根本不需要它自己的配置。

除了想法,我想我还没有检查过vite,但也许他们会适应vue cli插件系统

我们不认为或不希望Vite成为“工具”。 大量项目将需要webpack提供的功能和灵活性,而vite的目标不是满足所有这些需求。

因此,我暂时不会为vite担心,当然也不会为故事书本身提供Vue3支持。

@LinusBorg之所以专门提出这个问题,是因为我们经常遇到与Vue 2类似的问题,其中90%的社区使用vue-cli创建了他们的项目,而且故事书无法检测和使用Vue- cli管理的构建系统给Vue用户造成了很大的混乱。

当人们试图将故事书集成到基于vite的项目中时,您是否看不到我们在vite中遇到类似问题?

不是,不是与Vue CLI设置相比,Vite本身是非常准系统。

Vite提供的内容可以通过任何具有处理.vuets(x).css文件的规则的简单Webpack配置来涵盖。 尽管它可扩展的,但该API非常接近金属,因此我们不希望人们左右添加自定义转换和内容。

它没有设计广泛的插件API。 如果人们需要花哨的自定义魔术来完成项目,那么他们很可能迟早会需要Webpack,因此请使用Vue CLI。

Vite并未将“任何用例的可扩展性”视为其目标之一。

因此,我想说任何Vite项目通常都应该与Storybook / Vue一起使用,只要它的Webpack配置涵盖了我列出的基本规则,我认为它确实可以

@LinusBorg好的,这很有道理。 感谢您的输入always非常感谢Core Vue团队的任何指导!

感谢大家在故事书中所做的工作,迫不及待想将其用于我的Vue 3项目:)

由于Vue3现在处于RC中,因此有必要重新评估是否应考虑向v6添加Vue3支持。

@hollandThomas我们已经是中RC了,所以vue3必须在6.1中出现。 就是说,我们应该在几周内发布第一个6.1 Alpha,因此,如果有人想将它们放在一起,我敢肯定会有很多观众对此感到渴望!

我们可以使用或贡献任何活跃的分支机构来帮助准备好Vue 3支持吗?

在我们的组织中,我们的Vue ui组件库涉及我们所有的Vue项目,因此这是阻止我们试用Vue 3的首要任务之一,并且我们很乐意帮助您进行测试或迁移(如果需要)。 我猜想其他人在同一条船上。

文档https://v3.vuejs.org/guide/migration/introduction.html#overview中现在还有一个v2-> v3迁移指南

@milewski @graup @ Aaron-Pool @elevatebart我们现在处于6.1-alpha版本。 有人想为此做一个公关吗?

@ p3k谢谢。 只是根据您的描述创建的,对我来说似乎是工作,并没有测试太多功能
webpack配置可以轻松地在main.js中修复,例如

webpackFinal: async (config, {configType}) => {

    config.resolve.alias['vue$'] = 'vue/dist/vue.esm-browser.js'

    return config
  }

和装载机可以

与render.js卡住一点如何在.storybook中进行配置

@shilman这个版本'6.1.0-alpha.1'与vue3兼容吗?

不确定,但看起来不行。 仍支持第二个版本。

没呢还没。 根据以上我的

@shilman我仍然没有使用Vue 3的机会😞我的工作有一个本月基于Vue 2的产品发布的截止日期,所以我没有时间涉猎。

所以任务基本上是

  • 将app / vue复制到app / vue3
  • 确保修改所有框架参考
  • https://github.com/milewski/storybook/tree/vue3中应用@milewski完成的更改
  • 修改或创建新的厨具示例
  • 尝试使用其他Story / vue3组件定义方法组合,并检查它们是否有效

@chartinger听起来像是通往我的最直接途径。 如果我们能弄清楚如何根据所使用的vue版本有条件地应用这些更改并维护一个软件包,那会更好。

我到目前为止在https://github.com/chartinger/storybook/tree/app-vue3中进行了视图实验(需要对上述fork进行一些更改):

好:

  • 基本的vue3组件将呈现
  • 来自控件的更改是实时更新的

坏:

  • 似乎无法加载类装饰的vue组件
  • 不知道旋钮是否有效,我想用vue3学习故事书,因此没有演示代码或过去要测试的项目
  • 不会自动检测道具的控制属性

其他:

  • 在StoryMeta中导入组件无济于事,必须在Story中
  • 现在,全局组件已绑定到应用程序实例,是否可以将其提供给.storybook / preview.js或其他方式? (需要吗?)

@elevatebart vue3vue-docgen-api状态如何? ☝️

它是整体兼容的。 但是尚未处理设置功能中的事件发射。

为此,我仍然需要一种高性能的方法来输入设置功能并检测那些发射。

由于功能可以存在于多个文件中,因此可能会花费一些时间。

@chartinger想通过一些实验来更新您的分支吗? 我想深入研究一下您发现的“控件属性的自动检测”问题,并且我可能可以让某人研究类修饰的问题。

@shilman我在vue-cli的基础上添加了一个vue3示例,并将按钮示例迁移到了composition和class api(我在代码中将其称为批注,该批注必须更改,但现在会做)。 这次以某种方式加载了类api组件。

对于测试,请不要忘记分别对npm linknpm link @storybook/vue3进行测试。

仅供参考:我刚刚将@andoshin11/storybook-vue3到npm,请随时尝试👇

https://www.npmjs.com/package/@andoshin11/storybook -vue3

顺便说一句,Vue 3正式退出测试版。

PS。 感谢您对故事书@ andoshin11的支持/版本

// edit:只需阅读主题和出色的人..我可能会对此进行尝试:)

大家都很棒。 我很乐意将其纳入6.1版本。 有人愿意接受吗? 这将是一个非常高的影响力贡献。 理想情况下,我们在同一程序包中支持vue3和vue2,进行一些自动检测或用户配置以找出要使用的版本。

这项工作的范围:

  • []进行必要的更改以支持vue3
  • []为vue3的vue项目添加e2e测试(我们已经有一个模板,应该不太难)
  • []更新文档
  • []可用于错误修复和支持,因为我们在预发行版中对其进行了推广

如果您想解决此问题,请与我们联系,我们已经建立了#vue3临时频道进行讨论! https://discord.com/invite/UUt2PJb

由于Vue 3已超出Beta版,并且将在几个月后以latest标签提供,因此故事书中是否有支持Vue 3的ETA?

另外,将CHANGELOG@storybook/vue - https://github.com/storybookjs/storybook/tree/master/app/vue会很有帮助,这样我们就可以了解关于@storybook/vue版本的更改。

@palerdot我很想获得vue3支持,作为Storybook 6.1的一部分。 寻找某人对此做出贡献-您感兴趣吗? https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200547

至于CHANGELOG,我们为整个monorepo有一个,而为每个框架再维护一个是不现实的。 但是,我将考虑在每个发行公告中进行特定于框架的摘要,这可能是您作为用户实际想要的。

@shilman

寻找某人对此做出贡献-您感兴趣吗?

不幸的是,我目前无法为此付出时间(更不用说我对storybook代码库不太熟悉)。

我将考虑在每个发行公告中进行特定于框架的摘要,这可能是您作为用户实际想要的。

谢谢。 那会更好。 你是对的。 作为用户,我只想知道每个版本都支持什么框架(例如Vue 3)。 因此,将该信息添加到主CHANGELOG中将很有帮助。

只是删除一个数据点,我也希望Vue3也可以与故事书一起使用。 也许某些Vue核心/工具开发人员可以在这里提供帮助,例如@Akryum

@shilman
我想我找到了适用于vue2和vue3的故事书的解决方案。 如果希望找到时间,我会尝试为其做POC ;-)。 不保证。 ^^
但是我想我已经分享了我的想法。
我发现Vue Demi似乎很有希望解决vue2和vue3使用一个软件包的问题。
当然,使用组合api仍需要完成工作。 但是我认为,有了这一方案,它就朝着有希望的方案迈出了一步

13224同样的问题。 @shilman我们应该等待下一个Storybook版本中的Vue 3支持吗?

是的,希望它将在6.2中着陆。 还在寻找实现它的人!

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

shilman picture shilman  ·  3评论

wahengchang picture wahengchang  ·  3评论

ZigGreen picture ZigGreen  ·  3评论

miljan-aleksic picture miljan-aleksic  ·  3评论

rpersaud picture rpersaud  ·  3评论