Storybook: Vue: Vue3 समर्थन जोड़ें

को निर्मित 5 मई 2020 · 61टिप्पणियाँ · स्रोत: storybookjs/storybook

मैंने बस Vue3 (बीटा) ऐप के साथ स्टोरीबुक चलाने की कोशिश की और कुछ त्रुटियां मिली ... कुछ मैं अपने वेबपैक कॉन्फ़िगरेशन को मर्ज करने और 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

स्रोत

p3k

👍23

सबसे उपयोगी टिप्पणी

हां, उम्मीद है कि यह 6.2 में उतरेगी। अभी भी किसी को इसे बनाने के लिए देख रहे हैं!

shilman 23 नव॰ 2020

👍23 ❤10

सभी 61 टिप्पणियाँ

आटोमेशन: अरे @ backbone87 @pocka , आपको टैग किया गया है! क्या आप यहां हाथ दे सकते हैं?

github-actions[bot] 5 मई 2020

हम्म .. हम एक vue3 पूर्व निर्धारित करने की आवश्यकता हो सकती है

pksunkara 5 मई 2020

👍8

हम्म .. हम एक vue3 पूर्व निर्धारित करने की आवश्यकता हो सकती है

क्या मैं मदद कर सकता हूँ?

p3k 7 मई 2020

❤4

मैंने अब तक क्या प्रयास किया है (केवल नोड मॉड्यूल डायरेक्टरी में स्थित डिस्ट फाइल्स में, हालांकि):

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 / प्रीव्यू / रेंडर .js

ऐप कंपोनेंट को अब createApp() साथ त्वरित किया जाता है, सभी कॉन्फ़िगरेशन आदि को उदाहरण के लिए लागू किया जाना चाहिए

`` `अलग
21 सी 21

<var _vue = _interopRequireDefault (आवश्यकता ("vue"));

var _vue = _interopRequireDefault (आवश्यकता ("vue")। createApp);
43c43
<var root = new _vue ["डिफ़ॉल्ट"] ({

var root = _vue ["डिफ़ॉल्ट"] ({
67c67
<_vue ["डिफ़ॉल्ट"]। config.errorHandler = showException;

root.config.errorHandler = showException;
88c88 है
<रूट। $ माउंट ('# रूट');

root.mount('#root');

`` `

अब मैं vue/dist/client/preview/index.js साथ फंस गया हूं क्योंकि ऐप इंस्टेंस की जरूरत है, जैसे extends प्रॉपर्टी को परिभाषित करना - और यह उचित स्टोरीबुक बिल्ड के साथ लागू करने के लिए केवल संभव लगता है ...

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

उम्मीद है कि ये बच्चे कदम कुछ काम के हैं।

p3k 11 मई 2020

👍3 👀2

हेलो सब लोग! लगता है कि इस मुद्दे पर हाल ही में बहुत कुछ नहीं हुआ है। यदि अभी भी प्रश्न, टिप्पणी या बग हैं, तो कृपया चर्चा जारी रखने के लिए स्वतंत्र महसूस करें। दुर्भाग्य से, हमारे पास हर मुद्दे पर आने का समय नहीं है। हम हमेशा योगदान के लिए खुले रहते हैं, इसलिए कृपया हमें एक पुल अनुरोध भेजें अगर आप मदद करना चाहते हैं। निष्क्रिय मुद्दों को 30 दिनों के बाद बंद कर दिया जाएगा। धन्यवाद!

stale[bot] 2 जून 2020

टक्कर

p3k 2 जून 2020

👍1

@pksunkara @graup @ हारून-पूल क्या किसी को भी इसमें खुदाई करने का समय नहीं है? अगर वहाँ बदलाव की जरूरत है और हम 6.0 में उन प्राप्त कर सकते हैं, अब यह करने के लिए सबसे अच्छा समय होगा!

shilman 6 जून 2020

Vue3 के रिलीज़ होने के बाद भी हमें काफी समय के लिए V22 का समर्थन करने की आवश्यकता होगी। एक चीज जो हमें जांचनी होगी, वह यह है कि हम किसी भी तरह एक ही समय में दोनों का समर्थन कर सकते हैं या नहीं।

यह देखते हुए कि Vue3 अभी तक बीटा से बाहर नहीं है, और यह मानते हुए कि हम स्टोरीबुक v6 को बाहर निकालना चाहते हैं, मैं v6 रिलीज के बाद होने वाले v33 समर्थन को स्थगित कर दूंगा

pksunkara 6 जून 2020

👍2

मैं जल्द ही इस पर गौर करने की योजना बना रहा हूं, लेकिन ईटीए नहीं दे सकता। अभी तक Vue 3 की कोशिश करने का मौका नहीं मिला था।

मैं @punkunkara से सहमत

graup 6 जून 2020

धन्यवाद @ त्याग। मैं यह भी मानता हूं कि यह जरूरी नहीं है - हमें स्टोरीबुक में अप्रकाशित सॉफ़्टवेयर का समर्थन करने की उम्मीद नहीं की जानी चाहिए। मेरी एकमात्र चिंता यह है कि, उदाहरण के लिए, हम जुलाई में 6.0 जारी करते हैं, Vue3 अगस्त में लॉन्च होता है, हम सितंबर में इसका समर्थन करने के लिए जाते हैं, और पाते हैं कि एक ब्रेकिंग परिवर्तन की आवश्यकता है। और हम अक्टूबर में एक प्रमुख संस्करण टक्कर के बिना उस ब्रेकिंग परिवर्तन को प्राप्त नहीं कर सकते हैं, जो जून 2021 में इसके बजाय होना चाहिए।

shilman 6 जून 2020

मैं बस कलह चैनल पर कुछ रोशनी पाने की कोशिश कर रहा था, अब मैं इसे Vue 3 के साथ काम करने के प्रयास में कैसे जाता हूं, इसे नए प्रीसेट की आवश्यकता होगी क्योंकि फ्रेमवर्क को बूट करने के लिए तर्क थोड़ा अलग है .. मैं नहीं। vue फ़ोल्डर में वर्तमान कोड vue 3 के साथ काम करेगा।

milewski 6 जून 2020

मैं @ शीलमान को समझता हूं। मुझे थोड़ा और स्पष्ट करें क्योंकि यह दिखता है कि मुझे अपनी बात सही ढंग से नहीं मिली।

मैं @ p3k के प्रयासों और @mewewski की टिप्पणी के साथ जो समझ रहा हूं, उससे हमें न केवल एक नए पूर्व निर्धारित की जरूरत है, बल्कि हमें @storybook/vue पैकेज में परिवर्तन करने की भी आवश्यकता है।

लेकिन हमें अभी भी काफी समय के लिए V2 v2 का समर्थन करने की आवश्यकता होगी, हर कोई Vue v3 पर नहीं जाएगा। इसलिए, जब तक हम यह नहीं कहना चाहते कि Vue v2 का समर्थन नहीं किया जाता है, तब तक बेहतर होगा कि हम एक नया @storybook/vue3 पैकेज बनाएँ।

लेकिन अगर हम Vue v2 समर्थन में कटौती करने का निर्णय लेते हैं, तो हाँ, मैं सहमत हूं कि हमें स्टोरीबुक v6 से पहले शायद बदलाव करना चाहिए।

pksunkara 6 जून 2020

@pksunkara आपका प्रस्तावित समाधान बहुत अच्छा लगता है। 💯

मुझे नहीं लगता कि हम जल्द ही कभी भी vue2 समर्थन में कटौती कर सकते हैं, इसलिए हम उन दो पैकेजों को समानांतर में चलाना चाहते हैं, और शायद भविष्य के कुछ प्रमुख रिलीज (7.0? 8.0? कभी नहीं) में पूर्ण कट-ओवर बना सकते हैं। दो पैकेज जारी होने के बाद हम Vpm2 समर्थन को हटाने का सही समय है, यह निर्धारित करने के लिए npm डाउनलोड आँकड़े का उपयोग कर सकते हैं। WDYT?

cc @ndelangen

shilman 6 जून 2020

मैंने इसे एक शूट दिया: https://github.com/milewski/storybook/tree/vue3 यह अनिवार्य रूप से मेरे लिए vue3 के साथ काम कर रहा है।

हालाँकि, कोड का एक ब्लॉक था जो मैं अनिश्चित हूं कि इसे क्या करना चाहिए था https://github.com/milewski/storybook/blob/vue3/app/vue/src/client/preview/index.ts#L41 -L58 मैंने वास्तव में पहले कभी स्टोरीबुक का उपयोग नहीं किया है .. मैं अभी अपने v33 प्रोजेक्ट के साथ इसका उपयोग शुरू करना चाहता था।

जहाँ तक मैं https://storybook.js.org/docs/guides/guide-vue/ बता सकता हूं कि इस गाइड के निर्देश के बाद मुझे vue 3 का उपयोग करके मेरा कंपोनेंट सफलतापूर्वक मिल गया ... कोड के उस टुकड़े के बिना मैंने छोड़ दिया बंद ... शायद कुछ विशिष्ट प्लगइन के साथ काम करने की आवश्यकता है? क्या कोई मुझे बता सकता है कि कौन सा कोड / ऐडऑन / प्लगइन उस कोड के लिए उपयोगी होगा? इसलिए मैं इसे ठीक करने का तरीका ढूंढ सकता हूं और कोई मेरे संस्करण पर कुछ प्रेरणा पा सकता है और यहां एक नया प्रीसेट जारी करने के लिए कोड प्रक्रियाओं का ठीक से पालन कर सकता है?

milewski 6 जून 2020

❤5 👍2

महान काम @milewski - सुपर रोमांचक !!! 🚀

shilman 6 जून 2020

मुझे पता चला कि उस कोड ने क्या किया था .. यह नॉब्स से दिए गए विकल्पों को लागू करने के लिए आवश्यक था .. मैंने तय किया है कि .. क्या आप इसे आज़मा सकते हैं क्योंकि ऐसा लगता है कि आप लंबे समय से स्टोरीबुक का उपयोग कर रहे हैं? @ पी 3 के

आप इसे चलाकर स्थापित कर सकते हैं:

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 7 जून 2020

❤4 🚀3

आपके प्रयासों के लिए बहुत बहुत धन्यवाद @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.

p3k 8 जून 2020

उह। टाइपस्क्रिप्ट के साथ एक समस्या थी। मैंने अभी के लिए ts जाँच को अक्षम कर दिया है .. मेरी शाखा से नवीनतम कोड खींचें और पुनः प्रयास करें

milewski 8 जून 2020

👍1

हां, अब कमांड बिना किसी त्रुटि के चली।

yarn build (select vue) मुझे संदेश मिलता है _storybook WARN बिल्ड का निर्माण करने के लिए कुछ भी नहीं! _ - क्या यह सही है?

p3k 8 जून 2020

इंटरेक्टिव मेनू पर कोई भी ऐसा नहीं है जो आपको चुनने के लिए स्पेस बार को दबाने की आवश्यकता है

milewski 8 जून 2020

आह! क्षमा करें, मेरा बुरा, निश्चित।

अब यह ठीक है और मैं अपने पहले v33 घटक के साथ स्टोरीबुक चला सकता हूं - शानदार! धन्यवाद फिर से, @milewski

p3k 8 जून 2020

@milewski बढ़िया काम! बस परीक्षण किया गया है और यह काम करने लगता है।

जहां तक मैं बता सकता हूं, केवल बड़े ब्रेकिंग परिवर्तन आयात हैं और createApp सामान, सही है? शायद यह पीछे की ओर संगत कोड लिखने के लिए संभव है जो इंस्टॉल किए गए vue संस्करण की जांच करता है और स्वचालित रूप से सही काम करता है? तब हम प्रीसेट के दो संस्करण होने से बच सकते थे।

मैंने अपने vue उदाहरणों को अपडेट करने की कोशिश की, लेकिन ऐसा लगता है कि वहां इस्तेमाल किए गए कुछ सामानों में अभी तक vue3 संस्करण नहीं हैं। आम तौर पर अभी भी बहुत सारे बीटा और बेमेल पैकेज प्रतीत होते हैं, इसलिए पूरी स्टोरीबुक कोडबेस को अपडेट करने की कोशिश करने से पहले थोड़ा इंतजार करना बेहतर हो सकता है, जिसमें एडऑन्स आदि भी शामिल हैं। बहुत सारे काम करने होंगे।

graup 8 जून 2020

जहाँ तक मैं बता सकता हूँ, केवल बड़े ब्रेकिंग परिवर्तन आयात और createApp सामान हैं, है ना?

हाँ, मैं भी यही कहूँगा।

जिन चीजों की मैंने शुरुआत में कोशिश की थी (मेरी प्रारंभिक टिप्पणी देखें) सब मैंने रखा था कॉन्फ़िगरेशन मर्ज - VueLoaderPlugin का धक्का आवश्यक नहीं है, अब, @ milewski के योगदान के लिए धन्यवाद, मैं मानता हूं: बिल्ली:

(पुनः-) डॉक्स में वर्णित के अनुसार स्टोरीबुक को इनिशियलाइज़ करना सीधा था: npm install @storybook/vue --save-dev ; मुझे किसी अन्य सहकर्मी निर्भरता को स्थापित करने की भी आवश्यकता नहीं थी (हो सकता है क्योंकि हम पहले से ही उन्हें अपनी परियोजना के लिए, वैसे भी स्थापित करते हैं)।

तब हम प्रीसेट के दो संस्करण होने से बच सकते थे।

मुझे लगता है कि यह बहुत बेहतर होगा, और शायद यह भी संभव है कि अगली स्टोरीबुक रिलीज में बदलाव संभव है ...?

vue उदाहरणों के बारे में हो सकता है कि मैं vue3- संगत संस्करणों (उनमें से कुछ) के vhel3 बनाने के लिए? (मैं हालांकि, हालांकि, एक विशेषज्ञ विशेषज्ञ नहीं हूं।)

p3k 8 जून 2020

@ त्याग

जहाँ तक मैं बता सकता हूँ, केवल बड़े ब्रेकिंग परिवर्तन आयात और createApp सामान हैं, है ना? शायद यह पीछे की ओर संगत कोड लिखने के लिए संभव है जो इंस्टॉल किए गए vue संस्करण की जांच करता है और स्वचालित रूप से सही काम करता है? तब हम प्रीसेट के दो संस्करण होने से बच सकते थे।

मुझे प्रतिक्रियाशीलता के साथ मुद्दों का भी सामना करना पड़ा, मैंने उस तरीके का अनुसरण करने की कोशिश की जिस तरह से वर्तमान संस्करण सेटिंग / फैली हुई वस्तु थी, लेकिन vue3 अब उस प्रकार की वस्तुओं पर परिवर्तन को ट्रैक नहीं करता है, विशेष रूप से रेंडर फ़ंक्शन के अंदर बनाए गए, मुझे रेफरी के साथ संदर्भ बनाना था। () या प्रतिक्रियाशील () इसके लिए अद्यतन को ट्रिगर करने के लिए ..

मैंने अपने vue उदाहरणों को अपडेट करने की कोशिश की, लेकिन ऐसा लगता है कि वहां इस्तेमाल किए गए कुछ सामानों में अभी तक vue3 संस्करण नहीं हैं। आम तौर पर अभी भी बहुत सारे बीटा और बेमेल पैकेज प्रतीत होते हैं, इसलिए पूरी स्टोरीबुक कोडबेस को अपडेट करने की कोशिश करने से पहले थोड़ा इंतजार करना बेहतर हो सकता है, जिसमें एडऑन्स आदि भी शामिल हैं। बहुत सारे काम करने होंगे।

मैंने एक शुरुआती बिंदु के रूप में उस एक का उपयोग करने की कोशिश की, लेकिन यह vue2 सामान स्थापित करने की कोशिश की, यहां तक कि आपने स्पष्ट रूप से पैकेजजन्स पर संस्करण सेट किया था ... vue 3 doesnt काम बिल्कुल भी अगर आपके पास vue-template-compiler या पुराने vueer इंस्टॉलर हैं .. वहाँ कुछ निर्भरता हो सकती है जो आयात कर रहा है

@ पी 3 के

(पुनः-) डॉक्स में वर्णित स्टोरीबुक को इनिशियलाइज़ करना सीधा था: npm install @ storybook / vue --save-dev; मुझे किसी अन्य सहकर्मी निर्भरता को स्थापित करने की भी आवश्यकता नहीं थी (हो सकता है क्योंकि हम पहले से ही उन्हें अपनी परियोजना के लिए, वैसे भी स्थापित करते हैं)।

मुझे लगता है कि यह इसलिए हुआ क्योंकि मैंने vue3 और vue-loader ^ 16 को संकुल पर निर्भरता के रूप में शामिल किया था। json

milewski 8 जून 2020

🚀1

अगर इसकी वाकई जरूरत है तो मैं @storybook/vue3 पैकेज के साथ ठीक रहूंगा।

ndelangen 8 जून 2020

FYI करें, मैंने अभी स्टोरीबुक Vue2 कोड में एक कोर रेंडरिंग बग तय किया: https://github.com/storybookjs/storybook/pull/11076

यह वास्तव में एक ताज़गी के लिए मजबूर करने के लिए addon-knobs और addon-controls द्वारा उपयोग किए जाने वाले "बल ताज़ा व्यवहार" का कारण बनता है। मुझे यकीन नहीं है कि Vue3 कोड पर इसका कोई असर है, लेकिन सिर्फ FYI करें यदि आप परीक्षण कर रहे हैं, तो कृपया उस अपडेट में विलय करें।

shilman 8 जून 2020

❤1 👍1

संपन्न संस्करण पर भी लागू किया गया!

milewski 8 जून 2020

बस मेरे दो सेंट में डालने के लिए, यह दिखता है कि vite 3 के लिए उपयोग किया जाने वाला @pksunkara ने अपने vue-cli स्टोरीबुक प्लगइन के साथ हल करने का एक बड़ा काम किया। जो भी संभव हो, हमें पूर्व निर्धारित / पैकेज को सुनिश्चित करना चाहिए कि यदि संभव हो, तो पतंग के साथ बहुत ही सहजता से काम करता है।

संपादित करें: मुझे बस एहसास हुआ कि यह मुश्किल हो सकता है, क्योंकि वेइट वेबपैक के बजाय हुड के नीचे रोलअप का उपयोग करता है

Aaron-Pool 8 जून 2020

👍3

मुझे लगता है कि मुझे वास्तव में यह देखना चाहिए कि क्या स्टोरीबुक केवल उपयोगकर्ताओं के वेबपैक / बिल्ड सिस्टम का उपयोग कर सकती है और इसकी आवश्यकता नहीं है कि यह स्वयं का विन्यास हो।

विचार एक तरफ, मुझे लगता है कि मैंने वीट की जाँच नहीं की है, लेकिन हो सकता है कि वे वीयू क्ली प्लगइन सिस्टम को अनुकूलित करेंगे

pksunkara 8 जून 2020

👍4

हम "टूलींग" बनने के लिए वाइट के लिए सोचते या लक्ष्य नहीं रखते हैं। बड़ी संख्या में परियोजनाओं को वेबपैक द्वारा प्रदान की जाने वाली शक्ति और लचीलेपन की आवश्यकता होगी, और इन सभी जरूरतों को पूरा करने का लक्ष्य नहीं है।

इसलिए मैं अब के लिए बहुत ज्यादा चिंता नहीं करूँगा, और निश्चित रूप से स्टोरीबुक के लिए Vue3 समर्थन के लिए नहीं।

LinusBorg 7 जुल॰ 2020

❤3

@LinusBorg कारण मैं विशेष रूप से लाया है कि हम अक्सर Vue 2, जहां समुदाय के 90% vue-cli के साथ अपनी परियोजनाओं का निर्माण किया है, और तथ्य यह है कि स्टोरीबुक का पता लगाने और एक Vue- का उपयोग नहीं कर सकता के साथ एक समान मुद्दे में भाग गया Cli प्रबंधित बिल्ड सिस्टम ने Vue उपयोगकर्ताओं के लिए पर्याप्त मात्रा में भ्रम पैदा किया।

क्या आप हमें एक समान मुद्दे के साथ भागते हुए नहीं देख रहे हैं क्योंकि लोग स्टोरीबुक को एक व्यर्थ आधारित परियोजना में एकीकृत करने का प्रयास करते हैं?

Aaron-Pool 7 जुल॰ 2020

नहीं वास्तव में कोई नहीं। Vite CLI सेटअप की तुलना में Vite अपने आप में बहुत नंगे हैं।

वेइट प्रदान करने वाले किसी भी सरल वेबपैक कॉन्फिगरेशन द्वारा कवर किया जाता है जिसमें .vue , ts(x) और .css फ़ाइलों को संभालने के नियम हैं। और जब यह एक्स्टेंसिबल है, कि एपीआई सुंदर धातु के करीब तो हम कस्टम रूपांतरण जोड़ने लोगों की उम्मीद नहीं है और सामान छोड़ दिया और सही है।

यह डिजाइन द्वारा एक व्यापक प्लगइन एपीआई नहीं है। अगर लोगों को अपनी परियोजनाओं के लिए फैंसी कस्टम जादू की आवश्यकता होती है, तो संभावना है कि उन्हें वेबपैक की आवश्यकता होगी जितनी जल्दी बाद में, इसलिए Vue CLI के साथ जाएं।

Vite अपने लक्ष्यों में से एक के रूप में "किसी भी उपयोग के मामले के लिए एक्स्टेंसिबिलिटी" नहीं देखता है।

इसलिए मैं कहूंगा कि किसी भी Vite प्रोजेक्ट को आमतौर पर स्टोरीबुक / vue के साथ काम करना चाहिए जब तक कि उसका वेबपैक कॉन्फिगरेशन मेरे द्वारा निर्धारित बुनियादी नियमों को कवर नहीं करता है, जो मुझे लगता है कि यह करता है

LinusBorg 7 जुल॰ 2020

@LinusBorg ठीक है, जो समझ में आता है। इनपुट के लिए आभारी for कोर Vue टीम से कोई भी मार्गदर्शन हमेशा बहुत सराहना की जाती है!

Aaron-Pool 7 जुल॰ 2020

काम के लिए धन्यवाद सभी को स्टोरीबुक में डाल दिया गया है, यह मेरे Vue 3 प्रोजेक्ट के लिए उपयोग करने के लिए इंतजार नहीं कर सकता है :)

LinusBorg 7 जुल॰ 2020

🚀3 ❤1

चूँकि Vue3 अब RC में है , इसलिए यह सार्थक हो सकता है कि V6 में Vue3 समर्थन को जोड़ा जाए या नहीं।

hollandThomas 18 जुल॰ 2020

🚀8

@hollandThomas हम पहले से ही मध्य-आरसी हैं इसलिए vue3 को 6.1 में आना होगा। उस ने कहा, हमें कुछ हफ्तों में पहले 6.1 अल्फ़ाज़ रिलीज़ करने चाहिए, ताकि अगर कोई इसे एक साथ रखना शुरू करे, तो मुझे यकीन है कि एक बड़ा दर्शक वर्ग है जो इसके लिए भूखा है!

shilman 18 जुल॰ 2020

👍15

क्या कोई ऐसी सक्रिय शाखाएं हैं, जिनका उपयोग या योगदान करने के लिए हम Vue 3 को तैयार होने में मदद कर सकते हैं?

हमारे ओआरजी में हमारे Vue ui- घटक लाइब्रेरी हमारे सभी Vue प्रोजेक्ट्स को छूती है, इसलिए यह Vue 3 को आज़माने वाले पहले चीजों में से एक है, और हम ज़रूरत पड़ने पर परीक्षण या माइग्रेट करने में मदद करने के लिए उत्सुक होंगे। मुझे लगता है कि अन्य लोग एक ही नाव में होंगे।

अब डॉक्स में भी v2 -> v3 माइग्रेशन गाइड https://v3.vuejs.org/guide/migration/introduction.html#overview है

bnjm 31 अग॰ 2020

👍1

@milewski @graup @ आरोन-पूल @elevatebart हम अभी 6.1-अल्फा में हैं। किसी को इसके लिए एक पीआर पर एक शॉट लेना चाहते हैं?

shilman 31 अग॰ 2020

@ p3k धन्यवाद सिर्फ आपके विवरण के साथ बनाया गया है, मेरे लिए काम की तरह दिखता है, इतनी कार्यक्षमता का परीक्षण नहीं किया
webpack config को main.js में आसानी से तय किया जा सकता है

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

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

    return config
  }

और लोडर हो सकता है

रेंडर के साथ। js .storybook में कॉन्फ़िगर करने के लिए थोड़ा अटक गया

vladnix 1 सित॰ 2020

👍1

@ शीलमैन क्या यह संस्करण '6.1.0-अल्फा.1' vue3 के साथ संगत है?

gem007bd 1 सित॰ 2020

यकीन नहीं है, लेकिन नहीं की तरह लग रहा है। अभी भी दूसरे संस्करण का समर्थन किया ..

vladnix 1 सित॰ 2020

नहीं अभी तक नहीं। मुझे उम्मीद है कि यहाँ कोई मेरी टिप्पणी के अनुसार, इसमें योगदान देगा

shilman 1 सित॰ 2020

@shilman मुझे अभी भी Vue 3 का उपयोग करने का मौका नहीं मिला है has मेरे काम में इस महीने Vue 2 आधारित उत्पाद रिलीज़ की समय सीमा है, इसलिए मेरे पास समय नहीं था।

Aaron-Pool 1 सित॰ 2020

❤4

इसलिए कार्य मूल रूप से हैं

एप्लिकेशन / vue3 के लिए एप्लिकेशन / vue की प्रतिलिपि बनाएं
सभी रूपरेखा रेफरी को संशोधित करना सुनिश्चित करें
https://github.com/milewski/storybook/tree/vue3 में @milewski द्वारा किए गए परिवर्तन लागू करें
नए रसोई के उदाहरणों को संशोधित करें या बनाएं
अलग कहानी / vue3 घटक परिभाषा विधि संयोजनों का प्रयास करें और जांचें कि क्या वे काम करते हैं

chartinger 8 सित॰ 2020

@chartinger मुझे सबसे सीधा रास्ता लगता है। अगर हम यह पता लगा सकते हैं कि आपके द्वारा उपयोग किए जा रहे वीयू के संस्करण के आधार पर उन परिवर्तनों को सशर्त रूप से कैसे लागू किया जाए और एक पैकेज को बनाए रखें, तो यह और भी बेहतर होगा।

shilman 10 सित॰ 2020

👍1

मैंने https://github.com/chartinger/storybook/tree/app-vue3 में एक प्रयोग किया (उपरोक्त कांटे से कुछ बदलावों की आवश्यकता थी) जो मैंने अब तक पाया:

अच्छा:

मूल vue3 घटक प्रस्तुत करेंगे
नियंत्रण से परिवर्तन लाइव अपडेट किए जाते हैं

खराब:

लोड करने के लिए वर्ग-सजाया पुए घटकों को प्राप्त करने के लिए प्रतीत नहीं हो सकता है
कोई विचार नहीं है अगर knobs काम करता है, तो मैं v3 के साथ स्टोरीबुक सीखना चाहता था ताकि परीक्षण करने के लिए कोई डेमो कोड या पिछले प्रोजेक्ट न हों
प्रॉप्स से नियंत्रण-विशेषताओं की कोई ऑटो-पहचान नहीं है

अन्य:

StoryMeta में घटक आयात करना कुछ नहीं करता है, कहानी में होना चाहिए
वैश्विक घटक अब ऐप इंस्टेंस के लिए बाध्य हैं, क्या इसे .storybook / प्रीव्यू.जेएस या किसी अन्य तरीके से प्रदान करना संभव है? (क्या इसकी जरूरत है?)

chartinger 10 सित॰ 2020

@elevatebart vue3 के लिए vue-docgen-api की स्थिति क्या है? ☝️

shilman 11 सित॰ 2020

यह समग्र रूप से संगत है। लेकिन सेटअप फ़ंक्शन में ईवेंट ईटिंग को अभी तक निपटाया नहीं गया है।

इसके लिए, मुझे अभी भी सेटअप फ़ंक्शंस में प्रवेश करने और उन उत्सर्जन का पता लगाने के लिए एक शानदार तरीका चाहिए।

चूंकि फ़ंक्शन कई फ़ाइलों में हो सकते हैं इसलिए इसमें थोड़ा समय लग सकता है।

elevatebart 11 सित॰ 2020

@chartinger कुछ प्रयोगों के साथ अपनी शाखा को अद्यतन करना चाहते हैं? मैं "नियंत्रण विशेषताओं के ऑटोडेटेक्शन" समस्या पर खुदाई करना चाहता हूं जो आपको मिली, और मैं शायद क्लास-सजे हुए मुद्दे को देखने के लिए किसी को प्राप्त कर सकता हूं।

shilman 11 सित॰ 2020

@ शिलमैन I ने vue-cli के आधार पर एक v33 उदाहरण जोड़ा, और बटन उदाहरण को रचना और वर्ग एपीआई के लिए माइग्रेट किया (मैंने इसे कोड में एनोटेशन कहा, जिसे बदलना होगा लेकिन अभी के लिए करना होगा)। किसी तरह वर्ग आपी घटकों ने इस बार लोड किया।

परीक्षण के लिए npm link और npm link @storybook/vue3 तदनुसार मत भूलना।

chartinger 11 सित॰ 2020

❤1

FYI करें: मैंने अभी @andoshin11/storybook-vue3 npm पर प्रकाशित किया है, इसलिए इसे आज़माने के लिए बेझिझक 👇

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

andoshin11 17 सित॰ 2020

🎉9

btw, Vue 3 आधिकारिक तौर पर बीटा से बाहर है।

पुनश्च। स्टोरीबुक @ andoshin11 के अपने कांटे / संस्करण के लिए धन्यवाद

// संपादित करें: बस धागा और महान नौकरी लोग पढ़ें .. मैं इस पर एक शॉट ले सकता हूँ :)

vinayakkulkarni 24 सित॰ 2020

👍1

बहुत बढ़िया काम सब लोग। मैं 6.1 रिलीज में इसे पाने के लिए प्यार करता हूँ। क्या कोई इसे लेना चाहता है? यह बहुत उच्च प्रभाव वाला योगदान होगा। आदर्श रूप से हम एक ही पैकेज में vue3 और vue2 का समर्थन करते हैं, कुछ ऑटोडेटेक्शन या उपयोगकर्ता कॉन्फ़िगरेशन का उपयोग करके यह पता लगाने के लिए कि किस संस्करण का उपयोग करना है।

इस कार्य का दायरा:

[] Vue3 का समर्थन करने के लिए आवश्यक परिवर्तन करना
[] V23 vue प्रोजेक्ट के लिए e2e परीक्षण जोड़ना (हमारे पास इसके लिए पहले से ही एक टेम्पलेट है, और यह बहुत कठिन नहीं होना चाहिए)
[] प्रलेखन अद्यतन करना
[] बगफिक्स के लिए उपलब्ध होने और समर्थन के रूप में हम इसे प्रीलेरेज में बढ़ावा देते हैं

यदि आप इस पर काम करना चाहते हैं, तो कृपया हमें हमारे कलह पर संपर्क करें - मैंने चर्चा करने के लिए #vue3 अस्थायी चैनल बनाया है! https://discord.com/invite/UUt2PJb

shilman 24 सित॰ 2020

👍12

Https://github.com/storybookjs/storybook/issues/12632 पर थोड़ा काम हुआ है

pksunkara 1 अक्तू॰ 2020

❤2

चूँकि Vue 3 बीटा से बाहर है और कुछ महीनों में latest टैग में उपलब्ध होगा, क्या स्टोरीबुक में Vue 3 समर्थन के लिए ETA उपलब्ध है?

साथ ही, CHANGELOG को @storybook/vue - https://github.com/storybookjs/storybook/tree/master/app/vue जोड़ना मददगार होगा, ताकि हमें एक विचार मिल सके @storybook/vue संस्करणों के साथ क्या बदला।

palerdot 3 अक्तू॰ 2020

@palerdot मैं vue3 को स्टोरीबुक 6.1 के भाग के रूप में भेजना पसंद करूंगा। यह योगदान करने के लिए किसी की तलाश - क्या आप रुचि रखते हैं? https://github.com/storybookjs/storybook/issues/10654#issuecomment -698200447

CHANGELOG के लिए, हमारे पास पूरे मोनोरेपो के लिए एक है और यह प्रत्येक फ्रेमवर्क के लिए एक अतिरिक्त बनाए रखने के लिए यथार्थवादी नहीं है। हालांकि, मैं प्रत्येक रिलीज की घोषणा के साथ फ्रेमवर्क-विशिष्ट सारांश करने पर विचार करूंगा, जो कि शायद आप वास्तव में एक उपयोगकर्ता के रूप में चाहते हैं।

shilman 3 अक्तू॰ 2020

@ शीलमान

यह योगदान करने के लिए किसी की तलाश - क्या आप रुचि रखते हैं?

दुर्भाग्य से, मैं वर्तमान में इस पर समय नहीं दे पाऊंगा (उल्लेख नहीं करने के लिए कि मैं storybook codebase से परिचित नहीं हूं)।

मैं प्रत्येक रिलीज की घोषणा के साथ फ्रेमवर्क-विशिष्ट सारांश करने पर विचार करूंगा, जो कि संभवतः आप एक उपयोगकर्ता के रूप में चाहते हैं।

धन्यवाद। ये अच्छा रहेगा। तुम सही हो। एक उपयोगकर्ता के रूप में मैं सिर्फ यह जानना चाहता हूं कि हर रिलीज के साथ फ्रेमवर्क का समर्थन किया जाता है (उदाहरण के लिए Vue 3 जैसे)। तो, उस जानकारी को मुख्य CHANGELOG में जोड़ने से मदद मिलेगी।

palerdot 5 अक्तू॰ 2020

बस एक डेटा बिंदु को छोड़ना जो मुझे स्टोरीबुक के साथ-साथ Vue3 काम करना पसंद करेगा। शायद Vue कोर / टूलिंग डेवलपर्स में से कुछ यहाँ मदद कर सकते हैं, जैसे @Akryum ?

maciej-trebacz 13 अक्तू॰ 2020

@ शीलमान
मुझे लगता है कि मुझे v22 और vue3 के साथ कार्यपुस्तिका का समाधान मिला। अगर मुझे उम्मीद है कि इसके लिए समय मिल जाए तो मैं इसका एक POC बनाने की कोशिश करता हूं ;-)। कोई वादा नहीं। ^ ^
लेकिन मुझे लगा कि मैं अपना विचार पहले से ही साझा कर रहा हूं।
मुझे Vue डेमी मिली जो vue2 & vue3 के लिए एक पैकेज का उपयोग करने की समस्या को हल करने का वादा करती है।
बेशक अभी कम्पोस्टियन एपी के साथ काम किया जाना बाकी है। लेकिन मुझे लगता है कि उस पैकेज के साथ इसका एक कदम एक आशाजनक पैकेज के लिए है

CodeDredd 24 अक्तू॰ 2020

❤9

13224 वही समस्या। @ लक्ष्मण को अगले स्टोरीबुक संस्करण में Vue 3 समर्थन की प्रतीक्षा करनी चाहिए?

Pashkella 23 नव॰ 2020

👍2

हां, उम्मीद है कि यह 6.2 में उतरेगी। अभी भी किसी को इसे बनाने के लिए देख रहे हैं!

shilman 23 नव॰ 2020

👍23 ❤10

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Storybook: Vue: Vue3 समर्थन जोड़ें

सबसे उपयोगी टिप्पणी

सभी 61 टिप्पणियाँ

vue / dist / server / Framework-preset.js

vue / dist / client / प्रीव्यू / रेंडर .js

<var _vue = _interopRequireDefault (आवश्यकता ("vue"));

<var root = new _vue ["डिफ़ॉल्ट"] ({

<_vue ["डिफ़ॉल्ट"]। config.errorHandler = showException;

<रूट। $ माउंट ('# रूट');

13224 वही समस्या। @ लक्ष्मण को अगले स्टोरीबुक संस्करण में Vue 3 समर्थन की प्रतीक्षा करनी चाहिए?

संबंधित मुद्दों