अपना पहला Vue.js प्रोजेक्ट सेट अप करना

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

आवश्यक शर्तें

Vue.js प्रोजेक्ट सेट अप करने से पहले, सुनिश्चित करें कि आपके सिस्टम पर निम्नलिखित इंस्टॉल है:

• Node.js और npm: Vue.js के लिए Node.js और npm (Node Package Manager) इंस्टॉल होना ज़रूरी है। आप इन्हें आधिकारिक Node.js वेबसाइट से डाउनलोड कर सकते हैं।

चरण 1: Vue CLI स्थापित करें

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

npm install -g @vue/cli

यह कमांड वैश्विक रूप से Vue CLI को स्थापित करता है, जिससे आप अपने टर्मिनल में कहीं से भी vue कमांड तक पहुंच सकते हैं।

चरण 2: एक नया Vue प्रोजेक्ट बनाएँ

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

vue create my-vue-app

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

इसके बाद Vue CLI my-vue-app नाम से एक नया फ़ोल्डर बनाएगा और सभी आवश्यक फ़ाइलों और कॉन्फ़िगरेशन के साथ प्रोजेक्ट संरचना सेट करेगा।

चरण 3: प्रोजेक्ट फ़ोल्डर पर जाएँ

एक बार प्रोजेक्ट बन जाने पर, निम्नलिखित कमांड का उपयोग करके प्रोजेक्ट फ़ोल्डर पर जाएँ:

cd my-vue-app

इससे आपके टर्मिनल की कार्यशील निर्देशिका नए बनाए गए Vue.js प्रोजेक्ट फ़ोल्डर में बदल जाएगी।

चरण 4: डेवलपमेंट सर्वर चलाएँ

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

npm run serve

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

परियोजना संरचना को समझना

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

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

चरण 5: अपना एप्लिकेशन अनुकूलित करें

आप App.vue फ़ाइल को संपादित करके और नए घटक बनाकर अपने Vue.js एप्लिकेशन को कस्टमाइज़ करना शुरू कर सकते हैं। यहाँ एक सरल Vue घटक का उदाहरण दिया गया है:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

अपने परिवर्तनों को सहेजें और अपने ब्राउज़र में तुरंत परिणाम देखें, Vue की हॉट-रीलोडिंग सुविधा के लिए धन्यवाद।

निष्कर्ष

बधाई हो! आपने अपना पहला Vue.js प्रोजेक्ट सफलतापूर्वक सेट कर लिया है और Vue एप्लिकेशन बनाने और चलाने की मूल बातें सीख ली हैं। Vue CLI के साथ, आपके पास अपने Vue.js प्रोजेक्ट को स्कैफोल्ड, विकसित और प्रबंधित करने में मदद करने के लिए एक शक्तिशाली टूल है। यहाँ से, आप रूटिंग के लिए Vue Router, स्टेट मैनेजमेंट के लिए Vuex और अधिक शक्तिशाली और लचीले विकास के लिए कंपोजिशन API जैसी अधिक उन्नत सुविधाओं का पता लगा सकते हैं।