2017-12-20 102 views
10

मैंने Vue.js + TypeScript सेटअप के न्यूनतम, काम करने वाले उदाहरण के लिए पूरे वेब पर खोज की है। "आधुनिक जावास्क्रिप्ट स्टैक" के साथ सामान्य रूप से, इनमें से अधिकतर ट्यूटोरियल या तो कुछ महीने पहले लिखे जाने के बावजूद या एक बहुत ही विशिष्ट सेटअप के आधार पर पुराने हैं। ऐसा करने के लिए कोई सामान्य, सत्यापन योग्य उदाहरण प्रतीत नहीं होता है।Vue.js और एकल फ़ाइल घटक के साथ टाइपस्क्रिप्ट का उपयोग कैसे करें?

मैं जिस मूल टेम्पलेट का उपयोग करता हूं वह सभी डिफ़ॉल्ट विकल्पों के साथ vue-cli init webpack चलाकर प्रदान किया जाता है। चूंकि यह बहुत सारे कोड पैदा करता है, मैं यहां सबकुछ चिपका नहीं रहा हूं। अगर कुछ विशिष्ट अंशों की आवश्यकता है, तो मैं खुशी से प्रश्न अपडेट कर दूंगा। क्योंकि यह एसएफसी के साथ टाइपप्रति की स्थापना पर विचार नहीं करता

आधिकारिक Vue.js प्रलेखन मेरा उद्देश्य के लिए बेकार है। मैंने जो नवीनतम प्रयास किया वह सूची का अंतिम था। मैं सेटअप ठीक पीछा किया, लेकिन यह npm run dev पर निम्न त्रुटि में मुझे चलाता है:

[tsl] ERROR in /Users/[REDACTED]/ts-test/src/main.ts(12,3) 
     TS2345: Argument of type '{ el: string; router: any; template: string; components: { App: { name: string; }; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'. 
    Object literal may only specify known properties, and 'router' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Rec...'. 

किसी को भी क्यों ऐसा होता है और यह कैसे हल करने पर कुछ रोशनी डालेगी कर सकते हैं? अभी तक बेहतर, मैं बहुत ज्यादा एक संक्षिप्त, कम से कम, कदम-दर-कदम कैसे webpack टेम्पलेट के साथ एक काम Vue.js + टाइपप्रति विन्यास स्थापित करने के लिए के उदाहरण का स्वागत करते हैं चाहते।

मैंने पहले ही सफलतापूर्वक कई ग्राहक परियोजनाएं पूरी की हैं जो वेनिला जावास्क्रिप्ट के साथ Vue.js में उत्पादन में चलती हैं लेकिन Vue.js के साथ संयोजन में यह टाइपस्क्रिप्ट टूलिंग सिर्फ मेरे बाहर नरक को भ्रमित करती है।

+0

यहाँ हैलो में उल्लेख किया टाइपप्रति के साथ एक टेम्पलेट आशा अपने https://github.com/morganster में मदद करता है/vue-ts-webpack-template – Morganster

+0

दुर्भाग्य से अब, क्योंकि यह वू राउटर भाग का ख्याल नहीं रखता है। – herrbischoff

+0

चूंकि यह अभी खड़ा है, सभी उदाहरण या तो फूले हुए और जटिल हैं या खाते में vue-राउटर/vuex नहीं लेते हैं। मैं इस सेटअप के साथ अपना धैर्य खोने वाला हूं। मैं शायद इसे पूरी तरह से छोड़ दूंगा और हमेशा के रूप में जारी रहूंगा। – herrbischoff

उत्तर

5

मैं vue साथ typescript उपयोग करने के लिए कोशिश की है। मेरी व्यक्तिगत राय: यह अच्छी तरह से काम नहीं करता है। के बाद से कुछ vue internals typescript के लिए उपयुक्त नहीं हैं:

  1. vuex साथ this.$store.dispatch('some_action')
  2. Vue.use, Vue.mixin और अन्य समान चीजें हैं जो वैश्विक Vue उदाहरण उत्परिवर्तित

लेकिन, जबकि मेरी शोध कर रहा पाया है इन अद्भुत boilerplates: typescript-vue-tutorial डैनियल Rosenwasser द्वारा और TypeScript-Vue-Starter माइक्रोसॉफ्ट द्वारा।

मैं भी अपने आप से typescript साथ vue-webpack-template की नकल करने की कोशिश की है: https://github.com/sobolevn/wemake-vue-template

आपके typescript + vue कार्यप्रवाह बेहतर बनाने के लिए भी अच्छा साधन:

अंत में मैंने flow का उपयोग करने का निर्णय लिया है। यदि आप रुचि रखते हैं तो this project template देखें।

+0

धन्यवाद। यह एक दिलचस्प अवलोकन है क्योंकि मुझे लगभग सभी पदों और लेखों से छाप मिली है, मैंने पढ़ा है कि टाइपस्क्रिप्ट + Vue.js एक अच्छा मैच होगा और विशेष रूप से टाइपस्क्रिप्ट का उपयोग करना बहुत अच्छा होगा। अब तक मैं कह सकता हूं कि यह निराशाजनक है।मुझे नहीं लगता कि मुझे काम करने के लिए टूलिंग करने के लिए घंटों क्यों खर्च करना चाहिए। – herrbischoff

+0

@herrbischoff जो मेरा सबसे बड़ा सवाल भी था। – sobolevn

+0

मैंने फ्लो की कोशिश की है लेकिन जावास्क्रिप्ट/टाइपस्क्रिप्ट भाषा सर्वर के संयोजन में उपयोग होने पर यह त्रुटियां उत्पन्न करता है। विम के साथ-साथ वीएसकोड में भाषा सर्वर '// @ प्रवाह' और प्रकार की घोषणाओं को टाइपस्क्रिप्ट के लिए विशिष्ट के रूप में शिकायत करता है। मैन, यह पूरी जावास्क्रिप्ट स्टैक सिर्फ एक स्मेगीन 'के साथ काम करने के लिए दुःस्वप्न है ... समुदाय कैसे गहरी सांस लेगा, कामकाजी चूक को परिभाषित करेगा, जो काम नहीं करता है और वहां से जारी रहता है? यह मुझे इस बिंदु पर निराश करता है कि मैं सवाल करता हूं कि मुझे किसी भी मोर्चे के विकास ** को ** अब और करना चाहिए। – herrbischoff

3

पूर्ण सहमत @ sobolevn की राय। लेकिन, मेरे लिए न्याय करने के लिए बहुत सारी जानकारी है, टाइपस्क्रिप्ट के लिए सामुदायिक समर्थन प्रतीक्षा के लायक है।

  1. *.vue फ़ाइल के TypeScript VSCode में फाहा का समर्थन किया:

    Vue के पारिस्थितिकी तंत्र अधिक टाइपप्रति जा रहा है। इस समस्या को vetur देखें।

  2. ओपन सोर्स पारिस्थितिक तंत्र।

  3. नए डिजाइन में vue-cliclick me

तो अगर आप प्रतीक्षा करने के लिए समय है, आप अस्थायी रूप से कुछ समय के लिए देख सकते हैं। या, आप इन परियोजनाओं का उल्लेख कर सकते हैं: TypeScript-Vue-Starter और A Webpack Template Fork With Typescript Support

3

यह नवीनतम vue-cli टेम्पलेट की तरह दिखता है जिसमें सितारों की एक महत्वपूर्ण मात्रा और vue 2.5 के लिए समर्थन है।

मुझे नहीं लगता कि मैंने देखा कि यह विशेष रूप से अन्य उत्तर

vue init ducksoupdev/vue-webpack-typescript my-project

https://github.com/ducksoupdev/vue-webpack-typescript

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