Vue CLI 3 के साथ अपने Vue.js वर्कफ्लो को बूस्ट करें

() translation by (you can also view the original English article)

हम कमांड लाइन इंटरफेस (CLI) टूल की मदद के बिना आधुनिक वेब डेवलपमेंट कि शायद ही कल्पना कर सकते हैं। वह दोहराने वाले और थका देने वाले कामों की मात्रा को कम करके डेवलपमेंट वर्कफ्लो को सुविधा और गति प्रदान करते हैं। सभी लिंटिंग, बिल्डिंग, टेस्टिंग, प्रीप्रॉसेसिंग, ऑप्टिमाइजिंग, और डिपेंडेंसीज ट्रैकिंग फीचर्स के साथ मैनुअल रूप से एक प्रोजेक्ट को सेटअप करना, एक मजेदार काम की तरह साउंड नहीं करता है, है ना?

यही कारण है कि आधुनिक क्लाइंट-साइड डेवलपमेंट फ्रेमवर्क (जैसे कि Angular, React, आदि) CLI टूल्स के अपने स्वयं के वर्जन की पेशकश करते हैं, और Vue.js कोई अपवाद नहीं है। लेकिन अपने सबसे नए तीसरे वर्जन के साथ, Vue CLI दूसरों से एक कदम आगे जा रहा है। यह अब ना केवल अत्यधिक शक्तिशाली और लचीला है, बल्कि पूरी तरह से विकसित GUI के साथ आता है। जी हां, आपने सही सुना। Vue CLI 3 एक पूरा ग्राफिकल यूजर इंटरफेस out-of-the-box प्रदान करता है।

नया Vue.js प्रोजेक्ट शुरू करना नए Vue CLI के साथ पहले से कहीं अधिक आसान है और यह Vue UI GUI है। यह ट्यूटोरियल आपको दिखाएगा कि कैसे उपयोग करने के लिए Vue CLI कोड डालें और कैसे Vue UI आपके वर्कफ्लो को और भी तेज कर सकता है। आइए शुरू करते हैं!

Vue CLI क्या है?

Vue CLI तेजी से प्रोटोटाइप, आसान एप्लिकेशन स्कैफोल्डिंग और कुशल प्रोजेक्ट मैनेजमेंट के लिए टूल्स का एक सेट है। यह तीन मुख्य टूलबेल्ट से बना है:

CLI एक ग्लोबल रूप में इंस्टॉल npm पैकेज है, जो vue कमांड के माध्यम से कोर फंक्शनैलिटी प्रदान करता है। यह हमें एक नए प्रोजेक्ट को आसानी से बनाने की अनुमति देता है (vue create), या बस जल्दी से रॉ आइडिया (vue serve) को प्रोटोटाइप करता है। यदि हम अपने प्रोजेक्ट पर अधिक कंक्रीट और विजुअल कंट्रोल चाहते हैं, तो हम vue ui कमांड को चलाकर CLI का GUI वर्जन खोल सकते हैं।
CLI Service एक डेवलपमेंट डिपेंडेंसी (एक vue-cli-service binary file) है, जिसे लोकल रूप से CLI के साथ बनाए गए प्रत्येक प्रोजेक्ट में इंस्टॉल किया जाता है। यह हमें अपने प्रोजेक्ट को डेवलप करने की अनुमति देता है (vue-cli-service serve), इसे प्रोडक्शन के लिए पैक करें (vue-cli-service build), और इंटरनल वेबपैक प्रोजेक्ट के कॉन्फ़िगरेशन (vue-cli-service inspect) का भी निरीक्षण करें।
CLI Plugins npm पैकेज है जो हमारे प्रोजेक्ट को अतिरिक्त फीचर्स प्रदान करता है। उनके नाम या तो @vue/cli-plugin- (बिल्ट-इन प्लगइन के लिए) या vue-cli-plugin- (कम्युनिटी प्लगिंस के लिए) से शुरू होते हैं। हम उन्हें vue add कमांड के माध्यम से डेवलपमेंट प्रोसेस के किसी भी समय जोड़ सकते हैं।

अगले सेक्शंस में, हम ऊपर दिए गए टूल्स और फीचर्स के सभी नट और बोल्ट का पता लगाएंगे, लेकिन पहले, आइए वास्तविक फीचर्स को देखे जो Vue CLI को इतना शक्तिशाली और लचीला बनाते हैं।

Vue CLI हमारे Vue.js डेवलपमेंट वर्कफ्लो को बूस्ट करने के लिए एक फुल-फीचर्ड सिस्टम है।

Vue CLI ने अपने बेहतरीन फीचर्स की बदौलत Vue.js के प्रोजेक्ट डेवलपमेंट को तेज और आसान कर दिया है। आइए देखते हैं वे फीचर्स क्या है:

Plugin-based architecture। Vue CLIपूरी तरह से प्लगिंस के आसपास बनाया गया है, जो इसे बहुत लचीला और एक्सटेंसिबल बनाता है। हम चुन सकते हैं कि प्रोजेक्ट निर्माण के प्रोसेस के दौरान कौन से बिल्ट-इन प्लगइन्स को जोड़ना है। लेकिन हम केवल इन्हीं तक सीमित नहीं है, हम प्रोजेक्ट के निर्माण के बाद किसी भी समय किसी भी प्लगइन को जोड़ सकते हैं।
Vue CLI पूरी तरह से configurable, extensible, और upgradable है।
ऑफिशियल प्री-इंस्टॉल किए गए प्लगिंस का एक सेट, जो फ्रंट एंड इकोसिस्टम (Babel, ESLint, TypeScript, PWA, Je st, Mocha, Cypress, और Nightwatch) से फर्स्ट क्लास टूल को इंटीग्रेट करता है।
एक सिंगल डिफॉल्ट प्रीसेट, जिसे हम प्रोजेक्ट डेवलपमेंट के दौरान या बाद में अपनी आवश्यकताओं के अनुसार बदल सकते हैं।
इजेक्ट करने की जरूरत नहीं है। React और Angular CLI टूल्स के विपरीत, हम ऐप को इजेक्ट करने और मैनुअल कंफीग्रेशन पर स्विच किए बिना डेवलपमेंट के बाद किसी भी समय हमारे प्रोजेक्ट के वेबपैक कॉन्फ़िगरेशन का सुरक्षित रूप से निरीक्षण और ट्विक (tweak) कर सकते हैं।
मल्टी पेज सपोर्ट
बिना किसी कॉन्फ़िगरेशन के इंस्टेंट प्रोटोटाइपिंग।
अलग-अलग बिल्ड टारगेट हमें अपने प्रोजेक्ट के विभिन्न वर्जन प्रोड्यूस करने की अनुमति देते हैं - हम एक और सिर्फ एक ही कोड बेस का उपयोग कर सकते हैं और इसे ऐप, लाइब्रेरी या वेब कॉम्पोनेंट्स के रूप में बना सकते हैं।
मॉडर्न मोड फीचर। यह आधुनिक ब्राउज़र के लिए हमारे ऐप का निर्माण करेगा, लेकिन पुराने वालो के लिए ऑटोमेटिक फॉल बैक के साथ। कूल है, है ना?
आसानी से मुश्किल प्रोजेक्ट को बनाने, अब, और मैनेज करने के लिए पूरी तरह से विकसित GUI।
UI Plugin API। Vue UI एक प्लगइन API का उपयोग करता है जिसे हम CLI के GUI वर्जन में कस्टम फंक्शनैलिटी जोड़ने के लिए उपयोग कर सकते हैं।
कम्युनिटी से बहुत सारे उपयोगी प्लगिंस।

Vue CLI के साथ शुरुआत करना

Vue CLI मैजिक के बारे में जानने के बाद, यह इसे प्रैक्टिस में देखने का समय है। सबसे पहले, हमें Vue CLI 3 इंस्टॉल करने की जरूरत है। इसके लिए Node.js 8.9+ (8.11.0+ रेकमेंडेड) की आवश्यकता है, इसलिए हमें यह सुनिश्चित करने की आवश्यकता है कि हमारे पास यह हमारे मशीनों पर है। तब हम सिर्फ अपना टर्मिनल या कमांड प्रॉन्प्ट खोलते हैं, और चलाते हैं:

1	npm install -g @vue/cli

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

इंसटेंट प्रोटोटाइपिंग

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

1	npm install -g @vue/cli-service-global

अब से, हम जब चाहे vue serve कमांड का उपयोग कर सकते हैं। चलिए यह कोशिश करते हैं। हम निम्नलिखित कंटेंट के साथ एक App.vue फाइल बनाते हैं:

1	<template>
2	<h1>Hello, Vue!</h1>
3	</template>

फिर, उसी डायरेक्टरी में, हम इसे चलाते हैं।

vue serve

यह Vue CLI डेवलपमेंट सर्वर को शुरू करेगा और http://localhost:8080/ पर ऐप को चलाएगा। जब हम इस एड्रेस पर ब्राउज़र को खोलते हैं, तो हमें एक अच्छा सी Hello, Vue! हेडिंग दिखनी चाहिए।

एक नया प्रोजेक्ट बनाना

पिछला सेक्शन सिर्फ एक वार्मअप था। आइए अब कुछ और कंपलेक्स बनाते हैं।

vue create कमांड एक नए प्रोजेक्ट के लिए ऑप्शन को सिलेक्ट करने के लिए एक इंटरैक्टिव प्रोसेस का उपयोग करता है। आइए इसे चलाते हैं और इसके ऑप्शंस पर चलते हैं।

1	vue create vuecli-project

Vue CLI के साथ एक नया प्रोजेक्ट बनाएं

Create a project with Vue CLI pick a preset

पहली विंडो में, हमें एक प्रीसेट को चुनने के लिए इनवाइट किया गया है। आउट ऑफ द बॉक्स केवल एक प्रीसेट उपलब्ध है, जिसको default कहा जाता हैं। हम दूसरा ऑप्शन चुनेंगे, जोकि प्रोजेक्ट के लिए आवश्यक फीचर्स को मैन्युअल रूप से चुनना है, और आगे बढ़ने के लिए Enter दबाएं।

Create a project with Vue CLI Manually select features

अगली विंडो में, हम एरो keys का प्रयोग करते हैं फीचर्स की लिस्ट में ऊपर और नीचे नेविगेट करने के लिए और स्पेस बार का प्रयोग उसे सिलेक्ट करने के लिए करते हैं जो हम चाहते हैं। यहां, पहले से ही सिलेक्टेड Babel और Linter/Formatter के साथ, मैंने Router और VueX की भी जांच की। एक बार जब आप आवश्यक फीचर्स को सिलेक्ट कर ले, तो आगे बढ़ने के लिए Enter दबाएं।

Create a project with Vue CLI Use history mode

अगली विंडो में, हमें पूछा जाता है कि राउटर के लिए हिस्ट्री मोड का उपयोग करें या नहीं। मैंने डिफॉल्ट Yes को एक्सेप्ट करने के लिए Enter दबाया।

Create a project with Vue CLI Pick a linter

अगली विंडो में, हमें यह चुनने की आवश्यकता है कि हम Linter को कैसे कॉन्फ़िगर करना चाहते हैं। मैंने ESLint+ Prettier को सिलेक्ट किया।

Create a project with Vue CLI Additional lint features

अगली विंडो में, हम सुनते हैं कि प्रोजेक्ट को इंस्पेक्ट करने के लिए Linter का उपयोग कब किया जाता है। मैंने Lint on save को चुना, जो हर बार फाइल सेव होने पर अप्लाई होता है।

Create a project with Vue CLI Dedicated config file or config in packagejson

अगली विंडो में, हमें यह तय करने की आवश्यकता है कि हम अपने प्रोजेक्ट को कैसे कॉन्फ़िगर करना चाहते हैं। यह चुने कि आप प्रत्येक फीचर्स के लिए अलग कंफीग्रेशन फाइलों का उपयोग करना चाहते हैं, या package.json फाइल में सभी कॉन्फ़िगरेशन सेटिंग्स शामिल करना चाहते हैं। मैं एक सिंगल फाइल पसंद करता हूं, और In package.json ऑक्शन को चुनता हूं।

Create a project with Vue CLI Save these settings as a preset

अंतिम विंडो में, हमारे पास भविष्य के प्रोजेक्ट के लिए आसानी से प्रयोग किए जाने वाले प्रीसेट का उपयोग करके पूरे प्रोजेक्ट क्रिएशन कंफीग्रेशन को सेव करने की क्षमता है। मैंने spa-simple के रूप में अपना वाला सेव किया। प्रीसेट को यूजर फोल्डर में .vuerc फाइल में सेव किया जाता है।

जब हम क्रिएशन प्रोसेस को पूरा करते हैं, तो प्रोजेक्ट बना लिया जाएगा और कॉन्फ़िगर भी कर लिया जाएगा, और रिक्वायर्ड पैकेज डाउनलोड और इंस्टॉल किए जाएंगे।

Create a project with Vue CLI Generating project files

प्रोजेक्ट स्ट्रक्चर को एक्सप्लोर करना

इस सेक्शन में, हम यह पता लगाएंगे कि Vue CLI ने हमारे लिए क्या बनाया है।

Create a project with Vue CLI The project structure

ऊपर दिखाए गए प्रोजेक्ट फोल्डर में, हमारे पास निम्न फाइल और फोल्डर है:

node_modules फोल्डर में वे पैकेज होते हैं जिनकी ऐप और डेवलपमेंट टूल को आवश्यकता होती है।
public फोल्डर में स्टैटिक प्रोजेक्ट एसेट होते हैं, जो बंडलिंग प्रोसेस में शामिल नहीं होंगे।
src फोल्डर में सभी रिसोर्सेज के साथ Vue.js एप्लीकेशन होती है।
.gitignore में उन फाइलों और फोल्डर की सूची होती है, जिन्हें Git वर्जन कंट्रोल से बाहर रखा गया है।
babel.config.js में Babel कंपाइलर के लिए कॉन्फ़िगरेशन सैटिंग्स शामिल है।
package.json में Vue.js डेवलपमेंट के साथ साथ डेवलपमेंट टूल्स के लिए उपयोग किए जाने वाले कमांड के लिए आवश्यक पैकेजों की लिस्ट होती है।
package-lock.json में पैकेजेस की एक पूरी लिस्ट होती है, जो प्रोजेक्ट के लिए आवश्यक होती हैं, और उनकी डिपेंडेंसीज।
README.md में प्रोजेक्ट के बारे में सामान्य जानकारी होती है

नया बनाया गया src फोल्डर

आइए अब src फोल्डर में करीब से एक नजर डालें:

Create a project with Vue CLI the src folder

ऊपर दिखाए गए src फोल्डर में, हमारे पास निम्न फाइलें और फोल्डर हैं:

assets फोल्डर का उपयोग ऐप द्वारा आवश्यक स्टैटिक रिसोर्सेज के लिए किया जाता है और जिसे बंडलिंग प्रोसेस में शामिल किया जाएगा।
components फोल्डर का उपयोग एप्लीकेशन के कॉम्पोनेंट्स के लिए किया जाता है।
views फोल्डर का उपयोग उन कॉम्पोनेंट्स के लिए किया जाता है जो URL रूटिंग फीचर का उपयोग करके डिस्पले किए जाएंगे।
App.vue रूट कॉम्पोनेंट है।
main.js जावास्क्रिप्ट की फाइल है जो Vue इंस्टेंस ऑब्जेक्ट बनाती है।
router.js का उपयोग Vue राउटर को कॉन्फ़िगर करने के लिए किया जाता है।
store.js का उपयोग Vuex के साथ बनाए गए डाटा स्टोर को कॉन्फ़िगर करने के लिए किया जाता है।

प्रोजेक्ट कंफीग्रेशन को बदलना

डिफॉल्ट प्रोजेक्ट कंफीग्रेशन में सेंसिबल सेटिंग्स होती हैं, लेकिन अगर हमें जरूरत होती है, तो हम उन्हें प्रोजेक्ट फोल्डर में vue.config.js फाइल को जोड़कर या package.json फाइल में एक vue सेक्शन जोड़कर बदल सकते हैं। चलो पहले वाले को करने का प्रयास करें: हम एक vue.config.js फाइल बनाते हैं और उसमें निम्न ऑप्शन डालते हैं:

1	module.exports = {
2	runtimeCompiler: true
3	}

यह कॉम्पोनेंट्स को template एलिमेंट्स का उपयोग करने के बजाय उनके टेंप्लेट को स्ट्रिंग के रूप में डिफाइन करने की अनुमति देगा। कंफीग्रेशन ऑप्शंस के पूरे सेट का पता लगाने के लिए आप Vue CLI कॉन्फ़िग पेज पर जा सकते हैं।

प्रोजेक्ट को डेवलप करना

जैसा कि हमने ऊपर देखा, Vue CLI सर्विस तीन डिफॉल्ट स्क्रिप्ट के साथ आती है: serve, build, और inspect। पहले एक का उपयोग डेवलपमेंट प्रोसेस के लिए किया जाता है। हम npm run serve कमांड के साथ अपने प्रोजेक्ट को रन करते हैं:

जब हम ब्राउज़र में अपना ऐप खोलते हैं, तो हमें निम्नलिखित पेज दिखना चाहिए:

यह Home.vue पेज है, जो HelloWorld.vue कंपोनेंट का उपयोग करता है।

वर्किंग Hot Module Replacement (HMR) फीचर के साथ webpack-dev-server पर आधारित serve कमांड एप डेवलपमेंट सर्वर शुरू करती है। इसका मतलब यह है कि जब हम अपने कॉम्पोनेंट्स में बदलाव करते हैं और उन्हें सेव करते हैं, तो वे तुरंत रिफ्लेक्ट होंगी, और तेज ब्राउजर में अपडेट हो जाएगा।

Vue CLI प्लगिंस के साथ प्रोजेक्ट में नई फंक्शनैलिटी जोड़ना

हमारे एप्लीकेशन डेवलपमेंट के कुछ बिंदु पर, हमें प्रोजेक्ट में कुछ अतिरिक्त फंक्शनैलिटी जोड़ने की आवश्यकता हो सकती है, और इसके लिए हमें Vue CLI प्लगइन को इंस्टॉल करना होगा। Vue CLI प्लगइन वेबपैक कंफीग्रेशन को मॉडिफाई कर सकता है और vue-cli-service में नए कमांड इंजेक्ट कर सकता है। एक प्लगइन इंस्टॉल करने के लिए, हम vue add कमांड का उपयोग करते हैं।

मान लीजिए कि हम अपने प्रोजेक्ट के लिए बूटस्ट्रैप कॉम्पोनेंट्स का उपयोग करना चाहते हैं। सौभाग्य से, एक bootstrap-vue प्लगइन है, जो उन्हें हमारे लिए प्रदान कर सकता है। इसे इंस्टॉल करने के लिए, हम यह रन करते हैं:

1	vue add bootstrap-vue

प्लगइन के इंस्टॉलेशन के बाद, src फोल्डर में, हम एक नया plugins फोल्डर पाएंगे जहां नया प्लगइन रखा गया है।

अब, प्लगइन की फंक्शनैलिटी का परीक्षण करने के लिए, आइए About.vue फाइल को मॉडिफाई करते हैं:

<template>
  <div class="about">
    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">
        <p>For more information visit website</p>
      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>
    </b-jumbotron>
  </div>
</template>

और जब हम ब्राउज़र में About पेज पर पॉइंट करते हैं, तो हमें पेज बूटस्ट्रैप के साथ अपडेट और स्टाइल में नजर आएगा।

प्रोडक्शन के लिए प्रोजेक्ट को बिल्ड करना

जब एप्लीकेशन डेप्लॉय होने के लिए तैयार होती है, तो आपको केवल ऐप कोड और कंटेंट वाले बंडलों का एक सेट बनाने की जरूरत होती है,साथ ही भेज इस मॉड्यूल पर निर्भर होते हैं, उनके साथ ही फाइलों को एक प्रोडक्शन HTTP सर्वर पर डेप्लॉय किया जा सकता है।

ऐप को बिल्ड करना

अपनी ऐप को बिल्ड करने के लिए, हम यह रन करते हैं:

1	npm run build --modern

--modern अरगुमेंट एप्लीकेशन के दो वर्जन बनाते हैं। उनमें से एक को आधुनिक ब्राउज़र के लिए टारगेट किया गया है जो नए जावास्क्रिप्ट फीचर्स को सपोर्ट करते हैं, और दूसरा पुराने ब्राउज़र के लिए फॉल बैक है जिन्हें ऑल फीचर्स को संभालने के लिए अतिरिक्त लाइब्रेरीज की आवश्यकता होती है। कूल बात यह है कि हम ऐप को डेप्लॉय करने के बाद, एक वर्जन का उपयोग करने का सिलेक्शन पूरी तरह से ऑटोमेटिक है!

नोट: जब हम build कमांड चलाते हैं, तो Vue CLI हमें एक --target ऑप्शन स्पेसिफाई करने की अनुमति देता है, जो हमें अलग अलग उपयोग के मामलों के लिए हमारे कोड बेस का उपयोग करने की अनुमति देता है। डिफॉल्ट बिल्ड टारगेट एक ऐप बनाने के लिए निर्धारित किया गया। हमारे पास चुनने के लिए दो और ऑप्शंस हैं: एक लाइब्रेरी या वेब कॉम्पोनेंट के रूप में अपना कोट बनाने के लिए। अधिक जानकारी के लिए Build Targets पेज को चेक करें।

dist फोल्डर एक्सप्लोर करना

जब बिल्ड प्रोसेस पूरा हो जाता है, तो एक dist फोल्डर प्रोजेक्ट रूट में बनाया जाता है। आई को एक्सप्लोर करें:

index.html फाइल एप्लीकेशन के लिए एंट्री प्वाइंट होगी। इसमें link और script एलिमेंट शामिल है जो css और js फ़ोल्डर्स से सभी अवश्य CSS और जावास्क्रिप्ट फाइलों को लोड करेंगे।

इसलिए अब, हम अपने आप को एक प्रोडक्शन सर्वर पर डेप्लॉय करने के लिए तैयार है। सुनने के लिए बहुत सारे ऑप्शंस है। आप उनमें से कई के बारे में Deployment पेज पर जाकर जान सकते हैं।

चलिए हमारे प्रोजेक्ट को GUI-fy करें Vue UI के साथ

Vue CLI 3 बहुत शक्तिशाली है, लेकिन यह एक कीमत के साथ आता है। कॉन्फ़िगर करने और याद रखने के लिए बहुत सारे चॉइस, कमांड, और ऑप्शन है। यह काम करने के लिए इसे और अधिक कांपलेक्स और कठिन बनाता है। चीजों को आसान और खुशहाल स्थिति में वापस लाने के लिए, Guillaume Chau ने Vue UI बनाया, जो डेवलपमेंट के अनुभव को काफी सरल करता है और इसे अधिक एप्रोच के योग्य बनाता है। पहले तो यह एक CLI टूल को ग्राफिकल इंटरफेस के साथ कंबाइन करने के लिए थोड़ा अजीब लग सकता है, लेकिन जैसा कि आप बाद में देखेंगे, यह असाधारण सिंबोसिस (symbiosis) काफी शक्तिशाली और एफिशिएंट है।

Vue UI के साथ हमारे प्रोजेक्ट को फिर से बनाना

इस सेक्शन, हम उसी प्रोजेक्ट के निर्माण में जाएंगे, जिसे हमने पहले बनाया था, लेकिन इस बार हम Vue UI का उपयोग करेंगे।

Vue UI अपने स्वयं के युवाओं फ्रेमवर्क के साथ बनाया गया है और ब्राउज़र में इसे चलाने के लिए किसी इलेक्ट्रॉन की आवश्यकता नहीं है। बस vue ui कमांड को रन करें, चाहे कोई भी डायरेक्टरी हो:

vue ui

Vue Project Manager सिलेक्टेड Projects टैब के साथ लॉन्च किया गया है। अभी कोई मौजूदा प्रोजेक्ट नहीं है। यहां कुछ प्रोजेक्ट्स लिस्टेड करने के लिए, हमें या तो उन्हें UI के माध्यम से बनाना होगा, या CLI के साथ बनाए गए प्रोजेक्ट्स को इंपोर्ट करना होगा। आइए देखें कि हम एक नया प्रोजेक्ट कैसे बना सकते हैं।

हम Create टैब पर स्विच करते हैं, हमारे ऐप के लिए वांछित डायरेक्टरी में नेविगेट करते हैं, और Create a new project here बटन पर क्लिक करते हैं।

Create a new project with Vue UI pick a folder

अगली स्क्रीन में, हम प्रोजेक्ट फोल्डर को एक नाम देते हैं और उस पैकेज मैनेजर को चलते हैं जिसे हम चाहते हो।

Create a new project with Vue UI Select a preset

अगली स्क्रीन में, हमें प्रोजेक्ट के लिए प्रीसेट चुनने की अनुमति मिलती है। यह डिफॉल्ट, मैनुअल, रिमोट या कस्टम प्रीसेट हो सकता है जिसे हमने पहले बनाया है। spa-simple एक कस्टम प्रीसेट का उदाहरण है। या हम Manual चुनते हैं।

Create a new project with Vue UI Select project features

अगली स्क्रीन में, हम उन प्लगिंस को चुनते हैं जिन्हें हम इंस्टॉल करना चाहते हैं।

Create a new project with Vue UI Select plugins

अंत में, हम उन प्लगिंस के लिए कॉन्फ़िगरेशन सेटिंग्स सेट करते हैं जिन्हें हमने इंस्टॉल करने के लिए चुना है। जब हम तैयार होते हैं तो हम Create Project बटन दबाते हैं।

Create a new project with Vue UI Welcome to your new project

अब प्रोजेक्ट बनाया जाएगा और हमें प्रोजेक्ट के डैश बोर्ड पर रीडायरेक्ट किया जाएगा।

Vue UI प्रोजेक्ट डैशबोर्ड का उपयोग करना

Plugins सेक्शन में सभी इंस्टॉल किए गए प्लगिंस लिस्टेड हैं। एक नया प्लगइन इंस्टॉल करने के लिए, हम Add plugin बटन को हिट करते हैं।

यहां, हम उस प्लगइन को सर्च कर सकते हैं जिसकी हमें आवश्यकता हो और जब हम इसे सर्च करते हैं, तो हम Install बटन दबाते हैं। हमारे मामले में, हम bootstrap-vue प्लगइन को सर्च और इंस्टॉल करते हैं।

जब प्लगइन इंस्टॉल कर लिया जाता है, तो Configuration टैब में, हम प्रोवाइड किए गए ऑप्शन को सेट कर सकते हैं।

Files changed टैब में, हम निरीक्षण कर सकते हैं कि कौन सी फाइल अफेक्टेड है और कैसे। यहां, मैं कोई बदलाव नहीं करना चाहता, इसलिए मैंने Skip बटन दबाया।

Dependencies सेक्शन में हमने सभी मुख्य और डेवलपमेंट डिपेंडेंसीज को लिस्टेड किया है। डिपेंडेंसी जोड़ने के लिए, हम Install dependency बटन पर क्लिक करते हैं।

Project Dashboard Install new dependency

मॉडल विंडो में, हम मुख्य या डेवलपमेंट डिपेंडेंसीज के लिए सर्च कर सकते हैं और उन्हें इंस्टॉल कर सकते हैं।

Configuration सेक्शन में, हम अपने द्वारा जोड़े गए प्लगिंस के लिए प्रदान की गई सेटिंग्स को कस्टमाइज कर सकते हैं। यहां, हमारे पास Vue CLI और ESLint प्लगइन के लिए सेटिंग्स है।

Tasks सेक्शन हमें Vue CLI और अन्य प्लगिंस से उपलब्ध सभी प्रोवाइड की गई कमांड्स का उपयोग करने का सुविधाजनक तरीका देता है। इस स्क्रीन में, serve टास्क सिलेक्टेड है। हम Parameters बटन दबाकर इसके पैरामीटर को बदल सकते हैं।

Project Dashboard serve tasks parameters

मॉडल विंडो में, हम उन पैरामीटर्स को सिलेक्ट करते हैं जिन्हें हम टास्क के साथ चलाना चाहते हैं।

Project Dashboard Running the serve task

जब हम serve टास्क चलाते हैं, तो डैशबोर्ड कुछ उपयोगी जानकारी के साथ अपडेट करेगा।

जब हम Output टैब पर जाते हैं, तो हमें टास्क प्रोसेस के लिए लॉग्स मिलते हैं

जब हम Analyzer टैब पर जाते हैं, तो हमें एक अच्छा ग्राफ मिलता, जो पूरे प्रोजेक्ट की जानकारी को संक्षेप में प्रस्तुत करता है।

build टास्क एक अपवाद के साथ लगभग serve टास्क के समान ही है जोकि पूर्व में प्रोडक्शन बंडल बनाता है जिसका उपयोग एप्लीकेशन को डेप्लॉय करने के लिए किया जा सकता है।

हम build टास्क के लिए पैरामीटर को उसी तरह सेट कर सकते हैं जिस तरह से serve टास्क के साथ करते हैं।

Inspect टास्क का Output फील्ड हमें हल किए गए वेबपैक कंफीग्रेशन के बारे में जानकारी देता है।

और बस इतना ही। हमने Vue UI के साथ अपने प्रोजेक्ट को सफलतापूर्वक बनाया। लेकिन जैसा कि हमने देखा कि जब हम GUI का उपयोग करते हैं, तो क्रिएशन और कंफीग्रेशन प्रोसेस आसान और अधिक सुखद होता है।

निष्कर्ष

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