Vue.js CLI को समझना और इसका उपयोग कैसे करें

Vue.js CLI (कमांड लाइन इंटरफ़ेस) एक शक्तिशाली उपकरण है जो Vue.js प्रोजेक्ट को सेट अप करने, विकसित करने और प्रबंधित करने की प्रक्रिया को सरल बनाता है। यह नई परियोजनाएँ बनाने, निर्भरताएँ प्रबंधित करने और बिल्ड सेटिंग्स कॉन्फ़िगर करने का एक मानकीकृत और कुशल तरीका प्रदान करता है। यह लेख Vue CLI की विशेषताओं का पता लगाएगा और यह प्रदर्शित करेगा कि इसका प्रभावी ढंग से उपयोग कैसे किया जाए।

Vue CLI स्थापित करना

Vue CLI का उपयोग शुरू करने के लिए, आपको इसे अपने सिस्टम पर वैश्विक रूप से इंस्टॉल करना होगा। सुनिश्चित करें कि आपके पास Node.js और npm (Node Package Manager) इंस्टॉल है, फिर अपने टर्मिनल या कमांड प्रॉम्प्ट में निम्न कमांड चलाएँ:

npm install -g @vue/cli

यह कमांड वैश्विक स्तर पर Vue CLI को स्थापित करता है, जिससे vue कमांड Vue.js प्रोजेक्ट बनाने और प्रबंधित करने के लिए उपलब्ध हो जाता है।

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

Vue CLI स्थापित होने के बाद, आप निम्न कमांड चलाकर आसानी से एक नया Vue.js प्रोजेक्ट बना सकते हैं:

vue create my-vue-project

आपको अपने प्रोजेक्ट के लिए एक प्रीसेट चुनने के लिए कहा जाएगा। आप डिफ़ॉल्ट प्रीसेट में से चुन सकते हैं, जिसमें Babel और ESLint शामिल हैं, या मैन्युअल रूप से Vue Router, Vuex और TypeScript जैसी सुविधाएँ चुन सकते हैं। शुरुआती लोगों के लिए, Enter दबाकर डिफ़ॉल्ट प्रीसेट चुनने की सलाह दी जाती है।

Vue CLI प्रीसेट को समझना

Vue CLI प्रीसेट के माध्यम से आपके प्रोजेक्ट को कॉन्फ़िगर करने के लिए कई विकल्प प्रदान करता है:

डिफ़ॉल्ट प्रीसेट: इसमें Babel और ESLint जैसे आवश्यक उपकरण शामिल हैं। अधिकांश परियोजनाओं के लिए उपयुक्त और शुरुआती लोगों के लिए एक अच्छा प्रारंभिक बिंदु।
मैन्युअल रूप से सुविधाओं का चयन करें: आपको विशिष्ट सुविधाओं को चुनने की अनुमति देता है जैसे कि रूटिंग के लिए व्यू राउटर, राज्य प्रबंधन के लिए व्यूएक्स, प्रकार की जांच के लिए टाइपस्क्रिप्ट, और अधिक।

परियोजना संरचना

एक बार आपका प्रोजेक्ट बन जाने के बाद, आपको एक मानक Vue.js प्रोजेक्ट संरचना दिखाई देगी। यहाँ कुछ मुख्य फ़ोल्डर और फ़ाइलें दी गई हैं:

src: इसमें आपके अनुप्रयोग का स्रोत कोड होता है, जिसमें घटक, दृश्य और शैलियाँ शामिल होती हैं।
public: में स्थैतिक संपत्तियां और index.html फ़ाइल शामिल है, जो आपके एप्लिकेशन के लिए प्रवेश बिंदु के रूप में कार्य करती है।
src/main.js: आपके Vue एप्लिकेशन के लिए एंट्री फ़ाइल। Vue इंस्टेंस को इनिशियलाइज़ करता है और इसे DOM पर माउंट करता है।
src/App.vue: आपके एप्लिकेशन का रूट घटक। आप अपने ऐप के मुख्य लेआउट को परिभाषित करने के लिए इस फ़ाइल को कस्टमाइज़ कर सकते हैं।
src/components: इसमें Vue घटक शामिल हैं। आप यहां नए घटक जोड़ सकते हैं और उन्हें अपने एप्लिकेशन में आयात कर सकते हैं।

विकास सर्वर चलाना

अपने Vue.js एप्लिकेशन को क्रियाशील देखने के लिए, निम्न आदेश चलाकर डेवलपमेंट सर्वर प्रारंभ करें:

npm run serve

इससे http://localhost:8080 (या कोई अन्य उपलब्ध पोर्ट) पर एक स्थानीय सर्वर शुरू हो जाएगा। अपने एप्लिकेशन को देखने के लिए अपने ब्राउज़र में इस URL को खोलें।

उत्पादन के लिए भवन

जब आप अपना एप्लिकेशन तैनात करने के लिए तैयार हों, तो आपको इसे उत्पादन के लिए बनाना होगा। उत्पादन-तैयार बिल्ड बनाने के लिए निम्न कमांड चलाएँ:

npm run build

यह कमांड dist फ़ोल्डर में अनुकूलित और न्यूनतम फ़ाइलें उत्पन्न करता है, जिन्हें आप अपने वेब सर्वर पर तैनात कर सकते हैं।

Vue CLI प्लगइन्स का उपयोग करना

Vue CLI ऐसे प्लगइन्स का समर्थन करता है जो आपके प्रोजेक्ट में सुविधाएँ और क्षमताएँ जोड़ते हैं। प्लगइन स्थापित करने के लिए, निम्न कमांड चलाएँ:

vue add

उदाहरण के लिए, अपने प्रोजेक्ट में Vue Router जोड़ने के लिए, आप चलाएँगे:

vue add router

किसी प्लगइन को हटाने के लिए, vue remove कमांड का उपयोग करें:

vue remove router

प्लगइन्स को vue.config.js फ़ाइल के माध्यम से या प्रोजेक्ट के कॉन्फ़िगरेशन को संशोधित करके भी स्थापित और प्रबंधित किया जा सकता है।

Vue CLI कॉन्फ़िगरेशन को अनुकूलित करना

आप अपने प्रोजेक्ट के रूट में vue.config.js फ़ाइल बनाकर या संशोधित करके Vue CLI के कॉन्फ़िगरेशन को कस्टमाइज़ कर सकते हैं। यह फ़ाइल आपको प्रॉक्सी कॉन्फ़िगरेशन, पब्लिक पाथ और बहुत कुछ जैसी विभिन्न सेटिंग्स को समायोजित करने की अनुमति देती है।

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

निष्कर्ष

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

vuejs cli इंस्टॉल क्रिएट प्रोजेक्ट प्रीसेट कंपोनेंट्स सर्व बिल्ड प्लगइन्स कॉन्फ़िगरेशन डेवलपमेंट प्रोडक्शन सेटअप