सब कुछ आप Vue.js के साथ शुरू करने की जरूरत है

सबसे अधिक संभावना है, इन पंक्तियों को पढ़ते हुए, आप पहले से ही Vue नामक जावास्क्रिप्ट ढांचे के बारे में सुन चुके हैं। यदि आप इसे आज़माने जा रहे हैं, लेकिन आपने वास्तव में कल्पना नहीं की है कि आपको क्या शुरू करना चाहिए, तो यह सामग्री विशेष रूप से आपके लिए लिखी गई थी। इसके लेखक का कहना है कि वह इस बारे में बात करना चाहता है कि वह वास्तव में क्यू पसंद करता है। इसके अलावा, वह Vue में पहला आवेदन लिखने के लिए सभी 4 तरीकों से परिचित कराने जा रहा है।

सामग्री अवलोकन

आमतौर पर मैं उन समस्याओं के समाधान के लिए बहुत सारे तरीकों के बारे में बात नहीं करने की कोशिश करता हूं जो केवल एक निश्चित रूपरेखा सीखना शुरू कर रहे हैं। लेकिन इस मामले में, मेरा मानना ​​है कि पहले Vue एप्लिकेशन को विकसित करने के लिए कुछ तरीके दिखाना बहुत महत्वपूर्ण है। शायद आपको कमांड लाइन के साथ काम करना पसंद है, या शायद ग्राफिकल इंटरफ़ेस से लैस टूल के साथ। दोनों Vue विकास के लिए उपयुक्त हैं। इसके अलावा, वाउ एप्लिकेशन को कमांड लाइन का सहारा लिए बिना लिखा जा सकता है। ऐसा करने के लिए, संबंधित स्क्रिप्ट को लोड करने के लिए बस HTML पृष्ठ पर एक टैग जोड़ें। और अंत में, आप अपने विकास के माहौल को स्थापित करने के बारे में चिंता नहीं करना चाहेंगे। इसके बजाय, आप अनावश्यक आंदोलनों के बिना, जितनी जल्दी हो सके Vue का प्रयास करने का प्रयास करते हैं। वास्तव में, कोई फर्क नहीं पड़ता कि आप किस रणनीति का पालन करते हैं, यहां आपको Vue के साथ आरंभ करने में मदद करने के लिए कुछ मिलेगा।

इस सामग्री को पढ़ने की प्रक्रिया में आप उपयोगी संसाधनों के लिंक पर आएंगे। और जब आप यह पूरा लेख पढ़ते हैं, तो मैं आपको बताता हूँ कि आपको Vue के आगे के अध्ययन के लिए क्या ध्यान देना चाहिए। यह ध्यान दिया जाना चाहिए कि यहां हम Vue की पेचीदगियों में गोता नहीं लगाएंगे, हम इस ढांचे के सभी संभावित तंत्रों पर विचार नहीं करेंगे। हम मूल बातों से निपटने और पहले काम करने के लिए आवेदन करने जा रहे हैं।

सबसे पहले, चलो Vue के कुछ दिलचस्प विशेषताओं के बारे में बात करते हैं।

Vue की ताकत

Vue की ताकत, मेरी राय में, यह रूपरेखा newbies के लिए कितनी अनुकूल है। Vue विकास टीम ने एक अद्भुत काम किया है, यह सुनिश्चित करने की कोशिश कर रहा है कि विभिन्न योग्यताओं के डेवलपर्स फ्रेमवर्क के साथ उत्पादक रूप से काम करना शुरू कर सकते हैं। यदि आप HTML, CSS और जावास्क्रिप्ट जानते हैं - इसका मतलब है कि आप सचमुच Vue पर काफी शक्तिशाली एप्लिकेशन विकसित करने से एक कदम दूर हैं।

मेरा यह भी मानना ​​है कि तीन प्रमुख फ्रंट-एंड डेवलपमेंट टूल्स (एंगुलर, रिएक्ट और व्यू) में से Vue में सबसे कम एंट्री बैरियर हैं। यह कई कारणों से सही है, लेकिन मेरे लिए यह Vue की तीन मुख्य विशेषताओं में आता है:

• महान प्रलेखन।
• अद्भुत समुदाय।
• यह एक प्रगतिशील ढांचा है।

▍ प्रलेखन

यदि आप वेव पसंद करने वाले डेवलपर्स के साथ बात करते हैं, तो मुझे लगता है कि उनमें से कई सबसे पहले इस ढांचे के लिए प्रलेखन की गुणवत्ता के बारे में बात करेंगे। यदि आप Vue.js पर जाते हैं, तो आप पा सकते हैं कि प्रलेखन कई खंडों में विभाजित है:

• नेतृत्व । यहां आपको वे सभी चीजें मिल सकती हैं, जिनकी आपको Vue.js. से शुरुआत करनी होगी। यह खंड आसान-से-समझने वाले उपखंडों में टूट गया है जो पाठक को घटक-आधारित अनुप्रयोगों को विकसित करने के लिए आवश्यक अवधारणाओं से परिचित कराते हैं।
• एपीआई । यह खंड Vue API का विस्तृत विवरण प्रदान करता है। उदाहरण के लिए, यदि आप कभी किसी ऐसी विधि के बारे में जानते हैं जिसके बारे में आप निश्चित नहीं हैं, तो इस खंड की यात्रा स्थिति को स्पष्ट करने में मदद करेगी।
• अनुशंसाएँ । यहां आप अद्भुत सिफारिशें पा सकते हैं, जिसके बाद आप त्रुटियों की उपस्थिति से बच सकते हैं। ये सिफारिशें डेवलपर को एंटी-पैटर्न के उपयोग के खिलाफ चेतावनी दे सकती हैं। महत्वपूर्ण बात यह है कि यह अधिक कठिन नियम नहीं है, लेकिन मार्गदर्शक जैसा कुछ है। Vue के साथ सहज होने के बाद, कुछ एप्लिकेशन लिखें, मैं आपको इस खंड में सामग्री पढ़ने की सलाह दूंगा। मेरा मानना ​​है कि यह Vue पर ज्ञान का एक बहुत मूल्यवान स्रोत है।
• उदाहरण । यहां आप Vue द्वारा विकसित अनुप्रयोगों के उदाहरण पा सकते हैं। आपके स्थान पर, मैं तब तक यहां नहीं देखा जाता जब तक कि मुझे घटकों के विकास के साथ थोड़ा सा उपयोग करने की आदत न हो। लेकिन थोड़ी देर बाद, जब आप यह जानने के लिए तैयार होते हैं कि पूर्ण-वर्ण वाले अनुप्रयोग कैसे व्यवस्थित किए जाते हैं, तो आपको इस खंड का अध्ययन करना चाहिए।
• पकाने की विधि पुस्तक । इस खंड में Vue के बारे में अक्सर पूछे जाने वाले प्रश्नों के उत्तर शामिल हैं। उदाहरण के लिए, ऐसे प्रश्नों के लिए: "फार्म सत्यापन कैसे करें?", "एक घटक की इकाई परीक्षण कैसे करें?"। यह, फिर से, एक मूल्यवान संसाधन है, लेकिन इसकी सामग्री का विकास उस समय तक स्थगित कर दिया जाना चाहिए जब आपके पास ऊपर सूचीबद्ध लोगों के समान प्रश्न हों।
• उपकरण और मुख्य पुस्तकालय। Vue में उत्कृष्ट उपकरण और मुख्य पुस्तकालय हैं। हमें इस बारे में विशेष विवरण में नहीं जाना है, क्योंकि हमें जल्द से जल्द कोड लिखना शुरू करना है। मैं यहां सामग्री के लिए कुछ लिंक दूंगा, जिसका अस्तित्व जानना उपयोगी है। तो, Vue टूल्स के बीच, मैं निम्नलिखित नोट करूंगा: डेवलपर टूल्स , Vue CLI , Vue Loader । यहां आधिकारिक पुस्तकालयों की सामग्रियों के लिंक दिए गए हैं: Vue Router , Vuex , Vue Server Renderer ।

▍ समुदाय

एक प्रोग्रामर के रूप में, मैं कई महान समुदायों में शामिल महसूस करता हूं। उनमें से एक Vue समुदाय है। इसके सदस्य मिलनसार, मिलनसार हैं, वे जरूरतमंद लोगों की मदद करने के लिए तैयार हैं। मैं ट्विटर पर Vue समुदाय के निम्नलिखित सदस्यों का अनुसरण करने की सलाह देता हूं। इसलिए आपके लिए यह समझना आसान होगा कि वे क्या कर रहे हैं और यह पता लगा सकते हैं कि वे क्या जीते हैं। यहाँ लिंक हैं:

• आप इवान
• क्रिस फ्रिट्ज
• सारा ड्रनर
• डेमियन सलिसज़
• दिव्य ससिधरन
• गिलौम चौ
• बेन होंग
• सेबस्टियन चोपिन
• नतालिया तेपलुहिना
• एड यरबर्ग

UeVue एक प्रगतिशील ढांचा है

यदि आप Vue.js के होमपेज पर जाते हैं, तो आप देख सकते हैं कि इसे वहां कहा जाता है: "प्रगतिशील जावास्क्रिप्ट ढांचा।" पहली नज़र में, यह एक साधारण विपणन चाल की तरह लग सकता है, लेकिन Vue के सार की थोड़ी समझ होने पर, आप समझ सकते हैं कि ऐसा नहीं है। पहले, चलो शब्द का अर्थ "प्रगतिशील" है। यह कुछ हो रहा है या धीरे-धीरे या चरणों में विकसित हो रहा है; यह कुछ ऐसा है जिसे चरण दर चरण किया जाता है

जल्द ही आप देखेंगे कि Vue अनुप्रयोगों को विकसित करते समय, आप धीरे-धीरे इस ढांचे की क्षमताओं का परिचय देकर काम कर सकते हैं। उदाहरण के लिए, यदि आपके पास पहले से ही एक निश्चित परियोजना है, तो आप इसे बिना किसी समस्या के Vue समर्थन से लैस कर सकते हैं। आप Vue स्क्रिप्ट लोड करके और कोड की कुछ पंक्तियाँ लिखकर शुरू कर सकते हैं।

यदि आप Vue CLI, Vue कमांड-लाइन टूल का उपयोग करना चाहते हैं, तो अपनी क्षमताओं के साथ एक नई परियोजना को तैनात करने के लिए, तो यह कोई समस्या नहीं है। जैसे-जैसे आपका एप्लिकेशन बढ़ता है, और आपको कुछ उन्नत सुविधाओं की आवश्यकता होती है, जैसे कि रूटिंग या राज्य प्रबंधन, एप्लिकेशन को इन सुविधाओं से लैस करना मुश्किल नहीं होगा।

जैसा कि पहले ही उल्लेख किया गया है, Vue एक किफायती ढांचा है। यदि आप पहले से ही HTML, CSS और JavaScript जानते हैं, तो इसका मतलब है कि आप Vue के साथ आरंभ करने के लिए तैयार हैं। तथ्य की बात के रूप में, यदि आप वास्तव में Vue एप्लिकेशन लिखना शुरू करना चाहते हैं, तो मैं ऐसा करने का प्रस्ताव करता हूं।

विकल्प # 1: पृष्ठ से जुड़ी हुई स्क्रिप्ट

Vue का उपयोग करने का पहला तरीका जो हम खोज रहे हैं वह <script> का उपयोग करके एक Vue स्क्रिप्ट को पेज से जोड़ना है। यदि आपने पहले ही जावास्क्रिप्ट के साथ काम किया है, तो आपके लिए कोई नई बात नहीं होगी। अर्थात्, हम इस तथ्य के बारे में बात कर रहे हैं कि एक HTML पृष्ठ है जिसे कुछ JS लाइब्रेरी में कार्यान्वित कुछ कार्यक्षमता से लैस करने की आवश्यकता है। इसके लिए, पुस्तकालय <script> का उपयोग करके पेज से जुड़ा हुआ है। यह ध्यान दिया जाना चाहिए कि यहां माना गया Vue का उपयोग करने का तरीका न केवल एक प्रशिक्षण एप्लिकेशन विकसित करने के लिए उपयुक्त है। यह वास्तविक परियोजनाओं में आवेदन पाता है।

उस प्रोग्राम में, जहां प्रोग्रामर काम करता है, नए प्रोजेक्ट्स, लाइब्रेरियों या फ्रेमवर्क को वास्तविक प्रोजेक्ट्स में पेश करना आमतौर पर काफी मुश्किल होता है। उदाहरण के लिए, आप वास्तव में Vue के साथ काम करने का आनंद लेते हैं। आप अधिकारियों के पास जाते हैं और पूछते हैं कि क्या आप पूरी परियोजना को फिर से लिख सकते हैं। इस तरह के सवाल के जवाब में, लगभग कोई भी विकल्प तुरंत अस्वीकार नहीं किया जाएगा। यदि आप एक निश्चित पृष्ठ पर Vue का उपयोग करने की पेशकश करते हैं, जिसके विकास में आप वर्तमान में लगे हुए हैं, तो ऐसे प्रस्ताव को अच्छी तरह से स्वीकार किया जा सकता है।

निम्नलिखित उदाहरण में, हम एक बहुत ही आदिम अनुप्रयोग विकसित करेंगे, जो अच्छा है क्योंकि इस पर कुछ Vue अवधारणाओं पर विचार करना बहुत सुविधाजनक होगा।

V "हेलो, वीयू!"

इस आवेदन में हम पाठ "हैलो, Vue!" प्रदर्शित करने जा रहे हैं, और पाठ के नीचे - वर्तमान समय और तारीख। फिर हम एक कोड लिखेंगे जो तारीख और समय को अद्यतित रखेगा। नतीजतन, एप्लिकेशन उपयोगकर्ता समय की बीत को देखते हुए इसे एक नियमित घड़ी के रूप में उपयोग करने में सक्षम होगा। एक नया फ़ोल्डर बनाएँ, इसमें एक index.html फ़ाइल बनाएँ और इस फ़ाइल में निम्न कोड जोड़ें:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Hello, Vue.js</title> </head> <body> </body> </html> 

अब हमारे पास पृष्ठ फ़्रेम है, भविष्य के एप्लिकेशन की नींव। इसलिए, हमारा अगला कदम इस पृष्ठ पर Vue.js. स्क्रिप्ट को जोड़ना होगा। पृष्ठ कोड में, बंद करने के ठीक ऊपर </body> , निम्न जोड़ें:

 <!--             --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> </script> 

टिप्पणी पर ध्यान दें। वह एक महत्वपूर्ण बात की ओर इशारा करता है। अर्थात्, अब हमने पृष्ठ के विकास के लिए Vue के संस्करण को कनेक्ट कर दिया है। यदि एक निश्चित पृष्ठ वास्तविक उपयोग के लिए अभिप्रेत है, तो आपको स्क्रिप्ट के उत्पादन संस्करण को उससे कनेक्ट करने की आवश्यकता है। इसके बारे में विवरण यहां पाया जा सकता है ।

अब, स्क्रिप्ट को जोड़ने के बाद, सबसे पहले, हमें रूट तत्व को उस पृष्ठ पर जोड़ना होगा, जिसमें Vue उदाहरण जुड़ा होगा:

 <div id="app"> </div> 

उसके बाद, एक नया Vue उदाहरण बनाएं और उसे बताएं कि उसे किस मूल तत्व से जुड़ना है:

 <script>  const app = new Vue({    el: '#app'  }) </script> 

अब कुछ वैरिएबल बनाएं। वे उन मूल्यों को संग्रहीत करेंगे जिनका उपयोग हम पृष्ठ पर जानकारी प्रदर्शित करने के लिए करते हैं। यह data ऑब्जेक्ट के गुणों को घोषित करके किया जाता है:

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello, Vue!',      now: new Date()     }) </script> 

अब जब डेटा तैयार हो गया है, तो हम पृष्ठ पर इसे प्रदर्शित करने के लिए वीयू की क्षमता का सहारा लेने के लिए तैयार हैं। यह सरल, आसानी से पढ़े जाने वाले निर्माणों का उपयोग करके किया जाता है:

 <div id="app">  <h1>{{ message }}</h1>  <p>{{ now }}</p> </div> 

अब आप अपने पहले Vue.js एप्लिकेशन को बनाए जाने पर खुद को बधाई दे सकते हैं। यदि आप एक ब्राउज़र में index.html खोलते हैं, तो उसे एक पृष्ठ प्रदर्शित करना चाहिए जिस पर "हैलो, Vue!" बड़े अक्षरों में लिखा गया है। इस शिलालेख के नीचे एक रेखा होनी चाहिए जो वर्तमान तिथि और समय प्रदर्शित करती है। उदाहरण के अपने संस्करण के विकास और अनुसंधान के दौरान, मैंने विज़ुअल स्टूडियो कोड और लाइव सर्वर एक्सटेंशन का उपयोग किया।

हमने यहां जो कुछ किया है वह विशेष रूप से उन्नत परियोजना की तरह नहीं दिखता है। लेकिन Vue के आंतों में, बहुत सी चीजें हो रही हैं जो इस परियोजना को हमारी ज़रूरत के अनुसार काम करने की अनुमति देती हैं। फ्रेमवर्क ने DOM और डेटा के बीच संबंध स्थापित किया, जिसके बाद एप्लिकेशन प्रतिक्रियाशील हो गया। हम इसकी जांच कैसे करेंगे? बहुत सरल - बस जेएस कंसोल (एप्लिकेशन पेज पर दाएं) app.message और app.message में कुछ app.message । इससे पृष्ठ पर प्रदर्शित लेबल में बदलाव होना चाहिए। नीचे यह कैसा दिख सकता है।


अनुप्रयोग अनुसंधान

Vue डेवलपर्स को घटक जीवन चक्र की घटनाओं के लिए हैंडलर बनाने की क्षमता भी देता है। इसका मतलब है कि हम created , mounted और destroyed जैसी घटनाओं को सुन सकते हैं। जब कोई घटना होती है, तो आप कुछ कोड के निष्पादन को व्यवस्थित कर सकते हैं। मैं विवरणों में नहीं जाऊंगा, क्योंकि इस सामग्री का मुख्य उद्देश्य Vue एप्लिकेशन बनाने के विभिन्न तरीकों का प्रदर्शन करना है, और फ्रेमवर्क की सभी जटिलताओं को इकट्ठा नहीं करना है। हालांकि, अब हम अभी भी देखते हैं कि घटक जीवन चक्र की घटनाओं का प्रसंस्करण कैसा दिखता है और हमारे पहले आवेदन पर काम पूरा करेगा।

निम्नलिखित कोड के लिए धन्यवाद, now चर का मूल्य हर सेकंड अपडेट किया जाएगा। बढ़ते वीयू में, हम तारीख और समय को अपडेट करने के लिए हर सेकंड में एक फ़ंक्शन कॉल सेट करने के लिए setInterval का उपयोग करते हैं। आप methods ऑब्जेक्ट में उपयुक्त विधियों को जोड़कर जीवनचक्र ईवेंट हैंडलर बना सकते हैं। यह बहुत ही समान है कि हमने data ऑब्जेक्ट के साथ कैसे काम किया। यहाँ कोड है:

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello Vue!',      now: new Date()    },    methods: {      updateDate() {        this.now = new Date();      }    },    mounted() {      setInterval(() => {        this.updateDate();      }, 1000);    }  }) </script> 

यदि आप इस पृष्ठ को एक ब्राउज़र में खोलते हैं, तो इसका स्वरूप नहीं बदलेगा, लेकिन इस पर प्रदर्शित समय हर सेकंड अपडेट किया जाएगा। इस मामले में, हमें मैन्युअल रूप से DOM को अपडेट करने की आवश्यकता नहीं है। DOM से Vue लिंक्ड डेटा। जब डेटा बदलता है, तो पृष्ठ पर जो दिखाया जाता है वह भी बदलता है।

विकल्प # 2: Vue CLI

हालाँकि हमने केवल Vue स्क्रिप्ट को पेज से जोड़कर एप्लिकेशन बनाया है, लेकिन यह दृष्टिकोण बहुत अधिक स्केलेबल नहीं है। यदि आपको एक पूर्ण-पृष्ठ एकल-पृष्ठ अनुप्रयोग (एकल पृष्ठ अनुप्रयोग, एसपीए) विकसित करने की आवश्यकता है और उसी समय आप Vue सहायक उपकरण का उपयोग करना चाहते हैं, तो Vue CLI का सहारा लेना सबसे अच्छा है।

यदि आप उन लोगों में से एक हैं जो वास्तव में कमांड लाइन पर काम करना पसंद नहीं करते हैं, तो आप अच्छी तरह से समान विशेषताओं वाले एक उपकरण का उपयोग कर सकते हैं जिसमें एक ग्राफिकल इंटरफ़ेस (Vue UI) है।

▍Installing Vue CLI

सबसे पहले हमें Vue CLI को इंस्टॉल करना होगा। ऐसा करने से पहले, आपको Node.js और npm प्राप्त करना होगा। यदि आपने पहले Node.js और npm के साथ काम नहीं किया है, तो उन्हें जानने और उन्हें समझने के लिए कुछ समय लें। यहाँ कमांड है जिसके साथ Vue CLI स्थापित करना है:

 npm install -g @vue/cli 

एक नया एप्लिकेशन बनाने के लिए, आप vue create कमांड का उपयोग कर सकते हैं। आप उन आदेशों की सूची का पता लगा सकते हैं जो vue -h कमांड का उपयोग करके समर्थन करते हैं।


Vue द्वारा समर्थित आदेशों की सूची

create कमांड एप्लिकेशन के नाम को स्वीकार करता है। निम्नलिखित कमांड चलाकर एक नया Vue एप्लिकेशन बनाएं:

 vue create hello-vue 

इस आदेश के दौरान, वर्तमान निर्देशिका में एक नया hello-vue फ़ोल्डर बनाया जाएगा। vue create उपयोग करके एप्लिकेशन बनाने की प्रक्रिया का विस्तृत विवरण एक अलग लेख के योग्य है।

अभी के लिए, डिफ़ॉल्ट सेटिंग से सहमत होना हमारे लिए पर्याप्त है। यह एक नए एप्लिकेशन के निर्माण की ओर ले जाएगा।


Vue CLI का उपयोग करके एक नया एप्लिकेशन बनाना

अब hello-vue फ़ोल्डर में जाएं, src/components/HelloWorld.vue पर स्थित फ़ाइल खोलें, और इसकी सभी सामग्रियों को निम्न कोड से बदलें:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

कृपया ध्यान दें कि msg में दिखाई देने वाले पाठ का मान src/App.vue में सेट किया गया है।

अब कमांड लाइन पर या अपने संपादक में निर्मित टर्मिनल पर, निम्न कमांड चलाएँ:

 npm run serve 

यह सर्वर को शुरू करेगा, जिसके बाद यह एप्लिकेशन के स्टार्ट पेज को खोलने के तरीके के बारे में जानकारी देगा। अर्थात्, यह http: // localhost: 8080 / है ।


ब्राउज़र में Vue एप्लिकेशन

यहाँ हमने केवल बहुत ही सतही रूप से Vue CLI के उपयोग की जांच की। हालांकि, मुझे आशा है कि इस उदाहरण से आपको पता चला है कि एक विश्वसनीय बुनियादी ढाँचे के साथ प्रदान किए गए नए अनुप्रयोगों को बनाने के लिए वीयू सीएलआई का उपयोग करना कितना आसान है और यह एक विकासशील परियोजना की बढ़ती जरूरतों के अनुरूप हो सकता है।

विकल्प # 3: Vue UI

Vue CLI के साथ कमांड लाइन टूल के साथ, Vue UI टूल भी इंस्टॉल किया गया है। इसे शुरू करने के लिए, निम्नलिखित कमांड का उपयोग करें:

 vue ui 

इसके निष्पादन के दौरान, नए एप्लिकेशन का पृष्ठ खोला जाएगा, जो http: // localhost: 8000 / डैशबोर्ड पर स्थित है ।


Vue UI पेज

Vue UI का उपयोग करके, आप एक नया प्रोजेक्ट बना सकते हैं जिसमें कमांड-लाइन टूल का उपयोग करके बनाई गई परियोजना के समान क्षमताएं होंगी।


Vue UI में एक नया प्रोजेक्ट बनाना

प्रोजेक्ट सेटअप पूरा होने के बाद, आप इसे सीधे Vue UI से Project tasks अनुभाग पर जाकर और संबंधित बटन पर क्लिक करके शुरू कर सकते हैं।


Vue UI में एप्लिकेशन चलाना

विकल्प # 4: कोडसैंडबॉक्स

यद्यपि पहले Vue एप्लिकेशन को बनाने के लिए उपरोक्त विकल्पों ने हमें अपना लक्ष्य प्राप्त करने की अनुमति दी थी, उन्हें विकास पर्यावरण के कुछ विन्यास की आवश्यकता होती है। शायद यह आपको शोभा नहीं देता और आपने अभी भी अपना पहला Vue एप्लिकेशन नहीं बनाया है। यदि ऐसा है, तो अब हम Vue के साथ काम करने का एक और तरीका देखेंगे। इसमें ऑनलाइन विकास वातावरण का उपयोग करना शामिल है, जिनमें से एक कोडसैंडबॉक्स है ।

CodeSandbox पर प्रोजेक्ट बनाने से पहले, आपको साइट पर पंजीकरण करना होगा या GitHub खाते का उपयोग करके लॉग इन करना होगा। उसके बाद, आपको एक नया "सैंडबॉक्स" बनाने की आवश्यकता है (परियोजना के भीतर इसे "सैंडबॉक्स" कहा जाता है) और उपलब्ध टेम्पलेट्स ( Popular templates या Client templates टैब पर) के बीच Vue ढूंढें।


CodeSandbox में एक नया Vue- आधारित प्रोजेक्ट बनाना

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


CodeSandbox में आवेदन पर काम करें

संपादक में src/components/HelloWorld.vue फ़ाइल खोलें और इसकी सामग्री को निम्न कोड से बदलें:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

उसके बाद, आपको वही एप्लिकेशन दिखाई देगा जो हमने पहले ही काम किया था। किसी प्रोजेक्ट पर काम करते समय, उसे किसी को दिखाना आवश्यक हो सकता है। उदाहरण के लिए, किसी चीज के बारे में परामर्श करने के लिए। CodeSandbox आपको एक विशेष लिंक का उपयोग करके ऐसा करने की अनुमति देता है।


CodeSandbox में आवेदन पर काम करें

उपयोगी संसाधन

यहाँ मेरे कुछ पसंदीदा Vue संसाधनों के लिंक दिए गए हैं। वे इस ढांचे के विकास में आपको आगे बढ़ने में मदद करेंगे। उदाहरण के लिए, यहाँ बहुत बढ़िया Vue पृष्ठ है, जिस पर जाकर आप Vue पारिस्थितिकी तंत्र के पैमाने का अंदाजा लगा सकते हैं। यहां Vue repositories खोजें। यहाँ आधिकारिक परियोजना ब्लॉग है। यहां Vue डेवलपर कम्युनिटी साइट है। वहाँ तुम जाओ - Vue पॉडकास्ट। यहां कई Vue- आधारित परियोजनाओं के पृष्ठ हैं: VuePress , Nuxt , Gridsome ।

आगे क्या है?

कोई फर्क नहीं पड़ता कि आप फ़्रंट को विकसित करने के लिए किस ढांचे का उपयोग करते हैं, आपको अपने जावास्क्रिप्ट ज्ञान को अच्छी स्थिति में रखने की आवश्यकता है। जितना अधिक समय आप अपने जेएस ज्ञान को बेहतर बनाने के लिए समर्पित कर सकते हैं, उतना बेहतर होगा। यदि आप जावास्क्रिप्ट को अच्छी तरह से जानते हैं, तो इसका मतलब है कि आप किसी भी ढांचे या किसी भी पुस्तकालय को संभाल सकते हैं, जिसके साथ आपको काम करने की आवश्यकता हो सकती है।

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

दस्तावेज़ीकरण के साथ काम करते समय, आपको निम्नलिखित बुनियादी Vue अवधारणाओं पर विशेष ध्यान देना चाहिए:

• घटकों।
• डेटा बाइंडिंग।
• इवेंट हैंडलिंग।
• निर्देशक।
• तरीके।
• परिकलित गुण।
• घटक जीवन चक्र।
• गुण घटकों को पारित कर दिया।

अभी के लिए बड़े एप्लिकेशन बनाने का प्रयास न करें। बुनियादी चीजों में महारत हासिल करने पर ध्यान दें, और बाकी सब कुछ समय के साथ आएगा।

परिणाम

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

प्रिय पाठकों! यदि आपको हाल ही में अपने पहले ग्राहक ढांचे का अध्ययन करना था, तो कृपया हमें बताएं कि यह कैसा था।